forked from hectorip/Eloquent-JavaScript-es
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path04_data.txt
More file actions
1457 lines (1199 loc) · 53.4 KB
/
04_data.txt
File metadata and controls
1457 lines (1199 loc) · 53.4 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
:chap_num: 4
:prev_link: 03_functions
:next_link: 05_higher_order
:load_files: ["code/jacques_journal.js", "code/chapter/04_data.js"]
:zip: node/html
= Estructuras de Datos: Objetos y Arreglos =
[chapterquote="true"]
[quote, Charles Babbage, Passages from the Life of a Philosopher (1864)]
____
En dos ocasiones me preguntaron - “Disculpe, Sr. Babbage, si pongo
números incorrectos en la máquina, ¿van a salir las respuestas correctas?”
[...] No puedo terminar de comprender el tipo de confusión de ideas que
podrían provocar esta pregunta.
____
(((Babbage+++,+++ Charles)))(((object)))(((data structure)))Números, Booleanos
y cadenas son los ladrillos de los que están hechas las estructuras de ((datos)).
Pero no podrás construir mucha casa de un solo ladrillo. Los _objetos_ nos
permiten agrupar valores-incluyendo otros objetos-permitiéndonos construir
estructuras más complejas.
Los programas que hemos construido hasta ahora han sido seriamente limitados
debido al hecho de que estaban operando únicamente en tipos de datos simples. Este
capítulo agregará a tu caja de herramientas un entendimiento básico de las
estructuras de datos. Al finalizarlo, sabrás lo suficiente para empezar a escribir
algunos programas de utilidad.
El capítulo trabajará a lo largo de un ejemplo de programación más o menos
realista, introduciendo conceptos conforme apliquen al problema en cuestión.
El código de ejemplo muchas veces construirá sobre funciones y variables que
fueron presentadas previamente en el texto.
ifdef::book_target[]
(((sandbox)))El sandbox de programación en línea para el libro
(http://eloquentjavascript.net/code[_eloquentjavascript.net/code_])
proporciona una manera de correr el código en el contexto de un capítulo en
espacífico. Si decides trabajar en los ejemplos en otro entorno, asegúrate de
descargar primero el código completo de este capítulo desde la página del
sandbox.
endif::book_target[]
== La ardillalobo ==
(((weresquirrel example)))(((lycanthropy)))De vez en cuando, comúnmente
entre las ocho y las diez de la noche, ((Jacques)) se transforma en
un pequeño y peludo roedor con una frondosa cola.
Por un lado, Jacques esta bastante contento de no tener la clásica licantropía.
Convertirse en una ardilla suele causar menos problemas que convertirse en un
lobo. En vez de tener que preocuparse por comerse accidentalmente a un vecino
(_eso_ sería extraño), le preocupa el ser deborado por el gato del vecino.
Después de un par de ocasiones donde se despertó, desnudo y desorientado, en una
apenas delgada rama en la cima de un roble, se ha asegurado de cerrar puertas y
ventanas de su cuarto por las noches y ponear algunas nueces en el suelo para
mantenerse ocupado.
image::img/weresquirrel.png[alt="The weresquirrel"]
Eso resuelve los problemas del gato y el roble. Pero Jacques aún sufre de su
enfermedad. Los momentos irregular en que se presenta la transformación le hacen
sospechar que pudieran ser detonadas por algo. Por algún tiempo, creyó que
sucedía sólo en los dias que había tocado árboles. Así que dejó de tocar árboles
de manera definitiva e incluso evitó acercarse a ellos. Pero el problema
presistió.
(((journal)))Cambiando a una perspectiva un poco más científica, Jacques planea
empezar un registro diario de todo lo que hizo ese día y si tuvo o no una
transformación. Con estos datos espera limitar las condiciones que disparan las
transformaciones.
La primer cosa que hace es diseñar una estructura de datos para almacenar esta
información.
== Conjuntos de datos ==
(((data structure)))Para trabajar con un pedazo de datos digitales, primero
tendremos que encontrar una forma de representarlo en la ((memoria)) de nuestra
máquina.Digamos, como un pequeño ejemplo, que queremos representar una
((colección)) de números: 2, 3, 5, 7 y 11.
(((string)))Podríamos ponernos creativos usando cadenas-despues de todo, las
cadenas pueden ser de cualquier longitud, así que podríamos pone mucha
información en ellas-y usar `"2 3 5 7 11"` como nuestra representación. Pero
esto es extaño. De alguna forma tendrías que extaer los dígitos y convertirlos
de vuelta a números para accesarlos.
(((array,creation)))((([] (array))))Afortunadamente, Javascript proporciona un
tipo de dato específico para almacenar secuencias de valores. Se le llama
_arreglo_ y se escribe como una lista de valores entre ((corchetes)), separados
por comas.
[source,javascript]
----
var listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[1]);
// → 3
console.log(listOfNumbers[1 - 1]);
// → 2
----
((([] (subscript))))(((array,indexing)))La notación para obtener los elementos
dentro de un arreglo también utiliza ((corchetes)). Un par de corchetes
inmediátamente después de una expresión, con otra expresión dentro de los
corchetes. buscará el elemento en la expresión de la izquierda que corresponda
al _((índice))_ dado por la expresión en corchetes.
[[array_indexing]]
El primer índice de un arreglo es cero, no uno. Así que el primer elemento puede
leerse usando `listOfNumbers[0]`. Si no tienes antecedentes en programación,
acostumbrarte a esta convención puede tomarte algún tiempo. Pero el
((zero-based counting)) tiene una larga tradición en tecnología y mientras la
convención se siga de manera consistente (que se ha hecho, en Javascript),
funciona bien.
[[properties]]
== Propiedades ==
(((Math object)))(((Math.max function)))(((length property,for
string)))(((object,property)))(((period character)))Hemos visto algunas expresiones
sospechosas como `myString.length` (para obtener la longitud de una cadena) y
`Math.max` (la función máximo) en ejemplos pasados. Estas son expresiones que
accesan una _((propiedad))_ de algún valor. En el primer caso, accesamos la
propiedad `length` de el valor en `myString`. En el segundo, accesamos la
propiedad llamada `max` en el objeto `Math` (que es una colección de valores y
funciones relacionadas con las matemáticas).
(((property)))(((null)))(((undefined)))Casi todos los valores de Javascript tienen
propiedades. Las excepciones son `null` y `undefined`. Si intentas acceder una
propiedad de alguno de estos nonvalues, recibirás un error.
// test: no
[source,javascript]
----
null.length;
// → TypeError: Cannot read property 'length' of null
----
indexsee:[dot character,period character]
((([] (subscript))))(((period character)))(((square
brackets)))(((computed property)))Las dos maneras comúnes de accesar propiedades
en Javascript es con un punto y con corchetes. Ambas `value.x` y `value[x]`
accesan una ((propiedad)) en ++value++—pero no necesariamente la misma propiedad.
La diferencia radica en cómo se interpreta `x`. Cuando usamos un punto, la parte
después del punto debe ser un nombre de variable válido y nombra de maner a
directa a la propiedad. Cuando usamos corchetes, la expresión dentro de los
corchetes es _evaluada_ para obtener el nombre de la propiedad. Mientras que
`value.x` busca la propiedad de `value` llamada “x”, `value[x]` intenta evaluar
la expresión `x` y usa el resultado como el nombre de la propiedad.
Así que si sabes que la propiedad que te interesa se llama “length”, usas
`value.length`. Si deseas extraer la propiedad nombrada por el valor almacenado
en la variable`i`, usas `value[i]`. Y debido a que el nombre de las propiedades
puede ser cualquier cadena, si quieres accesar una propiedad llamada “2” o
“John Doe”, debes utilizar corchetes:`value[2]` or `value["John Doe"]`. Así lo
harías incluso si conoces el nombre preciso de la propiedad de antemano, ya que
ni “2” ni “John Doe” son nombres válidos de variables y por lo tanto no pueden
accesarse a traves de la notación con punto.
(((array)))(((length property,for array)))(((array,length
of)))Los elementos en un arreglo se almacenan en propiedades. Debido a que los
nombres de estas propiedades son números y usualmente necesitamos obtener su
nombre de una variable, tenemos que usar la sintaxis de corchetes para accesarlos.
La propiedad `length` de un arreglo nos dice cuantos elementos contiene. Este
nombre de propiedad es un nombre de variable válido, y conocemos su nombre por
anticipad, así que para encontrar la longitud de un arreglo, comúnmente
escribiremos `array.length` ya que es más fácil de escribir que `array["length"]`.
[[methods]]
== Métodos ==
(((function,as property)))(((method)))(((string)))Ambos objetos, las cadenas y
los arreglos contienen, adicionalmente a la propiedad `length`, un número de
propiedades que refieren a valores función.
[source,javascript]
----
var doh = "Doh";
console.log(typeof doh.toUpperCase);
// → function
console.log(doh.toUpperCase());
// → DOH
----
(((case conversion)))(((toUpperCase method)))(((toLowerCase
method)))Todas las cadenas tienen una propiedad `toUpperCase`. Cuando es llamada,
regresará una copia de la cadena en la que todas las letras han sido convertidas
a mayúsculas. También existe `toLowerCase`. Puedes adivinar que es lo que hace.
(((this)))Interestingly, even though the call to `toUpperCase` does
not pass any arguments, the function somehow has access to the string
`"Doh"`, the value whose property we called. How this works is
described in link:06_object.html#obj_methods[Chapter 6].
Properties that contain functions are generally called _methods_ of
the value they belong to. As in, “++toUpperCase++ is a method of a
string”.
[[array_methods]]
(((collection)))(((array)))(((string)))(((push
method)))(((pop method)))(((join method)))This example demonstrates
some methods that array objects have:
[source,javascript]
----
var mack = [];
mack.push("Mack");
mack.push("the", "Knife");
console.log(mack);
// → ["Mack", "the", "Knife"]
console.log(mack.join(" "));
// → Mack the Knife
console.log(mack.pop());
// → Knife
console.log(mack);
// → ["Mack", "the"]
----
The `push` method can be used to add values to the end of an array.
The `pop` method does the opposite: it removes the value at the end of
the array and returns it. An array of strings can be flattened to a
single string with the `join` method. The argument given to `join`
determines the text that is glued between the array's elements.
== Objects ==
(((journal)))(((weresquirrel example)))(((array)))(((record)))Back to the weresquirrel. A set of daily log
entries can be represented as an array. But the entries do not consist
of just a number or a string—each entry needs to store a list of
activities and a Boolean value that indicates whether Jacques turned
into a squirrel. Ideally, we would like to group these values together
into a single value and then put these grouped values into an array of
log entries.
(((syntax)))(((object)))(((property)))(((curly braces)))((({}
(object))))Values of the type _object_ are arbitrary collections of
properties, and we can add or remove these properties as we please.
One way to create an object is by using a curly brace notation.
[source,javascript]
----
var day1 = {
squirrel: false,
events: ["work", "touched tree", "pizza", "running",
"television"]
};
console.log(day1.squirrel);
// → false
console.log(day1.wolf);
// → undefined
day1.wolf = false;
console.log(day1.wolf);
// → false
----
(((quoting,of object properties)))(((colon character)))Inside the
curly braces, we can give a list of properties separated by commas.
Each property is written as a name, followed by a colon, followed by
an expression that provides a value for the property. Spaces and line
breaks are not significant. When an object spans multiple lines,
indenting it like in the previous example improves readability.
Properties whose names are not valid variable names or valid numbers
have to be quoted.
[source,javascript]
----
var descriptions = {
work: "Went to work",
"touched tree": "Touched a tree"
};
----
This means that ((curly braces)) have _two_ meanings in JavaScript. At
the start of a statement, they start a block of statements. In any
other position, they describe an object. Fortunately, it is almost
never useful to start a statement with a curly-brace object, and in
typical programs, there is no ambiguity between these two uses.
(((undefined)))Reading a property that doesn't exist will produce the
value `undefined`, which happens the first time we try to read the `wolf`
property in the previous example.
(((property,assignment)))(((mutability)))(((= operator)))It is
possible to assign a value to a property expression with the `=`
operator. This will replace the property's value if it already existed
or create a new property on the object if it didn't.
(((tentacle (analogy))))(((property,model of)))To briefly return to
our tentacle model of ((variable)) bindings—property bindings are
similar. They _grasp_ values, but other variables and properties might
be holding onto those same values. You may think of objects as
octopuses with any number of tentacles, each of which has a name
inscribed on it.
image::img/octopus-object.jpg[alt="Artist's representation of an object"]
(((delete operator)))(((property,deletion)))The `delete` operator cuts
off a tentacle from such an octopus. It is a unary operator that, when
applied to a property access expression, will remove the named
property from the object. This is not a common thing to do, but it is
possible.
[source,javascript]
----
var anObject = {left: 1, right: 2};
console.log(anObject.left);
// → 1
delete anObject.left;
console.log(anObject.left);
// → undefined
console.log("left" in anObject);
// → false
console.log("right" in anObject);
// → true
----
(((in operator)))(((property,testing for)))(((object)))The binary
`in` operator, when applied to a string and an object, returns a
Boolean value that indicates whether that object has that property.
The difference between setting a property to `undefined` and actually
deleting it is that, in the first case, the object still _has_ the
property (it just doesn't have a very interesting value), whereas in
the second case the property is no longer present and `in` will return
`false`.
(((array)))(((collection)))Arrays, then, are just a kind of
object specialized for storing sequences of things. If you evaluate
`typeof [1, 2]`, this produces `"object"`. You can see them as long,
flat octopuses with all their arms in a neat row, labeled with
numbers.
image::img/octopus-array.jpg[alt="Artist's representation of an array"]
(((journal)))(((weresquirrel example)))So we can represent Jacques’
journal as an array of objects.
[source,javascript]
----
var journal = [
{events: ["work", "touched tree", "pizza",
"running", "television"],
squirrel: false},
{events: ["work", "ice cream", "cauliflower",
"lasagna", "touched tree", "brushed teeth"],
squirrel: false},
{events: ["weekend", "cycling", "break",
"peanuts", "beer"],
squirrel: true},
/* and so on... */
];
----
== Mutability ==
We will get to actual programming _real_ soon now. But first, there's
one last piece of theory to understand.
(((mutability)))(((side effect)))(((number)))(((string)))(((Boolean)))(((object)))We've seen that object
values can be modified. The types of values discussed in earlier
chapters, such as numbers, strings, and Booleans, are all
__immutable__—it is impossible to change an existing value of those
types. You can combine them and derive new values from them, but when
you take a specific string value, that value will always remain the
same. The text inside it cannot be changed. If you have reference to a
string that contains `"cat"`, it is not possible for other code to
change a character in _that_ string to make it spell `"rat"`.
With objects, on the other hand, the content of a value _can_ be
modified by changing its properties.
(((object,identity)))(((identitiy)))(((memory)))When we have two
numbers, 120 and 120, we can consider them precisely the same number,
whether or not they refer to the same physical bits. But with objects,
there is a difference between having two references to the same object
and having two different objects that contain the same properties.
Consider the following code:
[source,javascript]
----
var object1 = {value: 10};
var object2 = object1;
var object3 = {value: 10};
console.log(object1 == object2);
// → true
console.log(object1 == object3);
// → false
object1.value = 15;
console.log(object2.value);
// → 15
console.log(object3.value);
// → 10
----
(((tentacle (analogy))))(((variable,model of)))The `object1` and
`object2` variables grasp the _same_ object, which is why changing
`object1` also changes the value of `object2`. The variable `object3`
points to a different object, which initially contains the same
properties as `object1` but lives a separate life.
(((== operator)))(((comparison,of objects)))(((deep
comparison)))JavaScript's `==` operator, when comparing objects, will
return `true` only if both objects are precisely the same value.
Comparing different objects will return `false`, even if they have
identical contents. There is no “deep” comparison operation built into
JavaScript, which looks at object's contents, but it is possible to
write it yourself (which will be one of the
link:04_data.html#exercise_deep_compare[exercises] at the end of this
chapter).
== The lycanthrope's log ==
(((weresquirrel example)))(((lycanthropy)))(((addEntry function)))So
Jacques starts up his JavaScript interpreter and sets up the
environment he needs to keep his ((journal)).
// include_code
[source,javascript]
----
var journal = [];
function addEntry(events, didITurnIntoASquirrel) {
journal.push({
events: events,
squirrel: didITurnIntoASquirrel
});
}
----
And then, every evening at ten—or sometimes the next morning, after
climbing down from the top shelf of his bookcase—he records the day.
[source,javascript]
----
addEntry(["work", "touched tree", "pizza", "running",
"television"], false);
addEntry(["work", "ice cream", "cauliflower", "lasagna",
"touched tree", "brushed teeth"], false);
addEntry(["weekend", "cycling", "break", "peanuts",
"beer"], true);
----
Once he has enough data points, he intends to compute the
((correlation)) between his squirrelification and each of the day's
events and ideally learn something useful from those correlations.
(((correlation)))_Correlation_ is a measure of ((dependence)) between
((variable))s (“variables” in the statistical sense, not the
JavaScript sense). It is usually expressed as a coefficient that
ranges from -1 to 1. Zero correlation means the variables are not
related, whereas a correlation of one indicates that the two are
perfectly related—if you know one, you also know the other. Negative
one also means that the variables are perfectly related but that they
are opposites—when one is true, the other is false.
(((phi coefficient)))For binary (Boolean) variables, the _phi_
coefficient (_ϕ_) provides a good measure of correlation and is
relatively easy to compute. To compute _ϕ_, we need a ((table)) _n_
that contains the number of times the various combinations of the two
variables were observed. For example, we could take the event of
eating ((pizza)) and put that in a table like this:
image::img/pizza-squirrel.svg[alt="Eating pizza versus turning into a squirrel",width="7cm"]
_ϕ_ can be computed using the following formula, where _n_ refers to the table:
ifdef::html_target[]
++++
<div>
<style scoped="scoped">sub { font-size: 60%; }</style>
<table style="border-collapse: collapse; margin-left: 1em;"><tr>
<td style="vertical-align: middle"><em>ϕ</em> =</td>
<td style="padding-left: .5em">
<div style="border-bottom: 1px solid black; padding: 0 7px;">n<sub>11</sub>n<sub>00</sub> - n<sub>10</sub>n<sub>01</sub></div>
<div style="padding: 0 7px;">√<span style="border-top: 1px solid black; position: relative; top: 2px;">
<span style="position: relative; top: -4px">n<sub>1•</sub>n<sub>0•</sub>n<sub>•1</sub>n<sub>•0</sub></span>
</span></div>
</td>
</tr></table>
</div>
++++
endif::html_target[]
ifdef::tex_target[]
pass:[\begin{equation}\varphi = \frac{n_{11}n_{00}-n_{10}n_{01}}{\sqrt{n_{1\bullet}n_{0\bullet}n_{\bullet1}n_{\bullet0}}}\end{equation}]
endif::tex_target[]
The notation (!html _n_~01~!)(!tex pass:[$n_{01}$]!) indicates the
number of measurements where the first variable (squirrelness) is false
(0) and the second variable (pizza) is true (1). In this
example, (!html _n_~01~!)(!tex pass:[$n_{01}$]!) is 9.
The value (!html _n_~1•~!)(!tex pass:[$n_{1\bullet}$]!) refers to the
sum of all measurements where the first variable is true, which is 5
in the example table. Likewise, (!html _n_~•0~!)(!tex pass:[$n_{\bullet0}$]!)
refers to the sum of the measurements where the second variable is false.
(((correlation)))(((phi coefficient)))So for the pizza table, the part
above the division line (the dividend) would be 1×76 - 4×9 = 40, and
the part below it (the divisor) would be the square root of
5×85×10×80, or (!html √340000!)(!tex pass:[$\sqrt{340000}$]!). This
comes out to _ϕ_ ≈ 0.069, which is tiny. Eating ((pizza)) does not
appear to have influence on the transformations.
== Computing correlation ==
(((array,as table)))(((nesting,of arrays)))We can represent a
two-by-two ((table)) in JavaScript with a four-element array (`[76, 9,
4, 1]`). We could also use other representations, such as an array
containing two two-element arrays (`[[76, 9], [4, 1]]`) or an object
with property names like `"11"` and `"01"`, but the flat array is
simple and makes the expressions that access the table pleasantly
short. We'll interpret the indices to the array as two-((bit))
((binary number)), where the leftmost (most significant) digit refers
to the squirrel variable and the rightmost (least significant) digit
refers to the event variable. For example, the binary number `10`
refers to the case where Jacques did turn into a squirrel, but the
event (say, "pizza") didn't occur. This happened four times. And since
binary `10` is 2 in decimal notation, we will store this number at
index 2 of the array.
(((phi coefficient)))(((phi function)))This is the function that
computes the _ϕ_ coefficient from such an array:
// test: clip
// include_code strip_log
[source,javascript]
----
function phi(table) {
return (table[3] * table[0] - table[2] * table[1]) /
Math.sqrt((table[2] + table[3]) *
(table[0] + table[1]) *
(table[1] + table[3]) *
(table[0] + table[2]));
}
console.log(phi([76, 9, 4, 1]));
// → 0.068599434
----
(((square root)))(((Math.sqrt function)))This is simply a direct
translation of the _ϕ_ formula into JavaScript. `Math.sqrt` is the
square root function, as provided by the `Math` object in a standard
JavaScript environment. We have to sum two fields from the table to
get fields like (!html n~1•~!)(!tex pass:[$n_{1\bullet}$]!) because
the sums of rows or columns are not stored directly in our data
structure.
(((JOURNAL data set)))Jacques kept his journal for three months. The
resulting ((data set)) is available in the coding sandbox for this
chapter(!book (http://eloquentjavascript.net/code#4[_eloquentjavascript.net/code#4_])!),
where it is stored in the `JOURNAL` variable, and in a downloadable
http://eloquentjavascript.net/code/jacques_journal.js[file].
(((tableFor function)))(((hasEvent function)))To extract a two-by-two
((table)) for a specific event from this journal, we must loop over
all the entries and tally up how many times the event occurs in
relation to squirrel transformations.
// include_code strip_log
[source,javascript]
----
function hasEvent(event, entry) {
return entry.events.indexOf(event) != -1;
}
function tableFor(event, journal) {
var table = [0, 0, 0, 0];
for (var i = 0; i < journal.length; i++) {
var entry = journal[i], index = 0;
if (hasEvent(event, entry)) index += 1;
if (entry.squirrel) index += 2;
table[index] += 1;
}
return table;
}
console.log(tableFor("pizza", JOURNAL));
// → [76, 9, 4, 1]
----
(((array,searching)))(((indexOf method)))The `hasEvent` function tests
whether an entry contains a given event. Arrays have an `indexOf`
method that tries to find a given value (in this case, the event name)
in the array and returns the index at which it was found or -1 if it
wasn't found. So if the call to `indexOf` doesn't return -1, then we
know the event was found in the entry.
(((array,indexing)))The body of the loop in `tableFor` figures
out which box in the table each journal entry falls into by checking
whether the entry contains the specific event it's interested in and
whether the event happens alongside a squirrel incident. The loop then
adds one to the number in the array that corresponds to this box on
the table.
We now have the tools we need to compute individual ((correlation))s.
The only step remaining is to find a correlation for every type of
event that was recorded and see whether anything stands out. But how
should we store these correlations once we compute them?
== Objects as maps ==
(((weresquirrel example)))(((array)))One possible way is to store
all the ((correlation))s in an array, using objects with `name` and
`value` properties. But that makes looking up the correlation for a
given event somewhat cumbersome: you'd have to loop over the whole
array to find the object with the right `name`. We could wrap this
lookup process in a function, but we would still be writing more code,
and the computer would be doing more work than necessary.
[[object_map]]
(((object)))(((square brackets)))(((object,as map)))(((in
operator)))A better way is to use object properties named after the
event types. We can use the square bracket access notation to create
and read the properties and can use the `in` operator to test whether
a given property exists.
[source,javascript]
----
var map = {};
function storePhi(event, phi) {
map[event] = phi;
}
storePhi("pizza", 0.069);
storePhi("touched tree", -0.081);
console.log("pizza" in map);
// → true
console.log(map["touched tree"]);
// → -0.081
----
(((data structure)))A _((map))_ is a way to go from values in one
domain (in this case, event names) to corresponding values in another
domain (in this case, _ϕ_ coefficients).
There are a few potential problems with using objects like this, which
we will discuss in link:06_object.html#prototypes[Chapter 6], but for
the time being, we won't worry about those.
(((for/in loop)))(((for loop)))(((object,looping over)))What if
we want to find all the events for which we have stored a coefficient?
The properties don't form a predictable series, like they would in an
array, so we cannot use a normal `for` loop. JavaScript provides a
loop construct specifically for going over the properties of an
object. It looks a little like a normal `for` loop but distinguishes
itself by the use of the word `in`.
[source,javascript]
----
for (var event in map)
console.log("The correlation for '" + event +
"' is " + map[event]);
// → The correlation for 'pizza' is 0.069
// → The correlation for 'touched tree' is -0.081
----
[[analysis]]
== The final analysis ==
(((journal)))(((weresquirrel example)))(((gatherCorrelations
function)))To find all the types of events that are present in the
data set, we simply process each entry in turn and then loop over the
events in that entry. We keep an object `phis` that has correlation
coefficients for all the event types we have seen so far. Whenever we
run across a type that isn't in the `phis` object yet, we compute its
correlation and add it to the object.
// test: clip
// include_code strip_log
[source,javascript]
----
function gatherCorrelations(journal) {
var phis = {};
for (var entry = 0; entry < journal.length; entry++) {
var events = journal[entry].events;
for (var i = 0; i < events.length; i++) {
var event = events[i];
if (!(event in phis))
phis[event] = phi(tableFor(event, journal));
}
}
return phis;
}
var correlations = gatherCorrelations(JOURNAL);
console.log(correlations.pizza);
// → 0.068599434
----
(((correlation)))Let's see what came out.
// test: no
[source,javascript]
----
for (var event in correlations)
console.log(event + ": " + correlations[event]);
// → carrot: 0.0140970969
// → exercise: 0.0685994341
// → weekend: 0.1371988681
// → bread: -0.0757554019
// → pudding: -0.0648203724
// and so on...
----
(((for/in loop)))Most correlations seem to lie close to zero. Eating
carrots, bread, or pudding apparently does not trigger
squirrel-lycanthropy. It _does_ seem to occur somewhat more often on
weekends, however. Let's filter the results to show only correlations
greater than 0.1 or less than -0.1.
// start_code
// test: no
[source,javascript]
----
for (var event in correlations) {
var correlation = correlations[event];
if (correlation > 0.1 || correlation < -0.1)
console.log(event + ": " + correlation);
}
// → weekend: 0.1371988681
// → brushed teeth: -0.3805211953
// → candy: 0.1296407447
// → work: -0.1371988681
// → spaghetti: 0.2425356250
// → reading: 0.1106828054
// → peanuts: 0.5902679812
----
A-ha! There are two factors whose ((correlation)) is clearly stronger
than the others. Eating ((peanuts)) has a strong positive effect on
the chance of turning into a squirrel, whereas brushing his teeth has
a significant negative effect.
Interesting. Let's try something.
// include_code strip_log
[source,javascript]
----
for (var i = 0; i < JOURNAL.length; i++) {
var entry = JOURNAL[i];
if (hasEvent("peanuts", entry) &&
!hasEvent("brushed teeth", entry))
entry.events.push("peanut teeth");
}
console.log(phi(tableFor("peanut teeth", JOURNAL)));
// → 1
----
Well, that's unmistakable! The phenomenon occurs precisely when
Jacques eats ((peanuts)) and fails to brush his teeth. If only he
weren't such a slob about dental hygiene, he'd have never even noticed
his affliction.
Knowing this, Jacques simply stops eating peanuts altogether and finds
that this completely puts an end to his transformations.
(((weresquirrel example)))All is well with Jacques for a while. But a
few years later, he loses his ((job)) and is eventually forced to take
employment with a ((circus)), where he performs as _The Incredible
Squirrelman_ by stuffing his mouth with peanut butter before every
show. One day, fed up with this pitiful existence, Jacques fails to
change back into his human form, hops through a crack in the circus
tent, and vanishes into the forest. He is never seen again.
== Further arrayology ==
(((array,methods)))(((method)))Before finishing up this chapter,
I want to introduce you to a few more object-related concepts. We'll
start by introducing some generally useful array methods.
(((push method)))(((pop method)))(((shift method)))(((unshift
method)))We saw `push` and `pop`, which add and remove elements at the
end of an array, link:04_data.html#array_methods[earlier] in this
chapter. The corresponding methods for adding and removing things at
the start of an array are called `unshift` and `shift`.
[source,javascript]
----
var todoList = [];
function rememberTo(task) {
todoList.push(task);
}
function whatIsNext() {
return todoList.shift();
}
function urgentlyRememberTo(task) {
todoList.unshift(task);
}
----
(((task management example)))The previous program manages lists of
tasks. You add tasks to the end of the list by calling
`rememberTo("eat")`, and when you're ready to do something, you call
`whatIsNext()` to get (and remove) the front item from the list. The
`urgentlyRememberTo` function also adds a task but adds it to the
front instead of the back of the list.
(((array,searching)))(((indexOf method)))(((lastIndexOf
method)))The `indexOf` method has a sibling called `lastIndexOf`,
which starts searching for the given element at the end of the array
instead of the front.
[source,javascript]
----
console.log([1, 2, 3, 2, 1].indexOf(2));
// → 1
console.log([1, 2, 3, 2, 1].lastIndexOf(2));
// → 3
----
Both `indexOf` and `lastIndexOf` take an optional second argument that
indicates where to start searching from.
(((slice method)))(((array,indexing)))Another fundamental method
is `slice`, which takes a start index and an end index and returns an
array that has only the elements between those indices. The start
index is inclusive, the end index exclusive.
[source,javascript]
----
console.log([0, 1, 2, 3, 4].slice(2, 4));
// → [2, 3]
console.log([0, 1, 2, 3, 4].slice(2));
// → [2, 3, 4]
----
(((string,indexing)))When the end index is not given, `slice`
will take all of the elements after the start index. Strings also have
a `slice` method, which has a similar effect.
(((concatenation)))(((concat method)))The `concat` method can be used
to glue arrays together, similar to what the `+` operator does for
strings. The following example shows both `concat` and `slice` in
action. It takes an array and an index, and it returns a new array
that is a copy of the original array with the element at the given
index removed.
[source,javascript]
----
function remove(array, index) {
return array.slice(0, index)
.concat(array.slice(index + 1));
}
console.log(remove(["a", "b", "c", "d", "e"], 2));
// → ["a", "b", "d", "e"]
----
== Strings and their properties ==
(((string,properties)))We can read properties like `length` and
`toUpperCase` from string values. But if you try to add a new
property, it doesn't stick.
[source,javascript]
----
var myString = "Fido";
myString.myProperty = "value";
console.log(myString.myProperty);
// → undefined
----
Values of type string, number, and Boolean are not objects, and though
the language doesn't complain if you try to set new properties on
them, it doesn't actually store those properties. The values are
immutable and cannot be changed.
(((string,methods)))(((slice method)))(((indexOf
method)))(((string,searching)))But these types do have some built-in
properties. Every string value has a number of methods. The most
useful ones are probably `slice` and `indexOf`, which resemble the
array methods of the same name.
[source,javascript]
----
console.log("coconuts".slice(4, 7));
// → nut
console.log("coconut".indexOf("u"));
// → 5
----
One difference is that a string's `indexOf` can take a string
containing more than one character, whereas the corresponding array
method looks only for a single element.
[source,javascript]
----
console.log("one two three".indexOf("ee"));
// → 11
----
(((whitespace)))(((trim method)))The `trim` method removes whitespace
(spaces, newlines, tabs, and similar characters) from the start and
end of a string.
[source,javascript]
----
console.log(" okay \n ".trim());
// → okay
----
(((length property,for string)))(((charAt
method)))(((string,indexing)))We have already seen the string type's
`length` property. Accessing the individual characters in a string can
be done with the `charAt` method but also by simply reading numeric
properties, like you'd do for an array.
[source,javascript]
----
var string = "abc";
console.log(string.length);
// → 3
console.log(string.charAt(0));
// → a
console.log(string[1]);
// → b
----
[[arguments_object]]
== The arguments object ==
(((arguments object)))(((length
property)))(((parameter)))(((optional argument)))(((array-like
object)))Whenever a function is called, a special variable named
`arguments` is added to the environment in which the function body
runs. This variable refers to an object that holds all of the
arguments passed to the function. Remember that in JavaScript you are
allowed to pass more (or fewer) arguments to a function than the
number of parameters the function itself declares.
[source,javascript]
----
function noArguments() {}
noArguments(1, 2, 3); // This is okay
function threeArguments(a, b, c) {}
threeArguments(); // And so is this
----
(((length property)))The `arguments` object has a `length` property
that tells us the number of arguments that were really passed to the
function. It also has a property for each argument, named 0, 1, 2, and
so on.
indexsee:[pseudo array,array-like object]
(((array,methods)))If that sounds a lot like an array to you,
you're right, it _is_ a lot like an array. But this object,
unfortunately, does not have any array methods (like `slice` or
`indexOf`), so it is a little harder to use than a real array.
[source,javascript]
----
function argumentCounter() {
console.log("You gave me", arguments.length, "arguments.");
}
argumentCounter("Straw man", "Tautology", "Ad hominem");
// → You gave me 3 arguments.
----
(((journal)))(((console.log)))(((variadic function)))Some functions
can take any number of arguments, like `console.log`. These typically
loop over the values in their `arguments` object. They can be used to
create very pleasant interfaces. For example, remember how we created
the entries to Jacques’ journal.
[source,javascript]
----
addEntry(["work", "touched tree", "pizza", "running",
"television"], false);
----
Since he is going to be calling this function a lot, we could create
an alternative that is easier to call.
[source,javascript]
----
function addEntry(squirrel) {
var entry = {events: [], squirrel: squirrel};
for (var i = 1; i < arguments.length; i++)
entry.events.push(arguments[i]);
journal.push(entry);
}
addEntry(true, "work", "touched tree", "pizza",
"running", "television");
----