forked from sarathavasarala/EloquentJavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprint.html
More file actions
7301 lines (7056 loc) · 852 KB
/
print.html
File metadata and controls
7301 lines (7056 loc) · 852 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html><head><link rel="stylesheet" type="text/css" href="css/book.css"/><link rel="stylesheet" type="text/css" href="css/highlight.css"/><link rel="stylesheet" type="text/css" href="css/console.css"/><link rel="stylesheet" type="text/css" href="css/codemirror.css"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Version -- Eloquent JavaScript</title></head><body><div class="content"><h1><span class="number">Chapter 1: </span>Introduction</h1><div class="block"><p><a class="paragraph" href="#p79f8d5b0" name="p79f8d5b0"> ¶ </a>When personal computers were first introduced, most of them came
equipped with a simple programming language, usually a variant of
<a name="key1"></a>BASIC. Interacting with the computer was closely integrated with
this language, and thus every computer-user, whether he wanted to or
not, would get a taste of it. Now that computers have become plentiful
and cheap, typical users don't get much further than clicking things
with a mouse. For most people, this works very well. But for those of
us with a natural inclination towards technological tinkering, the
removal of programming from every-day computer use presents something
of a barrier.</p><p><a class="paragraph" href="#p807fbb" name="p807fbb"> ¶ </a>Fortunately, as an effect of developments in the World Wide Web, it so
happens that every computer equipped with a modern web-browser also
has an environment for programming JavaScript. In today's spirit of
not bothering the user with technical details, it is kept well hidden,
but a web-page can make it accessible, and use it as a platform for
learning to program.</p><p><a class="paragraph" href="#p7e8fd14b" name="p7e8fd14b"> ¶ </a>That is what this (hyper-)book tries to do.</p></div><hr/><div class="block"><blockquote>I do not enlighten those who are not eager to learn, nor arouse those
who are not anxious to give an explanation themselves. If I have
presented one corner of the square and they cannot come back to me
with the other three, I should not go over the points again.<br/><br/>― Confucius</blockquote><p><a class="paragraph" href="#p29fa40a7" name="p29fa40a7"> ¶ </a>Besides explaining JavaScript, this book tries to be an introduction
to the basic principles of programming. Programming, it turns out, is
hard. The fundamental rules are, most of the time, simple and clear.
But programs, while built on top of these basic rules, tend to become
complex enough to introduce their own rules, their own complexity.
Because of this, programming is rarely simple or predictable. As
Donald Knuth, who is something of a founding father of the field,
says, it is an <em>art</em>.</p><p><a class="paragraph" href="#p21782c4b" name="p21782c4b"> ¶ </a>To get something out of this book, more than just passive reading is
required. Try to stay sharp, make an effort to solve the exercises,
and only continue on when you are reasonably sure you understand the
material that came before.</p></div><hr/><div class="block"><blockquote>The computer programmer is a creator of universes for which he alone
is responsible. Universes of virtually unlimited complexity can be
created in the form of computer programs.<br/><br/>― Joseph Weizenbaum, <em>Computer Power and Human Reason</em></blockquote><p><a class="paragraph" href="#p7e27dc78" name="p7e27dc78"> ¶ </a>A program is many things. It is a piece of text typed by a programmer,
it is the directing force that makes the computer do what it does, it
is data in the computer's memory, yet it controls the actions
performed on this same memory. Analogies that try to compare programs
to objects we are familiar with tend to fall short, but a
superficially fitting one is that of a machine. The gears of a
mechanical watch fit together ingeniously, and if the watchmaker was
any good, it will accurately show the time for many years. The
elements of a program fit together in a similar way, and if the
programmer knows what he is doing, the program will run without
crashing.</p><p><a class="paragraph" href="#p454ee77c" name="p454ee77c"> ¶ </a>A computer is a machine built to act as a host for these immaterial
machines. Computers themselves can only do stupidly straightforward
things. The reason they are so useful is that they do these things at
an incredibly high speed. A program can, by ingeniously combining many
of these simple actions, do very complicated things.</p><p><a class="paragraph" href="#p215129e5" name="p215129e5"> ¶ </a>To some of us, writing computer programs is a fascinating game. A
program is a building of thought. It is costless to build, weightless,
growing easily under our typing hands. If we get carried away, its
size and complexity will grow out of control, confusing even the one
who created it. This is the main problem of programming. It is why so
much of today's software tends to crash, fail, screw up.</p><p><a class="paragraph" href="#p2a20af99" name="p2a20af99"> ¶ </a>When a program works, it is beautiful. The art of programming is the
skill of controlling complexity. The great program is subdued, made
simple in its complexity.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p24e3f9e3" name="p24e3f9e3"> ¶ </a>Today, many programmers believe that this complexity is best managed
by using only a small set of well-understood techniques in their
programs. They have composed strict rules about the form programs
should have, and the more zealous among them will denounce those who
break these rules as <em>bad</em> programmers.</p><p><a class="paragraph" href="#p48cb88dd" name="p48cb88dd"> ¶ </a>What hostility to the richness of programming! To try to reduce it to
something straightforward and predictable, to place a taboo on all the
weird and beautiful programs. The landscape of programming techniques
is enormous, fascinating in its diversity, still largely unexplored.
It is certainly littered with traps and snares, luring the
inexperienced programmer into all kinds of horrible mistakes, but that
only means you should proceed with caution, keep your wits about you.
As you learn, there will always be new challenges, new territory to
explore. The programmer who refuses to keep exploring will surely
stagnate, forget his joy, lose the will to program (and become a
manager).</p><p><a class="paragraph" href="#p2ba8b9bb" name="p2ba8b9bb"> ¶ </a>As far as I am concerned, the definite criterion for a program is
whether it is correct. Efficiency, clarity, and size are also
important, but how to balance these against each other is always a
matter of judgement, a judgement that each programmer must make for
himself. Rules of thumb are useful, but one should never be afraid to
break them.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p3fcf291" name="p3fcf291"> ¶ </a>In the beginning, at the birth of computing, there were no programming
languages. Programs looked something like this:</p><pre class="preformatted">00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000</pre><p><a class="paragraph" href="#p2eba4016" name="p2eba4016"> ¶ </a>That is a program to add the numbers from one to ten together, and
print out the result (1 + 2 + ... + 10 = 55). It could run on a very
simple kind of computer. To program early computers, it was necessary
to set large arrays of switches in the right position, or punch holes
in strips of cardboard and feed them to the computer. You can imagine
how this was a tedious, error-prone procedure. Even the writing of
simple programs required much cleverness and discipline, complex ones
were nearly inconceivable.</p><p><a class="paragraph" href="#pa244d1d" name="pa244d1d"> ¶ </a>Of course, manually entering these arcane patterns of bits (which is
what the 1s and 0s above are generally called) did give the programmer
a profound sense of being a mighty wizard. And that has to be worth
something, in terms of job satisfaction.</p><p><a class="paragraph" href="#p4232880f" name="p4232880f"> ¶ </a>Each line of the program contains a single instruction. It could be
written in English like this:</p><ol><li>Store the number 0 in memory location 0</li><li>Store the number 1 in memory location 1</li><li>Store the value of memory location 1 in memory location 2</li><li>Subtract the number 11 from the value in memory location 2</li><li>If the value in memory location 2 is the number 0, continue with instruction 9</li><li>Add the value of memory location 1 to memory location 0</li><li>Add the number 1 to the value of memory location 1</li><li>Continue with instruction 3</li><li>Output the value of memory location 0</li></ol><p><a class="paragraph" href="#p376bdd6c" name="p376bdd6c"> ¶ </a>While that is more readable than the binary soup, it is still rather
unpleasant. It might help to use names instead of numbers for the
instructions and memory locations:</p><pre class="preformatted"> Set 'total' to 0
Set 'count' to 1
[loop]
Set 'compare' to 'count'
Subtract 11 from 'compare'
If 'compare' is zero, continue at [end]
Add 'count' to 'total'
Add 1 to 'count'
Continue at [loop]
[end]
Output 'total'</pre><p><a class="paragraph" href="#p6c15459b" name="p6c15459b"> ¶ </a>At this point it is not too hard to see how the program works. Can
you? The first two lines give two memory locations their starting
values: <code>total</code> will be used to build up the result of the program,
and <code>count</code> keeps track of the number that we are currently looking
at. The lines using <code>compare</code> are probably the weirdest ones. What the
program wants to do is see if <code>count</code> is equal to 11, in order to
decide whether it can stop yet. Because the machine is so primitive,
it can only test whether a number is zero, and make a decision (jump)
based on that. So it uses the memory location labelled <code>compare</code> to
compute the value of <code>count - 11</code>, and makes a decision based on that
value. The next two lines add the value of <code>count</code> to the result, and
increment <code>count</code> by one every time the program has decided that it is
not 11 yet.</p><p><a class="paragraph" href="#p1ab25ae7" name="p1ab25ae7"> ¶ </a>Here is the same program in JavaScript:</p><pre class="code"><span class="keyword">var</span> <span class="variable">total</span> = <span class="atom">0</span>, <span class="variable">count</span> = <span class="atom">1</span>;
<span class="keyword">while</span> (<span class="variable">count</span> <= <span class="atom">10</span>) {
<span class="variable">total</span> += <span class="variable">count</span>;
<span class="variable">count</span> += <span class="atom">1</span>;
}
<span class="variable">print</span>(<span class="variable">total</span>);</pre><p><a class="paragraph" href="#p65172146" name="p65172146"> ¶ </a>This gives us a few more improvements. Most importantly, there is no
need to specify the way we want the program to jump back and forth
anymore. The magic word <code>while</code> takes care of that. It continues
executing the lines below it as long as the condition it was given
holds: <code>count <= 10</code>, which means '<code>count</code> is less than or equal
to <code>10</code>'. Apparently, there is no need anymore to create a temporary
value and compare that to zero. This was a stupid little detail, and
the power of programming languages is that they take care of stupid
little details for us.</p><p><a class="paragraph" href="#p6ceceb6e" name="p6ceceb6e"> ¶ </a>Finally, here is what the program could look like if we happened to
have the convenient operations <code>range</code> and <code>sum</code> available, which
respectively create a collection of numbers within a range and compute
the sum of a collection of numbers:</p><pre class="code"><span class="variable">print</span>(<span class="variable">sum</span>(<span class="variable">range</span>(<span class="atom">1</span>, <span class="atom">10</span>)));</pre><p><a class="paragraph" href="#p52ee2d" name="p52ee2d"> ¶ </a>The moral of this story, then, is that the same program can be
expressed in long and short, unreadable and readable ways. The first
version of the program was extremely obscure, while this last one is
almost English: <code>print</code> the <code>sum</code> of the <code>range</code> of numbers from <code>1</code>
to <code>10</code>. (We will see in later chapters how to build things like <code>sum</code>
and <code>range</code>.)</p><p><a class="paragraph" href="#p4c3f6ccc" name="p4c3f6ccc"> ¶ </a>A good programming language helps the programmer by providing a more
abstract way to express himself. It hides uninteresting details,
provides convenient building blocks (such as the <code>while</code> construct),
and, most of the time, allows the programmer to add building blocks
himself (such as the <code>sum</code> and <code>range</code> operations).</p></div><hr/><div class="block"><p><a class="paragraph" href="#p1d7306d6" name="p1d7306d6"> ¶ </a>JavaScript is the language that is, at the moment, mostly being used
to do all kinds of clever and horrible things with pages on the World
Wide Web. Some <a href="http://steve-yegge.blogspot.com/2007/02/next-big-language.html">people</a> claim
that the next version of JavaScript will become an important language
for other tasks too. I am unsure whether that will happen, but if you
are interested in programming, JavaScript is definitely a useful
language to learn. Even if you do not end up doing much
web programming, the mind-bending programs I will show you in this
book will always stay with you, haunt you, and influence the programs
you write in other languages.</p><p><a class="paragraph" href="#pb848901" name="pb848901"> ¶ </a>There are those who will say <em>terrible</em> things about JavaScript. Many
of these things are true. When I was for the first time required to
write something in JavaScript, I quickly came to despise the language.
It would accept almost anything I typed, but interpret it in a way
that was completely different from what I meant. This had a lot to do
with the fact that I did not have a clue what I was doing, but there
is also a real issue here: JavaScript is ridiculously liberal in what
it allows. The idea behind this design was that it would make
programming in JavaScript easier for beginners. In actuality, it
mostly makes finding problems in your programs harder, because the
system will not point them out to you.</p><p><a class="paragraph" href="#p1d6fd4ed" name="p1d6fd4ed"> ¶ </a>However, the flexibility of the language is also an advantage. It
leaves space for a lot of techniques that are impossible in more rigid
languages, and it can be used to overcome some of JavaScript's
shortcomings. After learning it properly, and working with it for a
while, I have really learned to <em>like</em> this language.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p466674a7" name="p466674a7"> ¶ </a>Contrary to what the name suggests, JavaScript has very little to do
with the programming language named Java. The similar name was
inspired by marketing considerations, rather than good judgement. In
1995, when JavaScript was introduced by Netscape, the Java language
was being heavily marketed and gaining in popularity. Apparently,
someone thought it a good idea to try and ride along on this
marketing. Now we are stuck with the name.</p><p><a class="paragraph" href="#p3da669a5" name="p3da669a5"> ¶ </a>Related to JavaScript is a thing called ECMAScript. When browsers
other than Netscape started to support JavaScript, or something that
looked like it, a document was written to describe precisely how the
language should work. The language described in this document is
called ECMAScript, after the organisation that standardised it.</p><p><a class="paragraph" href="#p505fc477" name="p505fc477"> ¶ </a>ECMAScript describes a general-purpose programming language, and does
not say anything about the integration of this language in an Internet
browser. JavaScript is ECMAScript plus extra tools for dealing with
Internet pages and browser windows.</p><p><a class="paragraph" href="#p9e425af" name="p9e425af"> ¶ </a>A few other pieces of software use the language described in the
ECMAScript document. Most importantly, the ActionScript language used
by Flash is based on ECMAScript (though it does not precisely follow
the standard). Flash is a system for adding things that move and make
lots of noise to web-pages. Knowing JavaScript won't hurt if you ever
find yourself learning to build Flash movies.</p><p><a class="paragraph" href="#p3de32070" name="p3de32070"> ¶ </a>JavaScript is still evolving. Since this book came out, ECMAScript 5
has been released, which is compatible with the version described
here, but adds some of the functionality we will be writing ourselves
as built-in methods. The newest generation of browsers provides this
expanded version of JavaScript. As of 2011, 'ECMAScript harmony', a
more radical extension of the language, is in the process of being
standardised. You should not worry too much about these new versions
making the things you learn from this book obsolete. For one thing,
they will be an extension of the language we have now, so almost
everything written in this book will still hold.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p1aab2232" name="p1aab2232"> ¶ </a>Most chapters in this book contain quite a lot of code<a class="footref" href="#footnote1">1</a>. In my
experience, reading and writing code is an important part of learning
to program. Try to not just glance over these examples, but read them
attentively and understand them. This can be slow and confusing at
first, but you will quickly get the hang of it. The same goes for the
exercises. Don't assume you understand them until you've actually
written a working solution.</p><p><a class="paragraph" href="#p74d44c85" name="p74d44c85"> ¶ </a>Because of the way the web works, it is always possible to look at the
JavaScript programs that people put in their web-pages. This can be a
good way to learn how some things are done. Because most web
programmers are not 'professional' programmers, or consider JavaScript
programming so uninteresting that they never properly learned it, a
lot of the code you can find like this is of a <em>very</em> bad quality.
When learning from ugly or incorrect code, the ugliness and confusion
will propagate into your own code, so be careful who you learn from.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p6fe05849" name="p6fe05849"> ¶ </a>To allow you to try out programs, both the examples and the code you
write yourself, this book makes use of something called a <a name="key2"></a>console.
If you are using a modern graphical browser (Internet Explorer version
6 or higher, Firefox 1.5 or higher, Opera 9 or higher, Safari 3 or
higher), the pages in this book will show a bar at the bottom of your
screen. You can open the console by clicking on the little arrow on
the far right of this bar.</p><p><a class="paragraph" href="#p7303f6ba" name="p7303f6ba"> ¶ </a>The console contains three important elements. There is the output
window, which is used to show error messages and things that programs
print out. Below that, there is a line where you can type in a piece
of JavaScript. Try typing in a number, and pressing the enter key to
run what you typed. If the text you typed produced something
meaningful, it will be shown in the output window. Now try typing
<code>wrong!</code>, and press enter again. The output window will show an error
message. You can use the arrow-up and arrow-down keys to go back to
previous commands that you typed.</p><p><a class="paragraph" href="#p513e6d64" name="p513e6d64"> ¶ </a>For bigger pieces of code, those that span multiple lines and which
you want to keep around for a while, the field on the right can be
used. The 'Run' button is used to execute programs written in this
field. It is possible to have multiple programs open at the same time.
Use the 'New' button to open a new, empty buffer. When there is more
than one open buffer, the menu next to the 'Run' button can be used to
choose which one is being shown. The 'Close' button, as you might
expect, closes a buffer.</p><p><a class="paragraph" href="#p7fc41d6e" name="p7fc41d6e"> ¶ </a>Example programs in this book always have a small button with an arrow
in their top-right corner, which can be used to run them. The example
we saw earlier looked like this:</p><pre class="code"><span class="keyword">var</span> <span class="variable">total</span> = <span class="atom">0</span>, <span class="variable">count</span> = <span class="atom">1</span>;
<span class="keyword">while</span> (<span class="variable">count</span> <= <span class="atom">10</span>) {
<span class="variable">total</span> += <span class="variable">count</span>;
<span class="variable">count</span> += <span class="atom">1</span>;
}
<span class="variable">print</span>(<span class="variable">total</span>);</pre><p><a class="paragraph" href="#p18d21579" name="p18d21579"> ¶ </a>Run it by clicking the arrow. There is also another button, which is
used to load the program into the console. Do not hesitate to modify
it and try out the result. The worst that could happen is that you
create an endless loop. An endless loop is what you get when the
condition of the <code>while</code> never becomes false, for example if you
choose to add <code>0</code> instead of <code>1</code> to the count variable. Now the
program will run forever.</p><p><a class="paragraph" href="#p640328a9" name="p640328a9"> ¶ </a>Fortunately, browsers keep an eye on the programs running inside them.
Whenever one of them is taking suspiciously long to finish, they will
ask you if you want to cut it off.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p5b6fd1ae" name="p5b6fd1ae"> ¶ </a>In some later chapters, we will build example programs that consist of
many blocks of code. Often, you have to run every one of them for the
program to work. As you may have noticed, the arrow in a block of code
turns purple after the block has been run. When reading a chapter, try
to run every block of code you come across, especially those that
'define' something new (you will see what that means in the next
chapter).</p><p><a class="paragraph" href="#p784d1b5a" name="p784d1b5a"> ¶ </a>It is, of course, possible that you can not read a chapter in one
sitting. This means you will have to start halfway when you continue
reading, but if you don't run all the code starting from the top of
the chapter, some things might not work. By holding the shift key
while pressing the 'run' arrow on a block of code, all blocks before
that one will be run as well, so when you start in the middle of a
chapter, hold shift the first time you run a piece of code, and
everything should work as expected.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p17555617" name="p17555617"> ¶ </a>Finally, the little face in the top-left corner of your screen can be
used to send me, the author, a message. If you have a comment, or you
find a passage ridiculously confusing, or you just spot a spelling
error, tell me about it. Sending a message can be done without leaving
the page, so it won't interrupt your reading.</p></div><ol class="footnotes"><li><a name="footnote1"></a>'Code' is the substance that programs are made of. Every piece of a
program, whether it is a single line or the whole thing, can be
referred to as 'code'.</li></ol><h1><span class="number">Chapter 2: </span>Basic JavaScript: values, variables, and control flow</h1><div class="block"><p><a class="paragraph" href="#pf16a700" name="pf16a700"> ¶ </a>Inside the computer's world, there is only data. That which is not
data, does not exist. Although all data is in essence just a sequence
of bits<a class="footref" href="#footnote1">1</a>, and is thus fundamentally alike, every piece of data plays
its own role. In JavaScript's system, most of this data is neatly
separated into things called <a name="key1"></a>values. Every value has a type, which
determines the kind of role it can play. There are six basic types of
values: Numbers, strings, booleans, objects, functions, and undefined
values.</p><p><a class="paragraph" href="#p2c1d45c9" name="p2c1d45c9"> ¶ </a>To create a value, one must merely invoke its name. This is very
convenient. You don't have to gather building material for your
values, or pay for them, you just call for one and <em>woosh</em>, you have
it. They are not created from thin air, of course. Every value has to
be stored somewhere, and if you want to use a gigantic number of them
at the same time you might run out of computer memory. Fortunately,
this is only a problem if you need them all simultaneously. As soon as
you no longer use a value, it will dissipate, leaving behind only a
few bits. These bits are recycled to make the next generation of
values.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p19562003" name="p19562003"> ¶ </a>Values of the type <a name="key2"></a>number are, as you might have deduced, numeric
values. They are written the way numbers are usually written:</p><pre class="code expression"><span class="atom">144</span></pre><p><a class="paragraph" href="#p1f52a0a5" name="p1f52a0a5"> ¶ </a>Enter that in the console, and the same thing is printed in the output
window. The text you typed in gave rise to a number value, and the
console took this number and wrote it out to the screen again. In a
case like this, that was a rather pointless exercise, but soon we will
be producing values in less straightforward ways, and it can be useful
to 'try them out' on the console to see what they produce.</p><p><a class="paragraph" href="#p80cb806" name="p80cb806"> ¶ </a>This is what <code>144</code> looks like in bits<a class="footref" href="#footnote2">2</a>:</p><pre class="preformatted">0100000001100010000000000000000000000000000000000000000000000000</pre><p><a class="paragraph" href="#p1b9e3d68" name="p1b9e3d68"> ¶ </a>The number above has 64 bits. Numbers in JavaScript always do. This
has one important repercussion: There is a limited amount of different
numbers that can be expressed. With three decimal digits, only the
numbers 0 to 999 can be written, which is 10<sup>3</sup> = 1000 different
numbers. With 64 binary digits, 2<sup>64</sup> different numbers can be written.
This is a lot, more than 10<sup>19</sup> (a one with nineteen zeroes).</p><p><a class="paragraph" href="#p72d2d6de" name="p72d2d6de"> ¶ </a>Not all whole numbers below 10<sup>19</sup> fit in a JavaScript number though.
For one, there are also negative numbers, so one of the bits has to be
used to store the sign of the number. A bigger issue is that non-whole
numbers must also be represented. To do this, 11 bits are used to
store the position of the fractional dot within the number.</p><p><a class="paragraph" href="#p440e6212" name="p440e6212"> ¶ </a>That leaves 52 bits<a class="footref" href="#footnote3">3</a>. Any whole number less than 2<sup>52</sup>, which is over
10<sup>15</sup>, will safely fit in a JavaScript number. In most cases, the
numbers we are using stay well below that, so we do not have to
concern ourselves with bits at all. Which is good. I have nothing in
particular against bits, but you <em>do</em> need a terrible lot of them to
get anything done. When at all possible, it is more pleasant to deal
with bigger things.</p><p><a class="paragraph" href="#p3986de35" name="p3986de35"> ¶ </a>Fractional numbers are written by using a dot.</p><pre class="code expression"><span class="atom">9.81</span></pre><p><a class="paragraph" href="#pb4a36c6" name="pb4a36c6"> ¶ </a>For very big or very small numbers, one can also use 'scientific'
notation by adding an <code>e</code>, followed by the exponent of the number:</p><pre class="code expression"><span class="atom">2.998e8</span></pre><p><a class="paragraph" href="#p3140e007" name="p3140e007"> ¶ </a>Which is 2.998 * 10<sup>8</sup> = 299800000.</p><p><a class="paragraph" href="#pb68b1cd" name="pb68b1cd"> ¶ </a>Calculations with whole numbers (also called integers) that fit in 52
bits are guaranteed to always be precise. Unfortunately, calculations
with fractional numbers are generally not. The same way that π (pi) can not be
precisely expressed by a finite amount of decimal digits, many numbers
lose some precision when only 64 bits are available to store them.
This is a shame, but it only causes practical problems in very
specific situations. The important thing is to be aware of it, and
treat fractional digital numbers as approximations, not as precise
values.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p355f31b3" name="p355f31b3"> ¶ </a>The main thing to do with numbers is arithmetic. Arithmetic operations
such as addition or multiplication take two number values and produce
a new number from them. Here is what they look like in JavaScript:</p><pre class="code expression"><span class="atom">100</span> + <span class="atom">4</span> * <span class="atom">11</span></pre><p><a class="paragraph" href="#p5df9439a" name="p5df9439a"> ¶ </a>The <a name="key3"></a><code>+</code> and <a name="key4"></a><code>*</code> symbols are called operators. The first stands for
addition, and the second for multiplication. Putting an operator
between two values will <a name="key5"></a>apply it to those values, and
produce a new value.</p><p><a class="paragraph" href="#p40d95ac7" name="p40d95ac7"> ¶ </a>Does the example mean 'add 4 and 100, and multiply the result by 11',
or is the multiplication done before the adding? As you might have
guessed, the multiplication happens first. But, as in mathematics,
this can be changed by wrapping the addition in parentheses<a name="key6"></a>:</p><pre class="code expression">(<span class="atom">100</span> + <span class="atom">4</span>) * <span class="atom">11</span></pre><p><a class="paragraph" href="#p50d8329c" name="p50d8329c"> ¶ </a>For subtraction, there is the <a name="key7"></a><code>-</code> operator, and division can be done
with <a name="key8"></a><code>/</code>. When operators appear together without parentheses, the
order in which they are applied is determined by the <a name="key9"></a>precedence of
the operators. The first example shows that multiplication has a
higher precedence than addition. Division and multiplication always
come before subtraction and addition. When multiple operators with the
same precedence appear next to each other (<code>1 - 1 + 1</code>) they are
applied left-to-right.</p><p><a class="paragraph" href="#p41cb7a91" name="p41cb7a91"> ¶ </a>Try to figure out what value this produces, and then run it to see if
you were correct...</p><pre class="code expression"><span class="atom">115</span> * <span class="atom">4</span> - <span class="atom">4</span> + <span class="atom">88</span> / <span class="atom">2</span></pre><p><a class="paragraph" href="#p25c63f52" name="p25c63f52"> ¶ </a>These rules of precedence are not something you should worry about.
When in doubt, just add parentheses.</p><p><a class="paragraph" href="#p762478e7" name="p762478e7"> ¶ </a>There is one more arithmetic operator which is probably less familiar
to you. The <a name="key10"></a><code>%</code> symbol is used to represent the <a name="key11"></a>remainder operation.
<code>X % Y</code> is the remainder of dividing <code>X</code> by <code>Y</code>. For example
<code>314 % 100</code> is <code>14</code>, <code>10 % 3</code> is <code>1</code>, and <code>144 % 12</code> is <code>0</code>. Remainder
has the same precedence as multiplication and division.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p4a3424f8" name="p4a3424f8"> ¶ </a>The next data type is the <a name="key12"></a>string. Its use is not as evident from its
name as with numbers, but it also fulfills a very basic role. Strings
are used to represent text, the name supposedly derives from the fact
that it strings together a bunch of characters. Strings are written by
enclosing their content in quotes:</p><pre class="code expression"><span class="string">"Patch my boat with chewing gum."</span></pre><p><a class="paragraph" href="#p2578d13f" name="p2578d13f"> ¶ </a>Almost anything can be put between double quotes, and JavaScript will
make a string value out of it. But a few characters are tricky. You
can imagine how putting quotes between quotes might be hard. Newlines,
<a name="key13"></a>the things you get when you press enter, can also not be put
between quotes, the string has to stay on a single line.</p><p><a class="paragraph" href="#p5b134df3" name="p5b134df3"> ¶ </a>To be able to have such characters in a string, the following trick is
used: Whenever a backslash ('<code>\</code>') is found inside quoted text, it
indicates that the character after it has a special meaning. A quote
that is preceded by a backslash will not end the string, but be part
of it. When an '<code>n</code>' character occurs after a backslash, it is
interpreted as a newline. Similarly, a '<code>t</code>' after a backslash means a
tab character<a class="footref" href="#footnote4">4</a>.</p><pre class="code expression"><span class="string">"This is the first line\nAnd this is the second"</span></pre><p><a class="paragraph" href="#p38a5cda" name="p38a5cda"> ¶ </a>Note that if you type this into the console, it'll display it back in
'source' form, with the quotes and backslash escapes. To see only the
actual text, you can type <code>print("a\nb")</code>. What that does precisely
will be clarified a little further on.</p><p><a class="paragraph" href="#p69b5ec55" name="p69b5ec55"> ¶ </a>There are of course situations where you want a backslash in a string
to be just a backslash, not a special code. If two backslashes follow
each other, they will collapse right into each other, and only one
will be left in the resulting string value:</p><pre class="code expression"><span class="string">"A newline character is written like \"\\n\"."</span></pre></div><hr/><div class="block"><p><a class="paragraph" href="#p78af27fc" name="p78af27fc"> ¶ </a>Strings can not be divided, multiplied, or subtracted. The <a name="key14"></a><code>+</code>
operator <em>can</em> be used on them. It does not add, but it concatenates,
it glues two strings together.</p><pre class="code expression"><span class="string">"con"</span> + <span class="string">"cat"</span> + <span class="string">"e"</span> + <span class="string">"nate"</span></pre><p><a class="paragraph" href="#p52eb7d44" name="p52eb7d44"> ¶ </a>There are more ways of manipulating strings, but these are discussed
later.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p66e362e9" name="p66e362e9"> ¶ </a>Not all operators are symbols, some are written as words. For example,
the <a name="key15"></a><code>typeof</code> operator, which produces a string value naming the type
of the value you give it.</p><pre class="code expression">typeof <span class="atom">4.5</span></pre><p><a class="paragraph" href="#p1393153f" name="p1393153f"> ¶ </a>The other operators we saw all operated on two values, <code>typeof</code> takes
only one. Operators that use two values are called <a name="key16"></a>binary operators,
while those that take one are called <a name="key17"></a>unary operators. The
<a name="key18"></a>minus operator can be used both as a binary and a unary
operator:</p><pre class="code expression">- (<span class="atom">10</span> - <span class="atom">2</span>)</pre></div><hr/><div class="block"><p><a class="paragraph" href="#p1d28c375" name="p1d28c375"> ¶ </a>Then there are values of the <a name="key19"></a>boolean type. There are only two of
these: <a name="key20"></a><code>true</code> and <a name="key21"></a><code>false</code>. Here is one way to produce a <code>true</code>
value:</p><pre class="code expression"><span class="atom">3</span> > <span class="atom">2</span></pre><p><a class="paragraph" href="#p64212834" name="p64212834"> ¶ </a>And <code>false</code> can be produced like this:</p><pre class="code expression"><span class="atom">3</span> < <span class="atom">2</span></pre><p><a class="paragraph" href="#p3e739e44" name="p3e739e44"> ¶ </a>I hope you have seen the <a name="key22"></a><code>></code> and <a name="key23"></a><code><</code> signs before. They mean,
respectively, 'is greater than' and 'is less than'. They are binary
operators, and the result of applying them is a boolean value that
indicates whether they hold in this case.</p><p><a class="paragraph" href="#p2dc50e01" name="p2dc50e01"> ¶ </a>Strings can be compared in the same way:</p><pre class="code expression"><span class="string">"Aardvark"</span> < <span class="string">"Zoroaster"</span></pre><p><a class="paragraph" href="#p7e3e4694" name="p7e3e4694"> ¶ </a>The way strings are ordered is more or less alphabetic. More or
less... Uppercase letters are always 'less' than lowercase ones, so
<code>"Z" < "a"</code> (upper-case Z, lower-case a) is <code>true</code>, and non-alphabetic
characters ('<code>!</code>', '<code>@</code>', etc) are also included in the ordering. The
actual way in which the comparison is done is based on the <a name="key24"></a>Unicode
standard. This standard assigns a number to virtually every character
one would ever need, including characters from Greek, Arabic,
Japanese, Tamil, and so on. Having such numbers is practical for
storing strings inside a computer ― you can represent them as a list
of numbers. When comparing strings, JavaScript just compares the
numbers of the characters inside the string, from left to right.</p><p><a class="paragraph" href="#p16c0de67" name="p16c0de67"> ¶ </a>Other similar operators are <a name="key25"></a><code>>=</code> ('is greater than or equal to'),
<a name="key26"></a><code><=</code> (is less than or equal to), <a name="key27"></a><code>==</code> ('is equal to'), and <a name="key28"></a><code>!=</code>
('is not equal to').</p><pre class="code expression"><span class="string">"Itchy"</span> != <span class="string">"Scratchy"</span></pre><pre class="code expression"><span class="atom">5e2</span> == <span class="atom">500</span></pre></div><hr/><div class="block"><p><a class="paragraph" href="#p8cbcfe" name="p8cbcfe"> ¶ </a>There are also some useful operations that can be applied to boolean
values themselves. JavaScript supports three logical operators: <em>and</em>,
<em>or</em>, and <em>not</em>. These can be used to 'reason' about booleans.</p><p><a class="paragraph" href="#p573b490c" name="p573b490c"> ¶ </a>The <a name="key29"></a><code>&&</code> operator represents logical <em>and</em>. It is a binary operator,
and its result is only <code>true</code> if both of the values given to it are
<code>true</code>.</p><pre class="code expression"><span class="atom">true</span> && <span class="atom">false</span></pre><p><a class="paragraph" href="#p212b9b68" name="p212b9b68"> ¶ </a><a name="key30"></a><code>||</code> is the logical <em>or</em>, it is <code>true</code> if either of the values given
to it is <code>true</code>:</p><pre class="code expression"><span class="atom">true</span> || <span class="atom">false</span></pre><p><a class="paragraph" href="#p7168ee71" name="p7168ee71"> ¶ </a><em>Not</em> is written as an exclamation mark, <a name="key31"></a><code>!</code>, it is a unary operator
that flips the value given to it, <code>!true</code> is <code>false</code>, and <code>!false</code> is
<code>true</code>.</p></div><hr/><div class="block"><a name="exercise1"></a><div class="exercisenum">Ex. 2.1</div><div class="exercise"><pre class="code expression">((<span class="atom">4</span> >= <span class="atom">6</span>) || (<span class="string">"grass"</span> != <span class="string">"green"</span>)) &&
!(((<span class="atom">12</span> * <span class="atom">2</span>) == <span class="atom">144</span>) && <span class="atom">true</span>)</pre><p><a class="paragraph" href="#p168e6ad" name="p168e6ad"> ¶ </a>Is this true? For readability, there are a lot of unnecessary
parentheses in there. This simple version means the same thing:</p><pre class="code expression">(<span class="atom">4</span> >= <span class="atom">6</span> || <span class="string">"grass"</span> != <span class="string">"green"</span>) &&
!(<span class="atom">12</span> * <span class="atom">2</span> == <span class="atom">144</span> && <span class="atom">true</span>)</pre></div><div class="solution"><p><a class="paragraph" href="#p7888dd02" name="p7888dd02"> ¶ </a>Yes, it is <code>true</code>. You can reduce it step by step like this:</p><pre class="code expression">(<span class="atom">false</span> || <span class="atom">true</span>) && !(<span class="atom">false</span> && <span class="atom">true</span>)</pre><pre class="code expression"><span class="atom">true</span> && !<span class="atom">false</span></pre><pre class="code expression"><span class="atom">true</span></pre><p><a class="paragraph" href="#p706b68a" name="p706b68a"> ¶ </a>I hope you noticed that <code>"grass" != "green"</code> is <code>true</code>. Grass may be
green, but it is not equal to green.</p></div></div><hr/><div class="block"><p><a class="paragraph" href="#p34222453" name="p34222453"> ¶ </a>It is not always obvious when parentheses are needed. In practice, one
can usually get by with knowing that of the operators we have seen so
far, <code>||</code> has the lowest precedence, then comes <code>&&</code>, then the
comparison operators (<code>></code>, <code>==</code>, etcetera), and then the rest. This
has been chosen in such a way that, in simple cases, as few
parentheses as possible are necessary.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p65af5913" name="p65af5913"> ¶ </a>All the examples so far have used the language like you would use a
pocket calculator. Make some values and apply operators to them to get
new values. Creating values like this is an essential part of every
JavaScript program, but it is only a part. A piece of code that
produces a value is called an <a name="key32"></a>expression. Every value that is
written directly (such as <code>22</code> or <code>"psychoanalysis"</code>) is an
expression. An expression between parentheses is also an expression.
And a binary operator applied to two expressions, or a unary operator
applied to one, is also an expression.</p><p><a class="paragraph" href="#p5b67046e" name="p5b67046e"> ¶ </a>There are a few more ways of building expressions, which will be
revealed when the time is ripe.</p><p><a class="paragraph" href="#p62c355c2" name="p62c355c2"> ¶ </a>There exists a unit that is bigger than an expression. It is called a
<a name="key33"></a>statement. A program is built as a list of statements. Most
statements end with a <a name="key34"></a>semicolon (<code>;</code>). The simplest kind of
statement is an expression with a semicolon after it. This is a
program:</p><pre class="code"><span class="atom">1</span>;
!<span class="atom">false</span>;</pre><p><a class="paragraph" href="#p29a7e8db" name="p29a7e8db"> ¶ </a>It is a useless program. An expression can be content to just produce
a value, but a statement only amounts to something if it somehow
changes the world. It could print something to the screen ― that
counts as changing the world ― or it could change the internal state
of the program in a way that will affect the statements that come
after it. These changes are called '<a name="key35"></a>side effects'. The statements in
the example above just produce the values <code>1</code> and <code>true</code>, and then
immediately throw them into the bit bucket<a class="footref" href="#footnote5">5</a>. This leaves no
impression on the world at all, and is not a side effect.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p65170986" name="p65170986"> ¶ </a>How does a program keep an internal state? How does it remember
things? We have seen how to produce new values from old values, but
this does not change the old values, and the new value has to be
immediately used or it will dissipate again. To catch and hold values,
JavaScript provides a thing called a <a name="key36"></a>variable.</p><pre class="code"><span class="keyword">var</span> <span class="variable">caught</span> = <span class="atom">5</span> * <span class="atom">5</span>;</pre><p><a class="paragraph" href="#p405a34f5" name="p405a34f5"> ¶ </a>A variable always has a name, and it can point at a value, holding on
to it. The statement above creates a variable called <code>caught</code> and uses
it to grab hold of the number that is produced by multiplying <code>5</code> by
<code>5</code>.</p><p><a class="paragraph" href="#p6a3bce68" name="p6a3bce68"> ¶ </a>After running the above program, you can type the word <code>caught</code> into
the console, and it will retrieve the value <code>25</code> for you. The name of
a variable is used to fetch its value. <code>caught + 1</code> also works. A
variable name can be used as an expression, and thus can be part of
bigger expressions.</p><p><a class="paragraph" href="#p91f2da9" name="p91f2da9"> ¶ </a>The word <a name="key37"></a><code>var</code> is used to create a new variable. After <code>var</code>, the
name of the variable follows. Variable names can be almost every word,
but they may not include spaces. Digits can be part of variable names,
<code>catch22</code> is a valid name, but the name must not start with one. The
characters '<code>$</code>' and '<code>_</code>' can be used in names as if they were
letters, so <code>$_$</code> is a correct variable name.</p><p><a class="paragraph" href="#p223643ae" name="p223643ae"> ¶ </a>If you want the new variable to immediately capture a value, which is
often the case, the <a name="key38"></a><code>=</code> operator can be used to give it the value of
some expression.</p><p><a class="paragraph" href="#p666db7fe" name="p666db7fe"> ¶ </a>When a variable points at a value, that does not mean it is tied to
that value forever. At any time, the <code>=</code> operator can be used on
existing variables to yank them away from their current value and make
them point to a new one.</p><pre class="code"><span class="variable">caught</span> = <span class="atom">4</span> * <span class="atom">4</span>;</pre></div><hr/><div class="block"><p><a class="paragraph" href="#p2d8c2774" name="p2d8c2774"> ¶ </a>You should imagine variables as tentacles, rather than boxes. They do
not <em>contain</em> values, they <em>grasp</em> them ― two variables can refer to
the same value. Only the values that the program still has a hold on
can be accessed by it. When you need to remember something, you grow a
tentacle to hold on to it, or re-attach one of your existing tentacles
to a new value: To remember the amount of dollars that Luigi still
owes you, you could do...</p><pre class="code"><span class="keyword">var</span> <span class="variable">luigiDebt</span> = <span class="atom">140</span>;</pre><p><a class="paragraph" href="#p1d72168c" name="p1d72168c"> ¶ </a>Then, every time Luigi pays something back, this amount can be
decremented by giving the variable a new number:</p><pre class="code"><span class="variable">luigiDebt</span> = <span class="variable">luigiDebt</span> - <span class="atom">35</span>;</pre><p><a class="paragraph" href="#p233236e8" name="p233236e8"> ¶ </a>The collection of variables and their values that exist at a given
time is called the <a name="key39"></a>environment. When a program starts up, this
environment is not empty. It always contains a number of standard
variables. When your browser loads a page, it creates a new
environment and attaches these standard values to it. The variables
created and modified by programs on that page survive until the
browser goes to a new page.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p22a73bc5" name="p22a73bc5"> ¶ </a>A lot of the values provided by the standard environment have the type
'<a name="key40"></a>function'. A function is a piece of program wrapped in a value.
Generally, this piece of program does something useful, which can be
invoked using the function value that contains it. In a browser
environment, the variable <a name="key41"></a><code>alert</code> holds a function that shows a
little dialog window with a message. It is used like this:</p><pre class="code"><span class="variable">alert</span>(<span class="string">"Also, your hair is on fire."</span>);</pre><p><a class="paragraph" href="#p2982579e" name="p2982579e"> ¶ </a><a name="key42"></a>Executing the code in a function is called <a name="key43"></a>invoking, calling,
or <a name="key44"></a>applying it. The notation for doing this uses parentheses. Every
expression that produces a function value can be invoked by putting
parentheses after it. The string value between the parentheses is
given to the function, which uses it as the text to show in the dialog
window. Values given to functions are called <a name="key45"></a>parameters or
<a name="key46"></a>arguments. <code>alert</code> needs only one of them, but other functions might
need a different number.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p29981d64" name="p29981d64"> ¶ </a>Showing a dialog window is a side effect. A lot of functions are
useful because of the side effects they produce. It is also possible
for a function to produce a value, in which case it does not need to
have a side effect to be useful. For example, there is a function
<a name="key47"></a><code>Math.max</code>, which takes two arguments and gives back the biggest of
the two:</p><pre class="code"><span class="variable">alert</span>(<span class="variable">Math</span>.<span class="property">max</span>(<span class="atom">2</span>, <span class="atom">4</span>));</pre><p><a class="paragraph" href="#p7f3f1904" name="p7f3f1904"> ¶ </a><a name="key48"></a>When a function produces a value, it is said to <a name="key49"></a>return
it. Because things that produce values are always expressions in
JavaScript, function calls can be used as a part of bigger
expressions:</p><pre class="code"><span class="variable">alert</span>(<span class="variable">Math</span>.<span class="property">min</span>(<span class="atom">2</span>, <span class="atom">4</span>) + <span class="atom">100</span>);</pre><p><a class="paragraph" href="#p2babec3e" name="p2babec3e"> ¶ </a><a href="chapter3.html">Chapter 3</a> discusses writing your own functions.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p39889ede" name="p39889ede"> ¶ </a>As the previous examples show, <code>alert</code> can be useful for showing the
result of some expression. Clicking away all those little windows can
get on one's nerves though, so from now on we will prefer to use a
similar function, called <a name="key50"></a><code>print</code>, which does not pop up a window,
but just writes a value to the output area of the console. <code>print</code> is
not a standard JavaScript function, browsers do not provide it for
you, but it is made available by this book, so you can use it on these
pages.</p><pre class="code"><span class="variable">print</span>(<span class="string">"N"</span>);</pre><p><a class="paragraph" href="#p6dde07b4" name="p6dde07b4"> ¶ </a>A similar function, also provided on these pages, is <code>show</code>. While
<code>print</code> will display its argument as flat text, <a name="key51"></a><code>show</code> tries to
display it the way it would look in a program, which can give more
information about the type of the value. For example, string values
keep their quotes when given to <code>show</code>:</p><pre class="code"><span class="variable">show</span>(<span class="string">"N"</span>);</pre><p><a class="paragraph" href="#p5758ea97" name="p5758ea97"> ¶ </a>The standard environment provided by browsers contains a few more
functions for popping up windows. You can ask the user an OK/Cancel
question using <a name="key52"></a><code>confirm</code>. This returns a boolean, <code>true</code> if the user
presses 'OK', and <code>false</code> if he presses 'Cancel'.</p><pre class="code"><span class="variable">show</span>(<span class="variable">confirm</span>(<span class="string">"Shall we, then?"</span>));</pre><p><a class="paragraph" href="#p6958f95" name="p6958f95"> ¶ </a><a name="key53"></a><code>prompt</code> can be used to ask an 'open' question. The first argument
is the question, the second one is the text that the user starts with.
A line of text can be typed into the window, and the function will
return this as a string.</p><pre class="code"><span class="variable">show</span>(<span class="variable">prompt</span>(<span class="string">"Tell us everything you know."</span>, <span class="string">"..."</span>));</pre></div><hr/><div class="block"><p><a class="paragraph" href="#p6327a1f" name="p6327a1f"> ¶ </a>It is possible to give almost every variable in the environment a new
value. This can be useful, but also dangerous. If you give <code>print</code> the
value <code>8</code>, you won't be able to print things anymore. Fortunately,
there is a big 'Reset' button on the console, which will reset the
environment to its original state.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p3ccf80f0" name="p3ccf80f0"> ¶ </a>One-line programs are not very interesting. When you put more than one
statement into a program, the statements are, predictably, executed
one at a time, from top to bottom.</p><pre class="code"><span class="keyword">var</span> <span class="variable">theNumber</span> = <span class="variable">Number</span>(<span class="variable">prompt</span>(<span class="string">"Pick a number"</span>, <span class="string">""</span>));
<span class="variable">print</span>(<span class="string">"Your number is the square root of "</span> +
(<span class="variable">theNumber</span> * <span class="variable">theNumber</span>));</pre><p><a class="paragraph" href="#p5b700f68" name="p5b700f68"> ¶ </a>The function <a name="key54"></a><code>Number</code> converts a value to a number, which is needed
in this case because the result of <code>prompt</code> is a string value. There
are similar functions called <a name="key55"></a><code>String</code> and <a name="key56"></a><code>Boolean</code> which convert
values to those types.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p1f853603" name="p1f853603"> ¶ </a>Consider a program that prints out all even numbers from 0 to 12. One
way to write this is:</p><pre class="code"><span class="variable">print</span>(<span class="atom">0</span>);
<span class="variable">print</span>(<span class="atom">2</span>);
<span class="variable">print</span>(<span class="atom">4</span>);
<span class="variable">print</span>(<span class="atom">6</span>);
<span class="variable">print</span>(<span class="atom">8</span>);
<span class="variable">print</span>(<span class="atom">10</span>);
<span class="variable">print</span>(<span class="atom">12</span>);</pre><p><a class="paragraph" href="#p587f2118" name="p587f2118"> ¶ </a>That works, but the idea of writing a program is to make something
<em>less</em> work, not more. If we needed all even numbers below 1000, the
above would be unworkable. What we need is a way to automatically
repeat some code.</p><pre class="code"><span class="keyword">var</span> <span class="variable">currentNumber</span> = <span class="atom">0</span>;
<span class="keyword">while</span> (<span class="variable">currentNumber</span> <= <span class="atom">12</span>) {
<span class="variable">print</span>(<span class="variable">currentNumber</span>);
<span class="variable">currentNumber</span> = <span class="variable">currentNumber</span> + <span class="atom">2</span>;
}</pre><p><a class="paragraph" href="#p4348d914" name="p4348d914"> ¶ </a>You may have seen <a name="key57"></a><code>while</code> in the introduction chapter. A statement
starting with the word <code>while</code> creates a <a name="key58"></a>loop. A loop is a
disturbance in the sequence of statements, it may cause the program to
repeat some statements multiple times. In this case, the word <code>while</code>
is followed by an expression in parentheses (the parentheses are
compulsory here), which is used to determine whether the loop will
loop or finish. As long as the boolean value produced by this
expression is <code>true</code>, the code in the loop is repeated. As soon as it
is false, the program goes to the bottom of the loop and continues as
normal.</p><p><a class="paragraph" href="#p6ad2f5e2" name="p6ad2f5e2"> ¶ </a>The variable <code>currentNumber</code> demonstrates the way a variable can track
the progress of a program. Every time the loop repeats, it is
incremented by <code>2</code>, and at the beginning of every repetition, it is
compared with the number <code>12</code> to decide whether to keep on looping.</p><p><a class="paragraph" href="#p7b49a0e7" name="p7b49a0e7"> ¶ </a>The third part of a <code>while</code> statement is another statement. This is
the <a name="key59"></a>body of the loop, the action or actions that must take place
multiple times. If we did not have to print the numbers, the program
could have been:</p><pre class="code"><span class="keyword">var</span> <span class="variable">currentNumber</span> = <span class="atom">0</span>;
<span class="keyword">while</span> (<span class="variable">currentNumber</span> <= <span class="atom">12</span>)
<span class="variable">currentNumber</span> = <span class="variable">currentNumber</span> + <span class="atom">2</span>;</pre><p><a class="paragraph" href="#p6519059c" name="p6519059c"> ¶ </a>Here, <code>currentNumber = currentNumber + 2;</code> is the statement that forms
the body of the loop. We must also print the number, though, so the
loop statement must consist of more than one statement. <a name="key60"></a>Braces
(<code>{</code> and <code>}</code>) are used to group statements into <a name="key61"></a>blocks. To the world
outside the block, a block counts as a single statement. In the earlier
example, this is used to include in the loop both the call to <code>print</code>
and the statement that updates <code>currentNumber</code>.</p></div><hr/><div class="block"><a name="exercise2"></a><div class="exercisenum">Ex. 2.2</div><div class="exercise"><p><a class="paragraph" href="#p643af372" name="p643af372"> ¶ </a>Use the techniques shown so far to write a program that calculates and
shows the value of 2<sup>10</sup> (2 to the 10th power). You are, obviously, not
allowed to use a cheap trick like just writing <code>2 * 2 * ...</code>.</p><p><a class="paragraph" href="#p27b31837" name="p27b31837"> ¶ </a>If you are having trouble with this, try to see it in terms of the
even-numbers example. The program must perform an action a certain
amount of times. A counter variable with a <code>while</code> loop can be used
for that. Instead of printing the counter, the program must multiply
something by 2. This something should be another variable, in which
the result value is built up.</p><p><a class="paragraph" href="#p551ebf82" name="p551ebf82"> ¶ </a>Don't worry if you don't quite see how this would work yet. Even if
you perfectly understand all the techniques this chapter covers, it
can be hard to apply them to a specific problem. Reading and writing
code will help develop a feeling for this, so study the solution, and
try the next exercise.</p></div><div class="solution"><pre class="code"><span class="keyword">var</span> <span class="variable">result</span> = <span class="atom">1</span>;
<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>;
<span class="keyword">while</span> (<span class="variable">counter</span> < <span class="atom">10</span>) {
<span class="variable">result</span> = <span class="variable">result</span> * <span class="atom">2</span>;
<span class="variable">counter</span> = <span class="variable">counter</span> + <span class="atom">1</span>;
}
<span class="variable">show</span>(<span class="variable">result</span>);</pre><p><a class="paragraph" href="#p22444a64" name="p22444a64"> ¶ </a>The counter could also start at <code>1</code> and check for <code><= 10</code>, but, for
reasons that will become apparent later on, it is a good idea to get
used to counting from 0.</p><p><a class="paragraph" href="#p5acf5074" name="p5acf5074"> ¶ </a>Obviously, your own solutions aren't required to be precisely the same
as mine. They should work. And if they are very different, make sure
you also understand my solution.</p></div></div><hr/><div class="block"><a name="exercise3"></a><div class="exercisenum">Ex. 2.3</div><div class="exercise"><p><a class="paragraph" href="#p500f68ef" name="p500f68ef"> ¶ </a>With some slight modifications, the solution to the previous exercise
can be made to draw a triangle. And when I say 'draw a triangle' I
mean 'print out some text that almost looks like a triangle when you
squint'.</p><p><a class="paragraph" href="#p3e5097db" name="p3e5097db"> ¶ </a>Print out ten lines. On the first line there is one '#' character. On
the second there are two. And so on.</p><p><a class="paragraph" href="#p144feabf" name="p144feabf"> ¶ </a>How does one get a string with X '#' characters in it? One way is to
build it every time it is needed with an 'inner loop' ― a loop inside
a loop. A simpler way is to reuse the string that the previous
iteration of the loop used, and add one character to it.</p></div><div class="solution"><pre class="code"><span class="keyword">var</span> <span class="variable">line</span> = <span class="string">""</span>;
<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>;
<span class="keyword">while</span> (<span class="variable">counter</span> < <span class="atom">10</span>) {
<span class="variable">line</span> = <span class="variable">line</span> + <span class="string">"#"</span>;
<span class="variable">print</span>(<span class="variable">line</span>);
<span class="variable">counter</span> = <span class="variable">counter</span> + <span class="atom">1</span>;
}</pre></div></div><hr/><div class="block"><p><a class="paragraph" href="#p16ea3e42" name="p16ea3e42"> ¶ </a>You will have noticed the spaces I put in front of some statements.
These are not required: The computer will accept the program just fine
without them. In fact, even the line breaks in programs are optional.
You could write them as a single long line if you felt like it. The
role of the <a name="key62"></a>indentation inside blocks is to make the structure of
the code clearer to a reader. Because new blocks can be opened inside
other blocks, it can become hard to see where one block ends and
another begins in a complex piece of code. When lines are indented,
the visual shape of a program corresponds to the shape of the blocks
inside it. I like to use two spaces for every open block, but tastes
differ.</p><p><a class="paragraph" href="#p2284e303" name="p2284e303"> ¶ </a>The field in the console where you can
type programs will help you by automatically adding these spaces. This
may seem annoying at first, but when you write a lot of code it
becomes a huge time-saver. Pressing the tab key will re-indent the
line your cursor is currently on.</p><p><a class="paragraph" href="#p751953db" name="p751953db"> ¶ </a>In some cases, JavaScript allows you to omit the semicolon at the end
of a statement. In other cases, it has to be there or strange things
will happen. The rules for when it can be safely omitted are complex
and weird. In this book, I won't leave out any semicolons, and I
strongly urge you to do the same in your own programs.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p5326c0b7" name="p5326c0b7"> ¶ </a>The uses of <code>while</code> we have seen so far all show the same pattern.
First, a 'counter' variable is created. This variable tracks the
progress of the loop. The <code>while</code> itself contains a check, usually to
see whether the counter has reached some boundary yet. Then, at the
end of the loop body, the counter is updated.</p><p><a class="paragraph" href="#p21769c1a" name="p21769c1a"> ¶ </a>A lot of loops fall into this pattern. For this reason, JavaScript,
and similar languages, also provide a slightly shorter and more
comprehensive form:</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">number</span> = <span class="atom">0</span>; <span class="variable">number</span> <= <span class="atom">12</span>; <span class="variable">number</span> = <span class="variable">number</span> + <span class="atom">2</span>)
<span class="variable">show</span>(<span class="variable">number</span>);</pre><p><a class="paragraph" href="#p537c4259" name="p537c4259"> ¶ </a>This program is exactly equivalent to the earlier even-number-printing
example. The only change is that all the statements that are related
to the 'state' of the loop are now on one line. The parentheses after
the <a name="key63"></a><code>for</code> should contain two semicolons. The part before the first
semicolon <em>initialises</em> the loop, usually by defining a variable. The
second part is the expression that <em>checks</em> whether the loop must
still continue. The final part <em>updates</em> the state of the loop. In
most cases this is shorter and clearer than a <code>while</code> construction.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p38d54058" name="p38d54058"> ¶ </a>I have been using some rather odd <a name="key64"></a>capitalisation in some variable
names. Because you can not have spaces in these names ― the computer
would read them as two separate variables ― your choices for a name
that is made of several words are more or less limited to the
following: <code>fuzzylittleturtle</code>, <code>fuzzy_little_turtle</code>,
<code>FuzzyLittleTurtle</code>, or <code>fuzzyLittleTurtle</code>. The first one is hard to
read. Personally, I like the one with the underscores, though it is a
little painful to type. However, the standard JavaScript functions,
and most JavaScript programmers, follow the last one. It is not hard
to get used to little things like that, so I will just follow the
crowd and capitalise the first letter of every word after the first.</p><p><a class="paragraph" href="#p4dde6b1f" name="p4dde6b1f"> ¶ </a>In a few cases, such as the <code>Number</code> function, the first letter of a
variable is also capitalised. This was done to mark this function as a
constructor. What a constructor is will become clear in <a href="chapter8.html">chapter 8</a>. For
now, the important thing is not to be bothered by this apparent lack
of consistency.</p><p><a class="paragraph" href="#p645338be" name="p645338be"> ¶ </a>Note that names that have a special meaning, such as <code>var</code>, <code>while</code>,
and <code>for</code> may not be used as variable names. These are called
<a name="key65"></a>keywords. There are also a number of <a name="key66"></a>words which
are 'reserved for use' in future versions of JavaScript. These are
also officially not allowed to be used as variable names, though some
browsers do allow them. The full list is rather long:</p><pre class="preformatted">abstract boolean break byte case catch char class const continue
debugger default delete do double else enum export extends false
final finally float for function goto if implements import in
instanceof int interface long native new null package private
protected public return short static super switch synchronized
this throw throws transient true try typeof var void volatile
while with</pre><p><a class="paragraph" href="#pd1db8a7" name="pd1db8a7"> ¶ </a>Don't worry about memorising these for now, but remember that this
might be the problem when something does not work as expected. In my
experience, <code>char</code> (to store a one-character string) and <a name="key67"></a><code>class</code> are
the most common names to accidentally use.</p></div><hr/><div class="block"><a name="exercise4"></a><div class="exercisenum">Ex. 2.4</div><div class="exercise"><p><a class="paragraph" href="#p18ce9ce0" name="p18ce9ce0"> ¶ </a>Rewrite the solutions of the previous two exercises to use <code>for</code>
instead of <code>while</code>.</p></div><div class="solution"><pre class="code"><span class="keyword">var</span> <span class="variable">result</span> = <span class="atom">1</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">10</span>; <span class="variable">counter</span> = <span class="variable">counter</span> + <span class="atom">1</span>)
<span class="variable">result</span> = <span class="variable">result</span> * <span class="atom">2</span>;
<span class="variable">show</span>(<span class="variable">result</span>);</pre><p><a class="paragraph" href="#p6b6ab35a" name="p6b6ab35a"> ¶ </a>Note that even if no block is opened with a '<code>{</code>', the statement in
the loop is still indented two spaces to make it clear that it
'belongs' to the line above it.</p><pre class="code"><span class="keyword">var</span> <span class="variable">line</span> = <span class="string">""</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">10</span>; <span class="variable">counter</span> = <span class="variable">counter</span> + <span class="atom">1</span>) {
<span class="variable">line</span> = <span class="variable">line</span> + <span class="string">"#"</span>;
<span class="variable">print</span>(<span class="variable">line</span>);
}</pre></div></div><hr/><div class="block"><p><a class="paragraph" href="#p3e429b7d" name="p3e429b7d"> ¶ </a><a name="key68"></a><a name="key69"></a><a name="key70"></a><a name="key71"></a>A program often needs to 'update' a
variable with a value that is based on its previous value. For example
<code>counter = counter + 1</code>. JavaScript provides a shortcut for this:
<code>counter += 1</code>. This also works for many other operators, for example
<code>result *= 2</code> to double the value of <code>result</code>, or <code>counter -= 1</code> to
count downwards.</p><p><a class="paragraph" href="#p4acc14ef" name="p4acc14ef"> ¶ </a><a name="key72"></a><a name="key73"></a>For <code>counter += 1</code> and <code>counter -= 1</code> there are even
shorter versions: <code>counter++</code> and <code>counter--</code>.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p5f3c7e54" name="p5f3c7e54"> ¶ </a>Loops are said to affect the <a name="key74"></a>control flow of a program. They change
the order in which statements are executed. In many cases, another
kind of flow is useful: skipping statements.</p><p><a class="paragraph" href="#p393a1809" name="p393a1809"> ¶ </a>We want to show all numbers below 20 which are divisible both by 3 and
by 4.</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">20</span>; <span class="variable">counter</span>++) {
<span class="keyword">if</span> (<span class="variable">counter</span> % <span class="atom">3</span> == <span class="atom">0</span> && <span class="variable">counter</span> % <span class="atom">4</span> == <span class="atom">0</span>)
<span class="variable">show</span>(<span class="variable">counter</span>);
}</pre><p><a class="paragraph" href="#p40d2b6b6" name="p40d2b6b6"> ¶ </a>The keyword <a name="key75"></a><code>if</code> is not too different from the keyword <code>while</code>: It
checks the condition it is given (between parentheses), and executes
the statement after it based on this condition. But it does this only
once, so that the statement is executed zero or one time.</p><p><a class="paragraph" href="#p5918d8f7" name="p5918d8f7"> ¶ </a>The trick with the remainder (<a name="key76"></a><code>%</code>) operator is an easy way to test
whether a number is divisible by another number. If it is, the
remainder of their division, which is what remainder gives you, is zero.</p><p><a class="paragraph" href="#p6620cc88" name="p6620cc88"> ¶ </a>If we wanted to print all numbers below 20, but put
parentheses around the ones that are not divisible by 4, we can do it
like this:</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">20</span>; <span class="variable">counter</span>++) {
<span class="keyword">if</span> (<span class="variable">counter</span> % <span class="atom">4</span> == <span class="atom">0</span>)
<span class="variable">print</span>(<span class="variable">counter</span>);
<span class="keyword">if</span> (<span class="variable">counter</span> % <span class="atom">4</span> != <span class="atom">0</span>)
<span class="variable">print</span>(<span class="string">"("</span> + <span class="variable">counter</span> + <span class="string">")"</span>);
}</pre><p><a class="paragraph" href="#p51550ed2" name="p51550ed2"> ¶ </a>But now the program has to determine whether <code>counter</code> is divisible by
<code>4</code> two times. The same effect can be gotten by appending an <code>else</code>
part after an <code>if</code> statement. The <a name="key77"></a><code>else</code> statement is executed only
when the <code>if</code>'s condition is false.</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">20</span>; <span class="variable">counter</span>++) {
<span class="keyword">if</span> (<span class="variable">counter</span> % <span class="atom">4</span> == <span class="atom">0</span>)
<span class="variable">print</span>(<span class="variable">counter</span>);
<span class="keyword">else</span>
<span class="variable">print</span>(<span class="string">"("</span> + <span class="variable">counter</span> + <span class="string">")"</span>);
}</pre><p><a class="paragraph" href="#pb1e4e71" name="pb1e4e71"> ¶ </a>To stretch this trivial example a bit further, we now want to print
these same numbers, but add two stars after them when they are greater
than 15, one star when they are greater than 10 (but not greater than
15), and no stars otherwise.</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>; <span class="variable">counter</span> < <span class="atom">20</span>; <span class="variable">counter</span>++) {
<span class="keyword">if</span> (<span class="variable">counter</span> > <span class="atom">15</span>)
<span class="variable">print</span>(<span class="variable">counter</span> + <span class="string">"**"</span>);
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable">counter</span> > <span class="atom">10</span>)
<span class="variable">print</span>(<span class="variable">counter</span> + <span class="string">"*"</span>);
<span class="keyword">else</span>
<span class="variable">print</span>(<span class="variable">counter</span>);
}</pre><p><a class="paragraph" href="#p6536644" name="p6536644"> ¶ </a>This demonstrates that you can chain <code>if</code> statements together. In this
case, the program first looks if <code>counter</code> is greater than <code>15</code>. If it
is, the two stars are printed and the other tests are skipped. If it
is not, we continue to check if <code>counter</code> is greater than <code>10</code>. Only
if <code>counter</code> is also not greater than <code>10</code> does it arrive at the last
<code>print</code> statement.</p></div><hr/><div class="block"><a name="exercise5"></a><div class="exercisenum">Ex. 2.5</div><div class="exercise"><p><a class="paragraph" href="#p60bba450" name="p60bba450"> ¶ </a>Write a program to ask yourself, using <code>prompt</code>, what the value of 2 +
2 is. If the answer is "4", use <code>alert</code> to say something praising. If
it is "3" or "5", say "Almost!". In other cases, say something mean.</p></div><div class="solution"><pre class="code"><span class="keyword">var</span> <span class="variable">answer</span> = <span class="variable">prompt</span>(<span class="string">"You! What is the value of 2 + 2?"</span>, <span class="string">""</span>);
<span class="keyword">if</span> (<span class="variable">answer</span> == <span class="string">"4"</span>)
<span class="variable">alert</span>(<span class="string">"You must be a genius or something."</span>);
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable">answer</span> == <span class="string">"3"</span> || <span class="variable">answer</span> == <span class="string">"5"</span>)
<span class="variable">alert</span>(<span class="string">"Almost!"</span>);
<span class="keyword">else</span>
<span class="variable">alert</span>(<span class="string">"You're an embarrassment."</span>);</pre></div></div><hr/><div class="block"><p><a class="paragraph" href="#p7504b199" name="p7504b199"> ¶ </a>When a loop does not always have to go all the way through to its end,
the <a name="key78"></a><code>break</code> keyword can be useful. It immediately jumps out of the
current loop, continuing after it. This program finds the first number
that is greater than 20 and divisible by 7:</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">current</span> = <span class="atom">20</span>; ; <span class="variable">current</span>++) {
<span class="keyword">if</span> (<span class="variable">current</span> % <span class="atom">7</span> == <span class="atom">0</span>)
<span class="keyword">break</span>;
}
<span class="variable">print</span>(<span class="variable">current</span>);</pre><p><a class="paragraph" href="#p1ad637f9" name="p1ad637f9"> ¶ </a>The <code>for</code> construct shown above does not have a part that checks for
the end of the loop. This means that it is dependent on the <code>break</code>
statement inside it to ever stop. The same program could also have
been written as simply...</p><pre class="code"><span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">current</span> = <span class="atom">20</span>; <span class="variable">current</span> % <span class="atom">7</span> != <span class="atom">0</span>; <span class="variable">current</span>++)
;
<span class="variable">print</span>(<span class="variable">current</span>);</pre><p><a class="paragraph" href="#p1561aa83" name="p1561aa83"> ¶ </a>In this case, the body of the loop is empty. A lone semicolon can be
used to produce an empty statement. Here, the only effect of the loop
is to increment the variable <code>current</code> to its desired value. But I
needed an example that uses <code>break</code>, so pay attention to the first
version too.</p></div><hr/><div class="block"><a name="exercise6"></a><div class="exercisenum">Ex. 2.6</div><div class="exercise"><p><a class="paragraph" href="#p4dd1131b" name="p4dd1131b"> ¶ </a>Add a <code>while</code> and optionally a <code>break</code> to your solution for the
previous exercise, so that it keeps repeating the question until a
correct answer is given.</p><p><a class="paragraph" href="#pcc8fff8" name="pcc8fff8"> ¶ </a>Note that <code>while (true) ...</code> can be used to create a loop that does
not end on its own account. This is a bit silly, you ask the program
to loop as long as <code>true</code> is <code>true</code>, but it is a useful trick.</p></div><div class="solution"><pre class="code"><span class="keyword">var</span> <span class="variable">answer</span>;
<span class="keyword">while</span> (<span class="atom">true</span>) {
<span class="variable">answer</span> = <span class="variable">prompt</span>(<span class="string">"You! What is the value of 2 + 2?"</span>, <span class="string">""</span>);
<span class="keyword">if</span> (<span class="variable">answer</span> == <span class="string">"4"</span>) {
<span class="variable">alert</span>(<span class="string">"You must be a genius or something."</span>);
<span class="keyword">break</span>;
}
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable">answer</span> == <span class="string">"3"</span> || <span class="variable">answer</span> == <span class="string">"5"</span>) {
<span class="variable">alert</span>(<span class="string">"Almost!"</span>);
}
<span class="keyword">else</span> {
<span class="variable">alert</span>(<span class="string">"You're an embarrassment."</span>);
}
}</pre><p><a class="paragraph" href="#p77747b6" name="p77747b6"> ¶ </a>Because the first <code>if</code>'s body now has two statements, I added braces
around all the bodies. This is a matter of taste. Having an
<code>if</code>/<code>else</code> chain where some of the bodies are blocks and others are
single statements looks a bit lopsided to me, but you can make up your
own mind about that.</p><p><a class="paragraph" href="#p3f490564" name="p3f490564"> ¶ </a>Another solution, arguably nicer, but without <code>break</code>:</p><pre class="code"><span class="keyword">var</span> <span class="variable">value</span> = <span class="atom">null</span>;
<span class="keyword">while</span> (<span class="variable">value</span> != <span class="string">"4"</span>) {
<span class="variable">value</span> = <span class="variable">prompt</span>(<span class="string">"You! What is the value of 2 + 2?"</span>, <span class="string">""</span>);
<span class="keyword">if</span> (<span class="variable">value</span> == <span class="string">"4"</span>)
<span class="variable">alert</span>(<span class="string">"You must be a genius or something."</span>);
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable">value</span> == <span class="string">"3"</span> || <span class="variable">value</span> == <span class="string">"5"</span>)
<span class="variable">alert</span>(<span class="string">"Almost!"</span>);
<span class="keyword">else</span>
<span class="variable">alert</span>(<span class="string">"You're an embarrassment."</span>);
}</pre></div></div><hr/><div class="block"><p><a class="paragraph" href="#p2e69b3e7" name="p2e69b3e7"> ¶ </a>In the solution to the previous exercise there is a statement <code>var
answer;</code>. This creates a variable named <code>answer</code>, but does not give it
a value. What happens when you take the value of this variable?</p><pre class="code"><span class="keyword">var</span> <span class="variable">mysteryVariable</span>;
<span class="variable">show</span>(<span class="variable">mysteryVariable</span>);</pre><p><a class="paragraph" href="#p5bb576ee" name="p5bb576ee"> ¶ </a>In terms of tentacles, this variable ends in thin air, it has nothing
to grasp. When you ask for the value of an empty place, you get a
special value named <a name="key79"></a><code>undefined</code>. Functions which do not return an
interesting value, such as <code>print</code> and <code>alert</code>, also return an
<code>undefined</code> value.</p><pre class="code"><span class="variable">show</span>(<span class="variable">alert</span>(<span class="string">"I am a side effect."</span>));</pre><p><a class="paragraph" href="#p9474c16" name="p9474c16"> ¶ </a>There is also a similar value, <a name="key80"></a><code>null</code>, whose meaning is 'this
variable is defined, but it does not have a value'. The difference in
meaning between <code>undefined</code> and <code>null</code> is mostly academic, and usually
not very interesting. In practical programs, it is often necessary to
check whether something 'has a value'. In these cases, the expression
<code>something == undefined</code> may be used, because, even though they are
not exactly the same value, <code>null == undefined</code> will produce <code>true</code>.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p42c1b5bc" name="p42c1b5bc"> ¶ </a>Which brings us to another tricky subject...</p><pre class="code"><span class="variable">show</span>(<span class="atom">false</span> == <span class="atom">0</span>);
<span class="variable">show</span>(<span class="string">""</span> == <span class="atom">0</span>);
<span class="variable">show</span>(<span class="string">"5"</span> == <span class="atom">5</span>);</pre><p><a class="paragraph" href="#p128d250" name="p128d250"> ¶ </a><a name="key81"></a>All these give the value <code>true</code>. When comparing
values that have different types, JavaScript uses a complicated and
confusing set of rules. I am not going to try to explain them
precisely, but in most cases it just tries to convert one of the
values to the type of the other value. However, when <code>null</code> or
<code>undefined</code> occur, it only produces <code>true</code> if both sides are <code>null</code> or
<code>undefined</code>.</p><p><a class="paragraph" href="#p125eebb1" name="p125eebb1"> ¶ </a>What if you want to test whether a variable refers to the value
<code>false</code>? The rules for converting strings and numbers to boolean
values state that <code>0</code> and the empty string count as <code>false</code>, while all
the other values count as <code>true</code>. Because of this, the expression
<code>variable == false</code> is also <code>true</code> when <code>variable</code> refers to <code>0</code> or
<code>""</code>. For cases like this, where you do <em>not</em> want any automatic type
conversions to happen, there are two extra operators: <a name="key82"></a><code>===</code> and
<a name="key83"></a><code>!==</code>. The first tests whether a value is precisely equal to the
other, and the second tests whether it is not precisely equal.</p><pre class="code"><span class="variable">show</span>(<span class="atom">null</span> === <span class="atom">undefined</span>);
<span class="variable">show</span>(<span class="atom">false</span> === <span class="atom">0</span>);
<span class="variable">show</span>(<span class="string">""</span> === <span class="atom">0</span>);
<span class="variable">show</span>(<span class="string">"5"</span> === <span class="atom">5</span>);</pre><p><a class="paragraph" href="#p2ef5a755" name="p2ef5a755"> ¶ </a>All these are <code>false</code>.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p256d266d" name="p256d266d"> ¶ </a>Values given as the condition in an <code>if</code>, <code>while</code>, or <code>for</code> statement
do not have to be booleans. They will be automatically converted to
booleans before they are checked. This means that the number <code>0</code>, the
empty string <code>""</code>, <code>null</code>, <code>undefined</code>, and of course <code>false</code>, will
all count as false.</p><p><a class="paragraph" href="#p5d56aa6e" name="p5d56aa6e"> ¶ </a>The fact that all other values are converted to <code>true</code> in this case
makes it possible to leave out explicit comparisons in many
situations. If a variable is known to contain either a string or
<code>null</code>, one could check for this very simply...</p><pre class="code"><span class="keyword">var</span> <span class="variable">maybeNull</span> = <span class="atom">null</span>;
<span class="comment">// ... mystery code that might put a string into maybeNull ...</span>
<span class="keyword">if</span> (<span class="variable">maybeNull</span>)
<span class="variable">print</span>(<span class="string">"maybeNull has a value"</span>);</pre><p><a class="paragraph" href="#p7ab84313" name="p7ab84313"> ¶ </a>Except in the case where the mystery code gives <code>maybeNull</code> the value
<code>""</code>. An empty string is false, so nothing is printed. Depending on
what you are trying to do, this might be <em>wrong</em>. It is often a good
idea to add an explicit <code>=== null</code> or <code>=== false</code> in cases like this
to prevent subtle mistakes. The same occurs with number values that
might be <code>0</code>.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p7139d870" name="p7139d870"> ¶ </a>The line that talks about 'mystery code' in the previous example might
have looked a bit suspicious to you. It is often useful to include
extra text in a program. The most common use for this is adding some
explanations in human language to a program.</p><pre class="code"><span class="comment">// The variable counter, which is about to be defined, is going</span>
<span class="comment">// to start with a value of 0, which is zero.</span>
<span class="keyword">var</span> <span class="variable">counter</span> = <span class="atom">0</span>;
<span class="comment">// Now, we are going to loop, hold on to your hat.</span>
<span class="keyword">while</span> (<span class="variable">counter</span> < <span class="atom">100</span> <span class="comment">/* counter is less than one hundred */</span>)
<span class="comment">/* Every time we loop, we INCREMENT the value of counter,
Seriously, we just add one to it. */</span>
<span class="variable">counter</span>++;
<span class="comment">// And then, we are done.</span></pre><p><a class="paragraph" href="#p6b2c537a" name="p6b2c537a"> ¶ </a>This kind of text is called a <a name="key84"></a>comment. The rules are like this:
'<code>/*</code>' starts a comment that goes on until a '<code>*/</code>' is found. '<code>//</code>'
starts another kind of comment, which goes on until the end of the
line.</p><p><a class="paragraph" href="#p12f4068" name="p12f4068"> ¶ </a>As you can see, even the simplest programs can be made to look big,
ugly, and complicated by simply adding a lot of comments to them.</p></div><hr/><div class="block"><p><a class="paragraph" href="#peda8c15" name="peda8c15"> ¶ </a>There are some other situations that cause automatic <a name="key85"></a>type
conversions to happen. If you add a non-string value to a string, the
value is automatically converted to a string before it is
concatenated. If you multiply a number and a string, JavaScript tries
to make a number out of the string.</p><pre class="code"><span class="variable">show</span>(<span class="string">"Apollo"</span> + <span class="atom">5</span>);
<span class="variable">show</span>(<span class="atom">null</span> + <span class="string">"ify"</span>);
<span class="variable">show</span>(<span class="string">"5"</span> * <span class="atom">5</span>);
<span class="variable">show</span>(<span class="string">"strawberry"</span> * <span class="atom">5</span>);</pre><p><a class="paragraph" href="#p447d25bd" name="p447d25bd"> ¶ </a>The last statement prints <a name="key86"></a><code>NaN</code>, which is a special value. It stands
for 'not a number', and is of type number (which might sound a little
contradictory). In this case, it refers to the fact that a strawberry
is not a number. All arithmetic operations on the value <code>NaN</code> result
in <code>NaN</code>, which is why multiplying it by <code>5</code>, as in the example, still
gives a <code>NaN</code> value. Also, and this can be disorienting at times, <code>NaN
== NaN</code> equals <code>false</code>, checking whether a value is <code>NaN</code> can be done
with the <a name="key87"></a><code>isNaN</code> function. <code>NaN</code> is another (the last) value that
counts as <code>false</code> when converted to a boolean.</p><p><a class="paragraph" href="#p6ecef1b3" name="p6ecef1b3"> ¶ </a>These automatic conversions can be very convenient, but they are also
rather weird and error prone. Even though <code>+</code> and <code>*</code> are both
arithmetic operators, they behave completely different in the example.
In my own code, I use <code>+</code> to combine strings and non-strings a lot,
but make it a point not to use <code>*</code> and the other numeric operators on
string values. Converting a number to a string is always possible and
straightforward, but converting a string to a number may not even work
(as in the last line of the example). We can use <code>Number</code> to
explicitly convert the string to a number, making it clear that we
might run the risk of getting a <code>NaN</code> value.</p><pre class="code"><span class="variable">show</span>(<span class="variable">Number</span>(<span class="string">"5"</span>) * <span class="atom">5</span>);</pre></div><hr/><div class="block"><p><a class="paragraph" href="#p2a2437b2" name="p2a2437b2"> ¶ </a>When we discussed the boolean operators <code>&&</code> and <code>||</code> earlier, I
claimed they produced boolean values. This turns out to be a bit of an
oversimplification. If you apply them to boolean values, they will
indeed return booleans. But they can also be applied to other kinds of
values, in which case they will return one of their arguments.</p><p><a class="paragraph" href="#p43c2cac3" name="p43c2cac3"> ¶ </a>What <a name="key88"></a><code>||</code> really does is this: It looks at the value to the left of
it first. If converting this value to a boolean would produce <code>true</code>,
it returns this left value, otherwise it returns the one on its
right. Check for yourself that this does the correct thing when the
arguments are booleans. Why does it work like that? It turns out this
is very practical. Consider this example:</p><pre class="code"><span class="keyword">var</span> <span class="variable">input</span> = <span class="variable">prompt</span>(<span class="string">"What is your name?"</span>, <span class="string">"Kilgore Trout"</span>);
<span class="variable">print</span>(<span class="string">"Well hello "</span> + (<span class="variable">input</span> || <span class="string">"dear"</span>));</pre><p><a class="paragraph" href="#p148942a7" name="p148942a7"> ¶ </a>If the user presses 'Cancel' or closes the <code>prompt</code> dialog in some
other way without giving a name, the variable <code>input</code> will hold the
value <code>null</code> or <code>""</code>. Both of these would give <code>false</code> when converted
to a boolean. The expression <code>input || "dear"</code> can in this case be
read as 'the value of the variable <code>input</code>, or else the string
<code>"dear"</code>'. It is an easy way to provide a 'fallback' value.</p><p><a class="paragraph" href="#p710746e" name="p710746e"> ¶ </a>The <a name="key89"></a><code>&&</code> operator works similarly, but the other way around. When
the value to its left is something that would give <code>false</code> when
converted to a boolean, it returns that value, otherwise it returns
the value on its right.</p><p><a class="paragraph" href="#p74770a64" name="p74770a64"> ¶ </a>Another property of these two operators is that the expression to
their right is only evaluated when necessary. In the case of <code>true ||
X</code>, no matter what <code>X</code> is, the result will be <code>true</code>, so <code>X</code> is never
evaluated, and if it has side effects they never happen. The same goes
for <code>false && X</code>.</p><pre class="code"><span class="atom">false</span> || <span class="variable">alert</span>(<span class="string">"I'm happening!"</span>);
<span class="atom">true</span> || <span class="variable">alert</span>(<span class="string">"Not me."</span>);</pre></div><ol class="footnotes"><li><a name="footnote1"></a>Bits are any kinds of two-valued things, usually described as <code>0</code>s
and <code>1</code>s. Inside the computer, they take forms like a high or low
electrical charge, a strong or weak signal, a shiny or dull spot on
the surface of a CD.</li><li><a name="footnote2"></a>If you were expecting something like <code>10010000</code> here ― good call,
but read on. JavaScript's numbers are not stored as integers.</li><li><a name="footnote3"></a>Actually, 53, because of a trick that can be used to get one bit
for free. Look up the 'IEEE 754' format if you are curious about the
details.</li><li><a name="footnote4"></a>When you type string values at the console, you'll notice that they
will come back with the quotes and backslashes the way you typed them.
To get special characters to show properly, you can do <code>print("a\nb")</code>
― why this works, we will see in a moment.</li><li><a name="footnote5"></a>The bit bucket is supposedly the place where old bits are kept. On
some systems, the programmer has to manually empty it now and then.
Fortunately, JavaScript comes with a fully-automatic bit-recycling
system.</li></ol><h1><span class="number">Chapter 3: </span>Functions</h1><div class="block"><p><a class="paragraph" href="#p1d34e7ee" name="p1d34e7ee"> ¶ </a>A program often needs to do the same thing in different places.
Repeating all the necessary statements every time is tedious and
error-prone. It would be better to put them in one place, and have the
program take a detour through there whenever necessary. This is what
<a name="key1"></a>functions were invented for: They are canned code that a program can
go through whenever it wants. Putting a string on the screen requires
quite a few statements, but when we have a <code>print</code> function we can
just write <code>print("Aleph")</code> and be done with it.</p><p><a class="paragraph" href="#p6014048e" name="p6014048e"> ¶ </a>To view functions merely as canned chunks of code doesn't do them
justice though. When needed, they can play the role of pure functions,
algorithms, indirections, abstractions, decisions, modules,
continuations, data structures, and more. Being able to effectively
use functions is a necessary skill for any kind of serious
programming. This chapter provides an introduction into the subject,
<a href="chapter6.html">chapter 6</a> discusses the subtleties of functions in more depth.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p3bf7fd60" name="p3bf7fd60"> ¶ </a><a name="key2"></a>Pure functions, for a start, are the things that were
called functions in the mathematics classes that I hope you have been
subjected to at some point in your life. Taking the cosine or the
absolute value of a number is a pure function of one argument.
Addition is a pure function of two arguments.</p><p><a class="paragraph" href="#p2c4f7492" name="p2c4f7492"> ¶ </a>The defining properties of pure functions are that they always return
the same value when given the same arguments, and never have side
effects. They take some arguments, return a value based on these
arguments, and do not monkey around with anything else.</p><p><a class="paragraph" href="#p6a4d922b" name="p6a4d922b"> ¶ </a>In JavaScript, addition is an operator, but it could be wrapped in a
function like this (and as pointless as this looks, we will come
across situations where it is actually useful):</p><pre class="code"><span class="keyword">function</span> <span class="variable">add</span>(<span class="variabledef">a</span>, <span class="variabledef">b</span>) {
<span class="keyword">return</span> <span class="localvariable">a</span> + <span class="localvariable">b</span>;
}
<span class="variable">show</span>(<span class="variable">add</span>(<span class="atom">2</span>, <span class="atom">2</span>));</pre><p><a class="paragraph" href="#p221350eb" name="p221350eb"> ¶ </a><code>add</code> is the name of the function. <code>a</code> and <code>b</code> are the names of the
two arguments. <code>return a + b;</code> is the body of the function.</p><p><a class="paragraph" href="#p52d3794a" name="p52d3794a"> ¶ </a>The keyword <a name="key3"></a><code>function</code> is always used when creating a new function.
When it is followed by a variable name, the resulting function will be
stored under this name. After the name comes a list of <a name="key4"></a>argument
names, and then finally the <a name="key5"></a>body of the function. Unlike those
around the body of <code>while</code> loops or <code>if</code> statements, the braces around
a function body are obligatory<a class="footref" href="#footnote1">1</a>.</p><p><a class="paragraph" href="#p153a1c6c" name="p153a1c6c"> ¶ </a>The keyword <a name="key6"></a><code>return</code>, followed by an expression, is used to
determine the value the function returns. When control comes across a
<code>return</code> statement, it immediately jumps out of the current function
and gives the returned value to the code that called the function. A
<code>return</code> statement without an expression after it will cause the
function to return <code>undefined</code>.</p><p><a class="paragraph" href="#p7fe4a24a" name="p7fe4a24a"> ¶ </a>A body can, of course, have more than one statement in it. Here is a
function for computing powers (with positive, integer exponents):</p><pre class="code"><span class="keyword">function</span> <span class="variable">power</span>(<span class="variabledef">base</span>, <span class="variabledef">exponent</span>) {
<span class="keyword">var</span> <span class="variabledef">result</span> = <span class="atom">1</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="variabledef">count</span> = <span class="atom">0</span>; <span class="localvariable">count</span> < <span class="localvariable">exponent</span>; <span class="localvariable">count</span>++)
<span class="localvariable">result</span> *= <span class="localvariable">base</span>;
<span class="keyword">return</span> <span class="localvariable">result</span>;
}
<span class="variable">show</span>(<span class="variable">power</span>(<span class="atom">2</span>, <span class="atom">10</span>));</pre><p><a class="paragraph" href="#p3c8e65a" name="p3c8e65a"> ¶ </a>If you solved <a href="chapter2.html#exercise2">exercise 2.2</a>, this technique for computing a power should
look familiar.</p><p><a class="paragraph" href="#p7c54a160" name="p7c54a160"> ¶ </a>Creating a variable (<code>result</code>) and updating it are side effects.
Didn't I just say pure functions had no side effects?</p><p><a class="paragraph" href="#p350014ae" name="p350014ae"> ¶ </a>A variable created inside a function exists only inside the function.
This is fortunate, or a programmer would have to come up with a
different name for every variable he needs throughout a program.
Because <code>result</code> only exists inside <code>power</code>, the changes to it only
last until the function returns, and from the perspective of code that
calls it there are no side effects.</p></div><hr/><div class="block"><a name="exercise1"></a><div class="exercisenum">Ex. 3.1</div><div class="exercise"><p><a class="paragraph" href="#p5bb2eed2" name="p5bb2eed2"> ¶ </a>Write a function called <code>absolute</code>, which returns the absolute value
of the number it is given as its argument. The absolute value of a
negative number is the positive version of that same number, and the
absolute value of a positive number (or zero) is that number itself.</p></div><div class="solution"><pre class="code"><span class="keyword">function</span> <span class="variable">absolute</span>(<span class="variabledef">number</span>) {
<span class="keyword">if</span> (<span class="localvariable">number</span> < <span class="atom">0</span>)
<span class="keyword">return</span> -<span class="localvariable">number</span>;
<span class="keyword">else</span>
<span class="keyword">return</span> <span class="localvariable">number</span>;
}
<span class="variable">show</span>(<span class="variable">absolute</span>(-<span class="atom">144</span>));</pre></div></div><hr/><div class="block"><p><a class="paragraph" href="#p4a641284" name="p4a641284"> ¶ </a>Pure functions have two very nice properties. They are easy to think
about, and they are easy to re-use.</p><p><a class="paragraph" href="#p34d718df" name="p34d718df"> ¶ </a>If a function is pure, a call to it can be seen as a thing in itself.
When you are not sure that it is working correctly, you can test it by
calling it directly from the console, which is simple because it does
not depend on any context<a class="footref" href="#footnote2">2</a>. It is easy to make these tests automatic
― to write a program that tests a specific function. Non-pure
functions might return different values based on all kinds of factors,
and have side effects that might be hard to test and think about.</p><p><a class="paragraph" href="#p7200ecac" name="p7200ecac"> ¶ </a>Because pure functions are self-sufficient, they are likely to be
useful and relevant in a wider range of situations than non-pure ones.
Take <code>show</code>, for example. This function's usefulness depends on the
presence of a special place on the screen for printing output. If that
place is not there, the function is useless. We can imagine a related
function, let's call it <code>format</code>, that takes a value as an argument
and returns a string that represents this value. This function is
useful in more situations than <code>show</code>.</p><p><a class="paragraph" href="#p4aed67fd" name="p4aed67fd"> ¶ </a>Of course, <code>format</code> does not solve the same problem as <code>show</code>, and no
pure function is going to be able to solve that problem, because it
requires a side effect. In many cases, non-pure functions are
precisely what you need. In other cases, a problem can be solved with
a pure function but the non-pure variant is much more convenient or
efficient.</p><p><a class="paragraph" href="#p6605ddf" name="p6605ddf"> ¶ </a>Thus, when something can easily be expressed as a pure function, write
it that way. But never feel dirty for writing non-pure functions.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p5d70151c" name="p5d70151c"> ¶ </a>Functions with side effects do not have to contain a <code>return</code>
statement. If no <code>return</code> statement is encountered, the function
returns <code>undefined</code>.</p><pre class="code"><span class="keyword">function</span> <span class="variable">yell</span>(<span class="variabledef">message</span>) {
<span class="variable">alert</span>(<span class="localvariable">message</span> + <span class="string">"!!"</span>);
}
<span class="variable">yell</span>(<span class="string">"Yow"</span>);</pre></div><hr/><div class="block"><p><a class="paragraph" href="#p14dd0d54" name="p14dd0d54"> ¶ </a>The names of the arguments of a function are available as variables
inside it. They will refer to the values of the arguments the function
is being called with, and like normal variables created inside a
function, they do not exist outside it. Aside from the <a name="key7"></a>top-level
environment, there are smaller, <a name="key8"></a>local environments created by
function calls. When looking up a variable inside a function, the
local environment is checked first, and only if the variable does not
exist there is it looked up in the top-level environment. This makes
it possible for variables inside a function to '<a name="key9"></a>shadow' top-level
variables that have the same name.</p><pre class="code"><span class="keyword">function</span> <span class="variable">alertIsPrint</span>(<span class="variabledef">value</span>) {
<span class="keyword">var</span> <span class="variabledef">alert</span> = <span class="variable">print</span>;
<span class="localvariable">alert</span>(<span class="localvariable">value</span>);
}
<span class="variable">alertIsPrint</span>(<span class="string">"Troglodites"</span>);</pre><p><a class="paragraph" href="#p9d662d5" name="p9d662d5"> ¶ </a>The variables in this local environment are only visible to the code
inside the function. If this function calls another function, the
newly called function does not see the variables inside the first
function:</p><pre class="code"><span class="keyword">var</span> <span class="variable">variable</span> = <span class="string">"top-level"</span>;
<span class="keyword">function</span> <span class="variable">printVariable</span>() {
<span class="variable">print</span>(<span class="string">"inside printVariable, the variable holds '"</span> +
<span class="variable">variable</span> + <span class="string">"'."</span>);
}
<span class="keyword">function</span> <span class="variable">test</span>() {
<span class="keyword">var</span> <span class="variabledef">variable</span> = <span class="string">"local"</span>;
<span class="variable">print</span>(<span class="string">"inside test, the variable holds '"</span> + <span class="localvariable">variable</span> + <span class="string">"'."</span>);
<span class="variable">printVariable</span>();
}
<span class="variable">test</span>();</pre><p><a class="paragraph" href="#p71c5c4c9" name="p71c5c4c9"> ¶ </a>However, and this is a subtle but extremely useful phenomenon, when a
function is defined <em>inside</em> another function, its local environment
will be based on the local environment that surrounds it instead of
the top-level environment.</p><pre class="code"><span class="keyword">var</span> <span class="variable">variable</span> = <span class="string">"top-level"</span>;
<span class="keyword">function</span> <span class="variable">parentFunction</span>() {
<span class="keyword">var</span> <span class="variabledef">variable</span> = <span class="string">"local"</span>;
<span class="keyword">function</span> <span class="variabledef">childFunction</span>() {
<span class="variable">print</span>(<span class="localvariable">variable</span>);
}
<span class="localvariable">childFunction</span>();
}
<span class="variable">parentFunction</span>();</pre><p><a class="paragraph" href="#p3204c0b3" name="p3204c0b3"> ¶ </a>What this comes down to is that which variables are visible inside a
function is determined by the place of that function in the program
text. All variables that were defined 'above' a function's definition
are visible, which means both those in function bodies that enclose
it, and those at the top-level of the program. This approach to
variable visibility is called <a name="key10"></a>lexical scoping.</p></div><hr/><div class="block"><p><a class="paragraph" href="#p3c7ae609" name="p3c7ae609"> ¶ </a>People who have experience with other programming languages might
expect that a <a name="key11"></a>block of code (between braces) also produces a new
local environment. Not in JavaScript. Functions are the only things
that create a new scope. You are allowed to use free-standing blocks
like this...</p><pre class="code"><span class="keyword">var</span> <span class="variable">something</span> = <span class="atom">1</span>;
{
<span class="keyword">var</span> <span class="variable">something</span> = <span class="atom">2</span>;
<span class="variable">print</span>(<span class="string">"Inside: "</span> + <span class="variable">something</span>);
}
<span class="variable">print</span>(<span class="string">"Outside: "</span> + <span class="variable">something</span>);</pre><p><a class="paragraph" href="#p6f53387f" name="p6f53387f"> ¶ </a>... but the <code>something</code> inside the block refers to the same variable
as the one outside the block. In fact, although blocks like this are
allowed, they are utterly pointless. Most people agree that this is a
bit of a design blunder by the designers of JavaScript, and ECMAScript
Harmony will add some way to define variables that stay inside blocks