forked from FrontendMasters/javascript-enlightenment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
open-in-web-browser.html
4989 lines (3954 loc) · 241 KB
/
open-in-web-browser.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/reset.css">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/prism.css">
<script src="assets/prism.js"></script>
<title>JavaScript (ES2015+) Enlightenment</title>
<meta name="description" content="Grokking Modern JavaScript, In The Wild">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11649917-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-11649917-2');
</script>
</head>
<body>
<div id="menu">
<div id="toc"></div>
</div>
<div id="panel">
<div id="menuButton">|||</div>
<div id="bookPadding">
<h1>JavaScript (ES2015+) Enlightenment</h1>
<h3 style="margin-top:0px">Grokking Modern JavaScript, In The Wild</h3>
<h5 style="margin-top:0px">
Written by
<a href="http://codylindley.com/">Cody Lindley</a>
</h5>
<section>
<p>
<a class="logo" href="https://frontendmasters.com/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1207.01" height="194.33" version="1.2" viewBox="0 0 905.26 145.75"><defs><symbol id="a" overflow="visible"><path d="M60.83-82.8H18.4V0h5.4v-40.94h27.84v-4.6H23.8V-78.2h37.03zm0 0"/></symbol><symbol id="b" overflow="visible"><path d="M24.84-24.72c0-23.12 13.8-32.78 20-32.78 7.36 0 7.72 8.17 7.83 13.8h5.4c0-8.28-2.63-18.4-12.76-18.4-10.4 0-16.7 9.43-20.8 17.82l-2-17.25h-5.2l2.2 19.44V0h5.4zm0 0"/></symbol><symbol id="c" overflow="visible"><path d="M34.5 1.27c10.23 0 23.34-7.02 23.34-31.74 0-24.84-13.22-31.62-23.34-31.62-11.05 0-23.23 8-23.23 31.7 0 24.9 13 31.8 23.23 31.8zm0-4.6c-14.83 0-17.83-15.2-17.83-27.14 0-11.84 3-27.03 17.83-27.03 14.95 0 17.94 15.2 17.94 27.03 0 11.84-3 27.14-17.94 27.14zm0 0"/></symbol><symbol id="d" overflow="visible"><path d="M19.3-25.06c0-23.7 11.87-32.44 20.6-32.44 9.43 0 9.43 9.66 9.43 16.67V0h5.4v-43.36c0-9.2-3.1-18.73-14.14-18.73-9.7 0-19.4 9-21.7 18.1h-.2l-2.2-17.5h-5c2 10.4 2.4 20.7 2.4 31.1V0h5.4zm0 0"/></symbol><symbol id="e" overflow="visible"><path d="M51.86-60.83h-22.3V-80.4h-5.4v19.57h-13.7v4.6h13.7v38.3c0 15.4 7 19.2 14.82 19.2 9.08 0 15.75-6.33 19.55-14.14l-5.17-1.27C50.72-8.4 46-3.34 39.22-3.34c-7.5 0-9.66-5.52-9.66-11.38v-41.5h22.3zm0 0"/></symbol><symbol id="f" overflow="visible"><path d="M54.97-9.3c-5.75 3.44-12.3 5.97-19.2 5.97-9.32 0-18.18-4.84-19.2-26.23H58.2c0-25.17-12.1-32.53-22.34-32.53-17.93 0-24.7 16.6-24.7 32 0 15.4 6.53 31.4 24.36 31.4 7.83 0 14.72-2.4 21.74-5.5zm-38.4-24.86c-.37-10.68 6.76-23.34 18.6-23.34 11.97 0 18.17 12.88 17.6 23.34zm0 0"/></symbol><symbol id="g" overflow="visible"><path d="M54.28-85.33h-5.4v28.4c-4.15-3.34-9.55-5.16-14.96-5.16-8.4 0-23.92 6.9-23.92 31.3C10-7.1 23.34 1.3 33.58 1.3c7.12 0 13-3.7 16.22-10l2.18 10 5.07-.7c-2.2-7.13-2.77-14.5-2.77-21.96zm-5.4 69.8c-2.54 6.56-7.47 12.2-15.2 12.2-6.88 0-18.27-6.1-18.27-27.14 0-22.3 13-27.03 19.9-27.03 5.1 0 9.8 2.64 13.6 5.98zm0 0"/></symbol></defs><g transform="translate(-528.72 -655.664)"><use width="100%" height="100%" x="510.31" y="783.61" fill="#8a8a8a" xlink:href="#a"/><use width="100%" height="100%" x="556.31" y="783.61" fill="#8a8a8a" xlink:href="#b"/><use width="100%" height="100%" x="609.79" y="783.61" fill="#8a8a8a" xlink:href="#c"/><use width="100%" height="100%" x="663.26" y="783.61" fill="#8a8a8a" xlink:href="#d"/><use width="100%" height="100%" x="715.59" y="783.61" fill="#8a8a8a" xlink:href="#e"/><use width="100%" height="100%" x="768.49" y="783.61" fill="#8a8a8a" xlink:href="#f"/><use width="100%" height="100%" x="821.96" y="783.61" fill="#8a8a8a" xlink:href="#d"/><use width="100%" height="100%" x="876.01" y="783.61" fill="#8a8a8a" xlink:href="#g"/><path fill="#bf2b26" d="M1183.75 736.27c-2.36-2.2-4.6-3.28-6.68-3.28-1.85 0-3.9.9-6.18 2.9-2.3 1.9-4.5 4.4-6.5 7.4s-3.7 6.3-5.1 9.9c-1.4 3.5-2 7-2 10.2 0 1.2.2 2.1.7 2.7.5.6 1.1.9 1.9.9.7 0 2-.9 3.8-2.7 1.8-1.8 3.8-4.1 6.1-7 2.2-2.9 4.6-6.2 7-9.9s4.6-7.5 6.7-11.4m29.1 13.7c.1.4.1.8.2 1.3v1.2c0 2.9-1 5.6-3.1 8.2-3.2 4.2-6.3 7.7-9.2 10.7-3 3-5.6 5.4-8.1 7.3-2.5 1.9-4.6 3.3-6.5 4.2-1.9.9-3.4 1.4-4.5 1.4-2 0-3.9-.5-5.8-1.6-1.9-1-3.3-2.5-4.2-4.4 0-1.1.1-2.1.3-3.2s.7-2.4 1.2-4c.6-1.6 1.4-3.5 2.5-5.7 1-2.2 2.4-5 4.1-8.4-1.4 0-2.3.3-2.7 1-4 5.3-7.4 9.6-10.2 13-2.8 3.3-5.3 6-7.3 8s-3.7 3.3-5.1 4c-1.3.7-2.5 1.1-3.5 1.1-4-.5-7.2-2.4-9.4-5.5-2.3-3.2-3.4-7.1-3.4-11.9 0-6.5 1.1-12.5 3.4-18 2.3-5.6 5.2-10.4 8.7-14.5s7.4-7.3 11.6-9.6c4.2-2.3 8.2-3.5 12-3.5 2.94 0 5.44.5 7.5 1.5 2.1 1 4.22 2.7 6.5 5.3 3.2-2.2 6-3.7 8.4-4.6 2.4-.9 4.1-1.3 5.3-1.3 1.6 0 2.83.7 3.8 2.1-.4 1.6-1 3.6-1.8 6s-1.58 4.9-2.47 7.6c-.8 2.6-1.7 5.3-2.7 8l-2.5 7.6c-.7 2.3-1.4 4.4-1.9 6.1-.5 1.7-.8 3-.9 3.8 0 .8.6 1.3 1.67 1.3.4 0 .9-.2 1.8-.6.86-.4 2-1.2 3.4-2.3 1.4-1.2 3.17-2.7 5.2-4.6 2-2 4.4-4.4 7.1-7.3"/><path fill="#bf2b26" d="M1223.7 746.97c-.85 1.18-1.93 2.53-3.23 4.04-1.3 1.6-2.7 3.1-4.22 4.8-1.5 1.7-3.1 3.3-4.72 5l-4.6 4.8c2.02 2.6 4.24 4.6 6.68 6.1 2.5 1.5 4.9 2.2 7.2 2.2 2 0 3.8-.7 5.3-2.2 1.5-1.5 2.2-3.7 2.2-6.6 0-1.4-.1-2.9-.5-4.5-.3-1.6-.7-3.1-1.2-4.7l-1.5-4.5c-.5-1.4-.9-2.8-1.2-4.1m-2.4-10.7c.4-2.4 1.2-4.7 2.3-6.8 1.1-2.1 2.4-4 3.8-5.5 1.5-1.5 3.1-2.7 4.8-3.6 1.7-.9 3.5-1.3 5.3-1.3 1.8 0 3.3.6 4.6 1.7 1.3 1.2 2.1 2.8 2.4 4.9-.6 1.2-1.4 2.4-2.4 3.6s-2.1 2.4-3.3 3.5c.2 1.7.7 3.6 1.7 5.7.9 2.1 1.9 4.3 2.9 6.7 1 2.4 1.9 4.9 2.7 7.6.8 2.7 1.2 5.4 1.2 8.3 0 2.9-.9 5.7-2.7 8.5-1.8 2.9-4.2 5.4-7 7.7s-5.9 4.1-9.2 5.5c-3.3 1.4-6.5 2.1-9.5 2.1-3.1 0-5.9-.3-8.4-1.1-2.4-.7-4.6-1.7-6.3-2.9-1.7-1.1-3.1-2.5-4.1-4-.9-1.5-1.4-3-1.4-4.5 0-2.2.3-4.2.9-6.1.6-1.8 1.7-3.8 3.2-5.8.7-.8 1.8-2.1 3.3-3.8 1.5-1.7 3.1-3.7 4.9-5.8 1.8-2.2 3.6-4.5 5.6-6.9 1.9-2.5 3.6-4.8 5-7.1m74.7 14c.1.4.2.8.2 1.2.1.5.1.9.1 1.3 0 3.1-1 5.9-3 8.2-3.5 4.7-6.9 8.6-10.1 11.6-3.2 3-6.1 5.4-8.8 7.2-2.6 1.8-5 3-7 3.7-2 .7-3.6 1-4.9 1-2.8 0-5.5-.8-7.9-2.5-2.4-1.6-4.2-3.9-5.3-6.8l11.5-37-3 .7c-.5-1.6-.7-3.04-.7-4.4.1-2 .6-3.84 1.4-5.53.9-1.7 1.9-2.9 3.1-3.6l3.4-.33 5.3-16.5c2-.5 4.1-.8 6.2-.8 2.8 0 5.2.5 7.1 1.5 2 1 3.1 2.4 3.6 4.08l-3 9.9 12-1.2c-.1 1.7-.5 3.5-1.3 5.3-.8 1.9-1.9 3.57-3.2 5.1l-11 2.4-8.3 28.1c0 2.8.9 4.2 2.6 4.2 1.4 0 3.8-1.14 7.2-3.5 3.5-2.32 8.2-6.7 14.1-13"/><path fill="#bf2b26" d="M1322.72 731.6c-.5 0-1.22.36-2.14 1.07-.93.72-1.94 1.87-3.03 3.47-1.1 1.6-2.22 3.6-3.4 6.05-1.17 2.4-2.27 5.3-3.27 8.6 4.1-1.9 7.4-3.6 9.82-5.1 2.44-1.5 4.12-2.8 5.05-3.8 1.17-1.5 1.76-3.3 1.76-5.5 0-3.4-1.6-5-4.7-5m26.9 17c.2.8.3 1.7.3 2.7 0 1.4-.4 3-1 4.7-.6 1.7-1.4 3.2-2.3 4.4-5.8 7.9-11.8 13.8-17.9 17.8-6 4-12.2 6-18.6 6-6.9 0-12-1.8-15.5-5.3-3.4-3.5-5.1-8.3-5.1-14.1 0-2.1.2-4.3.7-6.6s1.1-4.5 1.8-6.4c1.6-4.6 3.7-8.7 6.3-12.5 2.6-3.8 5.5-7 8.7-9.7 3.2-2.7 6.5-4.7 10-6.2s7-2.2 10.4-2.2c5.2 0 9.2 1.1 11.9 3.3 2.8 2.2 4.1 5.3 4.1 9.2 0 1.3-.2 2.6-.7 4.1-.5 1.5-1.2 2.8-2 4-.5.6-1.6 1.6-3.3 2.9-1.8 1.3-4 2.7-6.7 4.3s-5.9 3.3-9.6 5c-3.6 1.8-7.6 3.4-11.9 4.9-.1.4-.1.9-.2 1.5 0 .6-.1 1.2-.1 1.9 0 2.3.8 4.1 2.2 5.6 1.4 1.5 3.7 2.2 6.9 2.2 3.6 0 8.1-1.7 13.5-5s11.6-9 18.5-17"/><path fill="#bf2b26" d="M1399.7 750c.17.34.26.75.26 1.26v1.26c0 1.43-.28 2.85-.82 4.28-.55 1.43-1.28 2.73-2.2 3.9-3.37 4.46-6.54 8.2-9.52 11.22-2.98 3.03-5.7 5.46-8.13 7.3-2.5 1.86-4.6 3.18-6.5 3.98-1.9.8-3.5 1.2-4.6 1.2-2.5 0-4.7-.7-6.8-2.08-2.1-1.4-3.9-3.55-5.5-6.5.2-2.18.9-4.6 2.1-7.24 1.1-2.64 2.5-5.4 4.1-8.25 1.6-2.85 3.3-5.7 5.1-8.5 1.8-2.82 3.4-5.5 4.9-8 0-.5-.2-1-.5-1.46-.4-.46-1-.9-2-1.32-1.1-.42-2.3-.84-3.5-1.26-1.3-.5-2.3-.8-3.1-1.2-2 3.2-4.3 6.5-6.9 10-2.6 3.5-5.3 6.9-8.1 10.2-2.8 3.3-5.7 6.4-8.5 9.4-2.9 3-5.6 5.5-8.1 7.6-.7-.6-1.2-1.3-1.5-2.2-.3-.9-.4-1.8-.4-2.8 0-1.1.1-2.2.5-3.2.3-1.1.8-2 1.5-2.9 2.3-1.8 4.8-4.1 7.3-6.9 2.5-2.8 4.8-5.8 7-8.8 2.1-3.1 4-5.9 5.7-8.7 1.6-2.8 2.9-4.9 3.6-6.4-1.5-2.1-2.2-4.5-2.2-7.1.1-3.5 1.1-6.6 3.1-9.3 1.9-2.8 4.5-4.3 7.7-4.6.1 1.1.3 2.3.7 3.3.4 1 1.3 2.1 2.8 3.1 1.4 1 3.5 2.1 6.1 3.2 2.7 1.1 6.3 2.4 10.8 3.8 2.6.8 4.6 1.7 6 2.7 1.3 1 2 2.7 2 5.2-.7 2.2-1.8 4.6-3.3 7.4-1.5 2.8-3.1 5.6-4.8 8.4-1.7 2.8-3.3 5.4-4.7 8-1.5 2.5-2.4 4.7-2.8 6.5 0 .6.2 1 .6 1.4.4.3.9.5 1.4.5.5 0 1.4-.4 2.6-1.2 1.2-.8 2.8-1.9 4.6-3.3 1.9-1.4 3.9-3.2 6.1-5.4 2.3-2.2 4.6-4.6 7-7.3"/><path fill="#bf2b26" d="M1410.54 746.97c-.84 1.18-1.9 2.53-3.2 4.04-1.32 1.6-2.72 3.1-4.23 4.8-1.5 1.7-3 3.3-4.7 5l-4.6 4.8c2 2.6 4.3 4.6 6.7 6.1 2.5 1.5 4.9 2.2 7.2 2.2 2 0 3.8-.7 5.3-2.2 1.5-1.5 2.2-3.7 2.2-6.6 0-1.4-.1-2.9-.5-4.5-.3-1.6-.7-3.1-1.2-4.7l-1.5-4.5c-.5-1.4-.9-2.8-1.2-4.1m-2.4-10.7c.5-2.4 1.2-4.7 2.3-6.8 1.1-2.1 2.4-4 3.9-5.5s3.1-2.7 4.8-3.6c1.7-.9 3.5-1.3 5.2-1.3 1.8 0 3.3.6 4.6 1.7 1.3 1.2 2.1 2.8 2.4 4.9-.6 1.2-1.4 2.4-2.4 3.6s-2.1 2.4-3.2 3.5c.2 1.7.7 3.6 1.6 5.7 1 2.1 1.9 4.3 2.9 6.7 1 2.4 1.9 4.9 2.7 7.6.8 2.7 1.2 5.4 1.2 8.3 0 2.9-.9 5.7-2.7 8.5-1.8 2.9-4.1 5.4-7 7.7-2.8 2.3-5.9 4.1-9.2 5.5-3.3 1.4-6.5 2.1-9.6 2.1-3.1 0-5.9-.3-8.3-1.1-2.4-.7-4.6-1.7-6.3-2.9-1.7-1.1-3.1-2.5-4.1-4-.9-1.5-1.4-3-1.4-4.5 0-2.2.3-4.2 1-6.1.7-1.8 1.7-3.8 3.2-5.8.7-.8 1.8-2.1 3.3-3.8 1.5-1.7 3.2-3.7 5-5.8 1.8-2.2 3.7-4.5 5.6-6.9 2-2.5 3.7-4.8 5.1-7.1M1152.7 679c-2.9 7.5-5.6 15.6-8.2 24.22-2.5 8.66-4.8 17.16-6.6 25.5-1.8 8.37-3.4 16.34-4.5 23.9-1.1 7.6-1.7 14.04-1.7 19.36 0 2.6.3 4.8.9 6.7.7 1.9 1.6 3.3 2.8 4.18-1.8 2.3-4.1 4.1-7 5.2-2.9 1.2-5.8 1.8-8.7 1.8-4.2 0-7.7-1.26-10.6-3.8-2.8-2.55-4.3-6.86-4.3-12.95 0-2.2.3-5.3.9-9.2.6-3.9 1.4-8.4 2.4-13.4 1.1-5 2.3-10.4 3.8-16.3 1.47-5.8 3-11.8 4.68-17.7-.65 0-1.12.1-1.4.2-.3.1-.6.4-.9.8l-40.8 62c-4.9 1.7-9.2 2.5-12.94 2.5-2.62 0-4.95-.5-6.94-1.6-2-1-3.5-2.8-4.4-5.4.35-2.9.66-6.3.9-10l.8-11.4c.3-3.9.5-7.8.8-11.8.2-4 .4-7.9.5-11.6.1-2.2.2-4.22.2-6.1v-6c-.1-.9-.3-1.5-.4-1.7-.2-.2-.57-.3-1.1-.3-9 16.18-16.77 29.77-23.3 40.77-6.6 11-12.47 19.9-17.56 26.6-5.1 6.8-9.7 11.6-13.8 14.5-4.1 3-8.1 4.4-12 4.4-4.4 0-8.1-1.5-11.02-4.7-2.9-3.12-5-7.4-6.1-12.83.6.2 1.3.4 2.3.4 4.7 0 9.2-1.9 13.7-5.9 4.5-3.9 9.1-9 13.7-15.4 4.7-6.4 9.5-13.6 14.4-21.8 4.95-8.2 10.18-16.4 15.7-24.8 2.78-4.2 5.3-7.3 7.56-9.3 2.24-2 4.9-3 8.03-3 1.7 0 3.6.3 5.8.9 1.3 0 2.1-.6 2.2-1.8-.8-9-3.5-15.8-8.1-20.6-4.6-4.7-11.2-7.1-19.7-7.1-6.9 0-13.5 1.7-19.6 4.9-6 3.3-11.3 7.6-15.8 13s-8 11.6-10.6 18.6c-2.6 7-3.9 14.4-3.9 22 0 5.1 1.6 8.4 4.7 10-1.83 2.6-4.1 4.6-6.8 6-2.62 1.5-5.5 2.2-8.43 2.2-4.44 0-8.2-1.43-11.2-4.3-3.1-2.9-4.6-7.5-4.6-13.8 0-7.1 1.16-13.9 3.4-20.4 2.27-6.54 5.37-12.7 9.3-18.5 3.9-5.8 8.55-11.1 13.86-15.87 5.3-4.7 11-8.8 17.1-12.3 6.1-3.4 12.4-6.06 19-7.9 6.6-1.87 13.14-2.8 19.7-2.8 16.25 0 28.5 5.02 36.7 15.1 8.2 10.1 12.3 25.8 12.3 47.13 0 1.6-.1 3.6-.1 6.17l-.3 7.8-.3 7.4c-.1 2.28-.26 3.9-.37 4.9.64 0 1.1-.1 1.4-.2.3-.1.5-.4.7-.8l43.7-63.7c1.3-2.2 2.5-3.3 3.64-3.3.3 0 .8-.05 1.4-.1.6-.05 1.1-.14 1.4-.25 1.64-1.9 4.2-2.9 7.62-2.9 2.2 0 4.7.4 7.44 1.2 2.8.74 5.8 2.1 9 3.94"/></g></svg>
</a>
<br />
<em
>Sponsored by
<a href="https://frontendmasters.com/">Frontend Masters</a>,
advancing your skills with in-depth, modern front-end engineering
courses</em
>
</p>
</section>
<section>Today, tools like
<a href="https://babeljs.io/">Babel</a> have made it commonplace to see
<a href="http://www.ecma-international.org/ecma-262/6.0/">ES2015</a>, ES2016, ES2017, ES2018, and
ES2019
language updates/proposals in babelified source code. These compounding language changes can make
it
difficult to learn something like React, Apollo GraphQL, or Webpack.</section>
<section>
This book aims to alleviate this problem by providing a curated selection of the commonly used language updates, tersely explain, to lessen this indirection. Thus, after studying the material in this book grokking new JavaScript code while learning JavaScript frameworks and tools, should be much more comfortable.
</section>
<hr>
<h3>Written For:</h3>
<p>The contents of this book are for developers who are working in a codebase using modern React, Vue, or Angular code and find recent JavaScript language updates/proposals to be causing too much indirection. And or, developers who want to drill into memory the latest and most commonly used JavaScript updates.</p>
<p>ES2015+ Enlightenment is not a rudimentary read on the JavaScript language. The content in this book attempts to take a developer with ES3 and ES5 knowledge and make them more knowledgeable about ES2015+ and the implications of modern changes to the language on JavaScript tools and frameworks.
</p>
<hr>
<h3>How to Use/Read This Book:</h3>
<p>First off, this is a mix between a book, a reference, and cheatsheet. My intention in writing is to shine a light on ES5+ language changes in a tersely and helpfully format. To be clear this is not a long form book on the JavaScript language. Or, a detailed reference. Consider this an elaborate cheatsheet with runnable code purposefully curated for those who know ES3 but need to master ES5+.</p>
<p>Second, this is a web book. A lot of contexts can be gained by just clicking on links in this book. If you ever feel in need of more context use the links in the text.</p>
<hr>
<h3>How to Use/Read The Code Examples:</h3>
<p>Try and view the code examples as an extension of the words. First, read and re-read the words. Then read the code, especially the code comments, from top to bottom as if they are part of the surrounding paragraphs. The goal should be to grok the code until no questions remain as to what the code example is doing and expressing.
</p>
<hr>
<h3>While Using/Reading the book remember, by design:</h3>
<ol>
<li>The words and code comments are intentionally terse with the goal of code comprehension long-winded and exhaustive explanations.</li>
<li>The code examples are contrived to reveal the nature of the code. Focus on what the code is doing and making sure you understand it, potentially over my words.</li>
<li>The book is a mix of a mini book, a reference, and cheatsheet. Expect it to feel like one of these or all of these at the same time.</li>
</ol>
<hr>
<div id="chapter1" class="chapter">
<h2>Chapter 1 : ECMAScript 5 (aka ES5) Recap </h2>
<section class="sub">
<p>In this chapter, I'll recap the significant language updates introduce in ES5 to delineate these updates from
the
updates made in ES2015 (aka ES6).</p>
</section>
<h3>1.1 : ES5 Browser and Node Compatibility</h3>
<p>For the most part, ES5 is
<a href="https://kangax.github.io/compat-table/es5/">compatible</a> with
<a href="https://gs.statcounter.com/browser-version-market-share">modern</a> browsers (e.g.
<a href="https://kangax.github.io/compat-table/es5/#test-Strict_mode">IE9+, excluding strict mode</a>)
and
<a href=" https://nodejs.org/en/ ">Node</a> since version 4.x.x.</p>
<p>Unless you have to support an older JavaScript engine/runtime (e.g. IE8) you are safe to assume
most
<a href="https://kangax.github.io/compat-table/es5/">modern JavaScript engines/runtimes support ES5</a>.</p>
<h3>1.2 : New ES5 <code>String</code> Method</h3>
<p>The ES5 <code>.trim()</code> method removes whitespace from both ends of a string and creates a new
string.</p>
<pre class="line-numbers"><code class="language-js">
var myString = ' Some Tabs and Spaces ';
console.log(myString.length); // logs 28
var myNewString = myString.trim(); // trim it
console.log(myNewString); // logs 'Some Tabs and Spaces'
console.log(myNewString.length); // logs 20
// Note: this method does not mutate a value it creates a new value
console.log(myString, myString.length); // This still is, ' Some Tabs and Spaces '
</code></pre>
<p>You should consider "Whitespace" to mean in general; spaces, tabs, and non-breaking spaces used in a string.</p>
<p>Specifically <code>trim()</code> removes:</p>
<ul>
<li>\U0009 character tabulation</li>
<li>\U000A line feed</li>
<li>\U000B line tab</li>
<li>\U000C form feed</li>
<li>\U000D carriage return</li>
<li>\U0020 space</li>
<li>\U3000 ideographic space</li>
<li>\UFEFF zero-width non-breaking space</li>
</ul>
<h3>1.3 : New ES5 <code>Array</code> Static Methods</h3>
<p>ES5 added the static <code>Array</code> method, <code>Array.isArray()</code>.</p>
<p>The <code>Array.isArray()</code> method is used to determine precisely (<code>true</code> or <code>false</code>)
if a value is a true
<code>Array</code>. In other words, this method checks to see if the provided value is an instance
of
the <code>Array()</code> constructor.</p>
<pre class="line-numbers"><code class="language-js">
console.log(Array.isArray([1,2,3])) //logs true
// Note: does not work on Array-like objects
console.log(Array.isArray({length: 3, 0:1, 1:2, 2:3})) //logs false
</code></pre>
<div class="notes">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>The static <code>Array.isArray()</code> method differs from using <code>[] instanceof Array</code> only slightly when dealing with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#instanceof_vs_isArray">iframes</a>.</li>
<li>This <code>isArray()</code> method also respects values that are constructed from constructors extended from the native <code>Array</code> constructor using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends">new class <code>extends</code> keyword.</a></li>
</ol>
</div>
<h3>1.4 : New ES5 <code>Array</code> Methods</h3>
<p>ES5 added the following <code>Array</code> methods (i.e.
<a href="https://en.wikipedia.org/wiki/Higher-order_function ">higher-order iteration functions</a>):</p>
<ul>
<li><code>[].some()</code></li>
<li><code>[].every()</code></li>
<li><code>[].filter()</code></li>
<li><code>[].forEach()</code></li>
<li><code>[].indexOf()</code></li>
<li><code>[].lastIndexOf()</code></li>
<li><code>[].map()</code></li>
<li><code>[].reduce()</code></li>
<li><code>[].reduceRight()</code></li>
</ul>
<p>The <code>[].some()</code> method will start testing values in array,
<strong>until a test returns true</strong>, then the function passed to <code>.some()</code> immediately returns <code>true</code>, otherwise the function returns
<code>false</code> (i.e. the first truthy value found will result in the function immediately returning true and potentially this could mean not all tests are run).</p>
<pre class="line-numbers"><code class="language-js">
// Check if one or more items in the array is bigger than or equal to 2
var someMethod = [1, 2, 3].some(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(someMethod)
// logs true because the array contains a value that is greater than or equal to 2
</code></pre>
<p>The <code>[].every()</code> method will start testing values in array,
<strong>until a test returns true</strong>, then the function passed to <code>.every()</code> immediately returns <code>true</code>, otherwise the function returns <code>false</code> (i.e. the first truthy value found will result in the function immediately returning true and potentially this could mean not all tests are run).</p>
<pre class="line-numbers"><code class="language-js">
// Check if every item in the array is bigger than or equal to 2
var everyMethod = [1, 2, 3].every(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(everyMethod) // logs false because the array contains a value that is less than 2
</code></pre>
<p>The <code>[].filter()</code> method will return a new
<code>Array</code> containing all the values that
<strong>pass (i.e. are true) the filtering test</strong>.</p>
<pre class="line-numbers"><code class="language-js">
var myArray = [1,2,3];
// filter out any value in the array that is not bigger than or equal to 2
var FilteredArray = myArray.filter(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(FilteredArray) // logs [2,3]
// Note: filter() returns a new Array, myArray is still equal to [1,2,3]
</code></pre>
<p>The <code>[].forEach()</code> method executes a provided function for each value in the array.</p>
<pre class="line-numbers"><code class="language-js">
// log to the console each value, valueIndex, and wholeArray passed to the function
['dog','cat','mouse'].forEach(function(value, valueIndex, wholeArray){
console.log('value = '+value+' valueIndex = '+valueIndex+' wholeArray = '+wholeArray);
/** logs:
"value=dog valueIndex=0 wholeArray=dog,cat,mouse "
"value=cat valueIndex=1 wholeArray=dog,cat,mouse "
"value=mouse valueIndex=2 wholeArray=dog,cat,mouse "
**/
});
</code></pre>
<p>The <code>[].indexOf()</code> method searches an array for the
<strong>first</strong> value matching the value passed to <code>indexOf()</code>, and returns the index of this value.</p>
<pre class="line-numbers"><code class="language-js">
// get index of first 'cat'
console.log(['dog','cat','mouse', 'cat'].indexOf('cat')); // logs 1
// Note: Remember the index starts at 0
</code></pre>
<p>The <code>[].lastIndexOf()</code> method searches an array for the
<strong>last</strong> value matching the value passed to <code>[].lastIndexOf()</code>, and returns the index of this value.</p>
<pre class="line-numbers"><code class="language-js">
// get index of last 'cat'
console.log(['dog','cat','mouse', 'cat'].lastIndexOf('cat')); // logs 3
// Note: Remember the index starts at 0
</code></pre>
<p>The <code>[].map()</code> method executes a provided function for each value in the array, and returns the
results
in a
<strong>new array</strong>.</p>
<pre class="line-numbers"><code class="language-js">
var myArray = [5, 15, 25];
// add 10 to every number in the array
var mappedArray = myArray.map(function(value, valueIndex, wholeArray){
return value + 10;
});
console.log(mappedArray) // logs [15,25,35]
// Note: map() returns a new Array, myArray is still equal to [5, 15, 25]
</code></pre>
<p>The <code>[].reduce()</code> method runs a function that passes the return value to the next iteration of the
function
using values in the array from
<strong>left to right</strong> and returning a final value.</p>
<pre class="line-numbers"><code class="language-js">
// add up numbers in array from left to right i.e. (((5+5) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value;
});
console.log(reduceMethod) // logs 17
/** reduce also accepts a second parameter that sets the first accumulator value,
instead of using the first value in the array. **/
// add up numbers in array from left to right, but start at 10 i.e. ((((10+5) +5 ) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10);
console.log(reduceMethod) // logs 27
</code></pre>
<p>The <code>[].reduceRight()</code> method runs a function that passes the return value to the next iteration of
the
function using values in the array from
<strong>right to left</strong> and returning a final value.</p>
<pre class="line-numbers"><code class="language-js">
// add up numbers in array from left to right i.e. (((2+5) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value;
});
console.log(reduceRightMethod) // logs 17
/** reduce also accepts a second parameter that sets the first accumulator value,
instead of using the first value in the array. **/
// add up numbers in array from left to right, but start at 10 i.e. ((((10+2) + 5 ) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10);
console.log(reduceRightMethod) // logs 27
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>All the new methods ignore holes in arrays (i.e. <code>[1,2,,,,,,,,,3]</code>).</li>
<li>All of these new <code>Array</code> methods, except for <code>reduce</code> and <code>reduceRight</code>
accept
a second parameter. This second parameter allows you to set the <code>this</code> value for
the
function being passed in the first parameter. </li>
</ol>
</div>
<h3>1.5 : New ES5 Getters and Setters (aka Accessors Descriptors or Computed Properties)</h3>
<p>ES5 adds to <code>Objects</code> computed properties via the keywords <code>get</code> and <code>set</code>.
This means that <code>Objects</code> can have properties, that are methods, but don't act like
methods
(i.e you don't invoke them using <code>()</code>). In short by labeling a function in an object
with
<code>get</code> or <code>set</code> one can invoke the backing property function on a property, by merely
accessing
the property, without using innovating brackets.</p>
<p>The example below demonstrates the nature of getter and setter properties:</p>
<pre class="line-numbers"><code class="language-js">
var obj = {
get RunsWhenAccessed(){
console.log('you accessed the property RunsWhenAccessed');
},
set RunsWhenSet(newValueBeingSet){
console.log('you set the property RunsWhenSet to : ' + newValueBeingSet);
}
}
// access the RunsWhenAccessed property and the backing property function fires
obj.RunsWhenAccessed; // logs 'you accessed the property RunsWhenAccessed'
// access and set the RunsWhenSet property and the backing property function fires
obj.RunsWhenSet = 'foo'; // logs 'you set the property RunsWhenSet to : foo'
// note I am setting a value that becomes an argument and not calling a function using brackets
</code></pre>
<p>Don't over think getters and setters, they are simply a property who's value is determined by
running
a backing property function and the function is invoked by accessing or setting the property.</p>
<pre class="line-numbers"><code class="language-js">
var person = {
firstName : '',
lastName : '',
get name() {
return this.firstName + ' ' + this.lastName;
},
set name(str) {
var n = str.split(/\s+/);
this.firstName = n.shift();
this.lastName = n.join(' ');
}
}
// set name, but store first and last separately
person.name = 'Cody Lindley';
// get name, returns firstName and LastName combined
console.log(person.name); // logs 'Cody Lindley'
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>The same property can have a getter and setter.</li>
<li>The <code>get</code> and <code>set</code> syntax is a shortcut for using <code>Object.defineProperty()</code>
and
<code>Object.defineProperties()</code> to add the <code>get</code> and <code>set</code> property descriptors.</li>
<li>A setter property can only take in a single value and thus a single argument is
passed
to the backing property function.
</li>
</ol>
</div>
<h3>1.6 : New ES5 <code>Object</code> Static Methods</h3>
<ul>
<li><code>Object.create()</code></li>
<li><code>Object.getPrototypeOf()</code></li>
<li><code>Object.defineProperty()</code></li>
<li><code>Object.defineProperties()</code></li>
<li><code>Object.getOwnPropertyDescriptor()</code></li>
<li><code>Object.getOwnPropertyNames()</code></li>
<li><code>Object.preventExtensions()</code></li>
<li><code>Object.isExtensible()</code></li>
<li><code>Object.sealed()</code></li>
<li><code>Object.isSealed()</code></li>
<li><code>Object.freeze()</code></li>
<li><code>Object.isFrozen()</code></li>
</ul>
<p>ES5 added the <code>Object.create()</code> method so objects could be created and their prototypes
easily
setup.
<code>Object.getPrototypeOf</code>() was added to easily get an objects prototype.</p>
<pre class="line-numbers"><code class="language-js">
// setup an object to be used as the prototype to a newly created myObject object below
var aPrototype = {
foo: 'bar',
getFoo: function(){
console.log(this.foo);
}
}
// create a new myObject, setting the prototype of this new object to aPrototype
var myObject = Object.create(aPrototype);
// logs 'bar' because myObject uses aPrototype as its prototype, it inherits getFoo()
myObject.getFoo(); // logs 'bar'
// get a reference to the prototype of myObject, using getPrototypeOf()
console.log(Object.getPrototypeOf(myObject) === aPrototype); //logs true
</code></pre>
<p>ES5 added <code>Object.defineProperty()</code>, <code>Object.defineProperties()</code>, and <code>Object.getOwnPropertyDescriptor()</code>
so
object properties can be precisely defined (using descriptors) and retrieved. Descriptors provide
an
attribute that describe a property in an object. The attributes (i.e descriptors) that each
property
can have are:
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor#Description ">configurable,
enumerable, value, writable, get, and set</a>.</p>
<pre class="line-numbers"><code class="language-js">
// create an object with a property and value
const myObject = {
prop1: 'value1'
}
// get the default descriptors for the prop1 property in myObject.
console.log(Object.getOwnPropertyDescriptor(myObject,'prop1'));
/** the above console logs:
[object Object] {
configurable: true,
enumerable: true,
value: "value1",
writable: true
}
Note that get and set are undefined by default **/
// add a property, 'value2' with descriptors to myObject using Object.defineProperty()
Object.defineProperty(myObject, 'prop2', {
value: 'value2',
writable: true,
enumerable: true,
configurable: true,
});
// get the descriptors for the prop2 property.
console.log(Object.getOwnPropertyDescriptor(myObject,'prop2'));
// add multiple properties ('prop3' & 'prop4') with
// descriptors to myObject using Object.defineProperties()
Object.defineProperties(myObject, {
prop3: {
enumerable: true,
configurable: true,
value: 'value3'
},
prop4: {
enumerable: true,
configurable: true,
// Note that value and write properties are not added when using the properties set and get
set: (newValue) => {
console.log('you set the property prop4 to : ' + newValue);
},
get: () => {
console.log('you accessed the property prop4');
return 'prop4'; // the get returns the value for prop4 unlike using, value: 'value4'
}
}
});
// get the descriptors for the prop3 and prop4 properties
console.log(Object.getOwnPropertyDescriptor(myObject,'prop3'));
console.log(Object.getOwnPropertyDescriptor(myObject,'prop4'));
// Note that prop4's value is based on get and set, not value
console.log(myObject.prop4);
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>Using <code>=</code> to assign an object a property and value is a similar routine but not
exactly
identical to using
<code>Object.defineProperty()</code> and <code>Object.defineProperties()</code>. These two
methods
allow the assignment of a value as well as the defining/retrieval of a properties
descriptors
and will ignore the prototype chain (i.e. will not look for inherited properties).</li>
<li>ES2017 added the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors">Object.getOwnPropertyDescriptors()</a></code> static method. This method returns an object containing all the own property descriptors for a given object.</li>
<li>Below are the descriptions/definitions of the attributes of a property that make up a
property
descriptor:
<br>
<br>
<dl>
<dt>
<strong>value</strong> :</dt>
<dd>contains the property's value.</dd>
<dt>
<strong>writable</strong> :</dt>
<dd>contains a boolean indicating whether the value of a property can be changed or
written
too.
</dd>
<dt>
<strong>get</strong> :
</dt>
<dd>reference to the function that is called when a property is read.</dd>
<dt>
<strong>set</strong> :
</dt>
<dd>reference to the function that is called when a property is set to a value.</dd>
<dt>
<strong>configurable</strong> :
</dt>
<dd>contains a boolean indicating whether a property can have its attributes changed
and
deleted.
</dd>
<dt>
<strong>enumerable</strong> :
</dt>
<dd>contains a boolean indicating if a property will show up on certain operations.
</dd>
</dl>
</li>
</ol>
</div>
<p>ES5 added <code>Object.keys()</code> which returns an <code>Array</code> of non-inherited-enumerable properties
of
a given object. ES5 added <code>Object.getOwnPropertyNames()</code> which returns an <code>Array</code> of
non-inherited
properties of a given object regardless of enumerability.</p>
<pre class="line-numbers"><code class="language-js">
// Create an object
var myObject = Object.create(null); // no prototype used
// Add prop to object created
myObject.myObjectProp1 = 1;
// Define a property using defineProperty()
Object.defineProperty(myObject, 'myObjectProp2', {
enumerable: false,
value: 2
});
// Use keys() to get Array of all non-inherited, enumerable properties
console.log(Object.keys(myObject)); // logs ["myObjectProp1"]
// Use getOwnPropertyNames to get Array of all non-inherited properties including non-enumerable
console.log(Object.getOwnPropertyNames(myObject)); // logs ["myObjectProp1", "myObjectProp2"]
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>ES2017 added <code>Object.values()</code> which returns an array of a given object's own
enumerable
property values and <code>Object.entries()</code> which returns an array of a given
object's
own enumerable properties and values (e.g. <code>[[property:value],[property:value]]</code>).</li>
</ol>
</div>
<p>ES5 provided three Object methods for protecting objects. They are:</p>
<ol>
<li><code>Object.preventExtensions()</code>: Stops properties from being added but not deleted.</li>
<li><code>Object.seal()</code>: Stops properties from being added or configured (i.e. the <code>configurable</code>
descriptor attribute
for each property is changed to <code>false</code>).</li>
<li><code>Object.freeze()</code>: Stops properties from being added, configured, or writable (i.e.
the
<code>configurable</code> and
<code>writable</code> descriptor attribute for each property is changed to <code>false</code>)</li>
</ol>
<p>To compliment these three methods ES5 also added three <code>Object</code> methods for determining the type of
protection
an object is using. They are:</p>
<ol>
<li><code>Object.isExtensible()</code>: Boolean check if an object is extensible.</li>
<li><code>Object.isSealed()</code>: Boolean checking if an object is sealed.</li>
<li><code>Object.isFrozen()</code>: Boolean checking if an object is frozen.</li>
</ol>
<h3>1.7 : New ES5 <code>bind()</code> Function Method</h3>
<p>Before ES5 functions could only be invoked and given a <code>this</code> value at innovation time
using
<code>apply()</code> or <code>call()</code>. In other words, these two methods make it possible to
call
a function and at call time change the value of <code>this</code> for the body of the function. But
what
if you don't want to invoke the function? And instead, you want to change the value of <code>this</code>
for
the function when it is called in the future?</p>
<p>ES5 added <code>bind()</code> and this new function method does not invoke a function but instead
takes
an existing function and from it creates a new function, yet to be called, with a specified value
for
<code>this</code> inside of the new function.</p>
<pre class="line-numbers"><code class="language-js">
window.name = 'John'; // Defined in the global scope
var myObject = {name:'Bill'};
var greeting = function(){
// if the greeting function has a defined this that is not window i.e. global scope
console.log(this !== undefined && this !== window ? this.name : window.name);
};
// invoke greeting, where the this context for the greeting function is the global scope
greeting(); //logs John because the value name is in the global scope
// .bind() greetings function this value to myObject
var bindGreetingToObject = greeting.bind(myObject);
// this keyword now points to myObject, and not the window object.
// invoke bindGreetingToObject with the this context being bound to myObject
bindGreetingToObject(); //logs Bill because this value for bindGreetingToObject is bound to myObject
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>Don't forget that the main difference between <code>apply()</code> and <code>call()</code>
is
that
<code>apply()</code> takes an Array of arguments passed to the called function while <code>call()</code>
takes
a list of individual arguments (e.g. arg2, arg3, ... ). <code>Bind()</code> also takes a
list
of individual arguments (e.g. arg2, arg3, ... ) passed to the new function being called.</li>
</ol>
</div>
<h3>1.8 : New ES5 <code>use strict</code> Mode</h3>
<p>Adding, <code>'use strict'</code> to the top of a JavaScript file or as the first line of a function
body
will change the language to a
<a href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/ ">stricter</a> version of
JavaScript.
Today, using strict mode isn't typically a decision to be made because ECMAScript modules are implicitly
in
strict mode. In other words, spinning up a version of say,
<a href="https://github.com/facebook/create-react-app ">create-react-app</a> which uses ECMAScript modules
will
have <code>'use strict'</code> in play by default due to the fact that ECMAScript modules (i.e. <code>import React from 'react';</code>)
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ">uses
strict
mode implicitly</a>. It is important you are aware of this fact. In other words, JavaScript
modules
give you strict mode by default.</p>
<h3>1.9 : New ES5 <code>JSON</code> methods</h3>
<p><code>JSON.parse()</code> takes a JSON string and returns the JavaScript value(s) described by the
string.
In other words,
<code>JSON.parse()</code> will convert a string of JavaScript in
<a href="https://json.org/ ">JSON format</a> into real JavaScript values (i.e. Objects, Arrays,
Strings,
Numbers, Booleans etc...).</p>
<pre class="line-numbers"><code class="language-js">
var JSONValues = JSON.parse('{"name":"Bill","age":22}') // convert JSON string to JS values
console.log(typeof JSONValues); // logs "object"
console.log(JSONValues.name, JSONValues.age); // logs Bill, 22
</code></pre>
<p><code>JSON.stringify()</code> takes JavaScript values and returns a string representing the values.</p>
<pre class="line-numbers"><code class="language-js">
var JSONString = JSON.stringify({ name: 'Bill', age: 2 }); // Convert JS Object to JSON String
console.log(typeof JSONString) // logs "string"
console.log(JSONString) // logs "{ "name": "Bill", "age":2} "
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>Both <code>stringify()</code> and <code>parse()</code> have an optional second function
parameter
that can be used to augment the result before it is returned.</li>
</ol>
</div>
<h3>1.10 : New ES5 Syntax Changes</h3>
<p>Trailing commas in <code>Object</code> literals are now ok:</p>
<pre class="line-numbers"><code class="language-js">
var myObject = {
name: 'Bill',
age: 12, // no syntax error
}
</code></pre>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>Be aware, trailing commas are not allowed in JSON.</li>
<li>ES2017 will allow trailing commas when defining function parameters or calling a function with
arguments.
However, calling a function with a comma alone or defining a function parameter as a comma
alone
will throw a SyntaxError.
</li>
</ol>
</div>
<p>Reserved words can now be used as unquoted <code>Object</code> property keys:</p>
<pre class="line-numbers"><code class="language-js">
// no syntax error when using reserved keywords as property/keys on an object
var myObject = {
new: 'new',
class: 'class',
if: 'if',
function: 'function'
}
</code></pre>
<h3>1.11 : From ES5 to ES2015. What?</h3>
<p>ES2015 was first called ES6 because at the time an update to the 5th edition of ECMAScript would
logically
be title ECMAScript edition 6 or "ES6". However, a naming tweak for language updates/changes
occurred
in 2015. It was decided by <a href="https://www.ecma-international.org/memento/tc39-rf-tg.htm">TC39</a>,
the standardization group for JavaScript/ECMA-262, to release <a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md">stage four
proposals
</a> once a year (i.e. stage four are approved changes to the language). Given this change, new updates to the language moving forward would be given the
titles
ES2015 (i.e. ES6), ES2016, ES2017, ES2018 etc... . Basically, language changes/updates are semantically
titled
under the year in which the update/change becomes standardized.
</p>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>If it is not obvious, it should be noted that just because a JavaScript language
update/change has been
standardized
does not mean those who make use of the ECMAScript standard will implement the
updates/change
(i.e.,
adoption of new standards is a slow and often complicated affair e.g., browser
compatibility).</li>
</ol>
</div>
</div>
<div id="chapter2" class="chapter">
<h2>Chapter 2 : Running ES2015+ (Compatibility, Compiling, and Polyfills)</h2>
<section class="sub">
<p>Writing and running ES2015+ (i.e. ES2015, ES2016, ES2017, ES2018) code and staged proposals is
not as simple as writing some code and
then
having a web browser or Node run it. To run ES2015+ and staged proposals a pre-compiler and
polyfills
are needed. This chapter digs into some of these details.</p>
</section>
<h3>2.1 : ES2015 Native Runtime Compatibility</h3>
<p>Native support for ES2015+ (i.e.
<a href="https://kangax.github.io/compat-table/es6/">ES2015</a>,
<a href="https://kangax.github.io/compat-table/es2016plus/">ES2016</a>,
<a href="https://kangax.github.io/compat-table/esnext/">ES2017</a>,
<a href="https://kangax.github.io/compat-table/esnext/">ES2018</a> etc...) varies greatly depending upon
which
JavaScript engine and runtime one is needing to support (e.g. V8 & Node, V8 & Chrome,
JavaScriptCore
& Safari, SpiderMonkey & Firefox etc..). </p>
<p>In short, both modern day Node and modern web browser engines mostly have full <a href="http://kangax.github.io/compat-table/es6/">support
for ES2015</a> (starting with Node 6.14.4+, Edge 15, Chrome 47, Safari 10, and Firefox 54).
However,
things get complicated in terms of compatibility for <a href="https://kangax.github.io/compat-table/es2016plus/">ES2016+</a>
and <a href="https://github.com/tc39/proposals">staged proposals</a>. This is why a lot of
developers
side-step chasing compatibility and turn to polyfills and compilers. Polyfills plug JavaScript
runtimes
environments, at runtime, with newer unsupported API's while a compiler will transform newer
unsupported
syntax to previous versions of JavaScript (i.e. ES2015+ > ES5). This combination of polyfills and
compiling
allows developers to write ES2015+ JavaScript today while still supporting current and previous
runtimes (i.e. Write new 2015+ JavaScript, transforming it
using something like
Babel, then it can run it in IE9 with polyfills).</p>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>The staging of JavaScript proposals/updates is the process that allows JavaScript to change over time. A proposed change to the language starts at stage 0 and is finished when it reaches stage 4 (stages: <a href="https://tc39.github.io/process-document/">0 = strawman, 1 = proposal, 2 = draft, 3 = Candidate, 4 = finished</a>). When a proposal is finished it simply means it is ready to be added to the formal specification. Today, staged proposals regardless of if they have been officially added to the JavaScript specification can be adopted prematurely by developers using polyfills and compilers (e.g. Both TypeScript and Babel can be configured to interpret staged proposals).</li>
</ol>
</div>
<h3>2.2 : Running ES2015+ Using Online Tools</h3>
<p>The simplest way to run ES2015+ code online (including staged proposals) is to use the <a href="https://babeljs.io/repl">online
Babel REPL</a>.</p>
<p>If you'd like to run ES2015+ code in the context of the web platform try the <a href="https://codesandbox.io/s/vanilla">codesandbox.io</a>
tool.
The vanilla sandbox uses <a href="https://parceljs.org/transforms.html#babel">Parcel</a>
which uses Babel and <a href="https://babeljs.io/docs/en/babel-preset-env">babel-preset-env</a>
by default. Most of the code examples in this book can be run in <a href="https://codesandbox.io/s/vanilla">codesandbox.io</a> by clicking on the "run/edit in codesandbox.io" link above the code.</p>
<h3>2.3 : Running ES2015+ locally</h3>
<p>A common way to run ES2015+ code on your local computer, if you are already familiar with Node.js
and
REPL's, is to use
<a href="https://babeljs.io/docs/en/next/babel-node.html">babel-node</a>. Babel-node is a node CLI
tool
that will compile ES2015+ syntax to ES5 syntax before running it. It can be used in place of the
<a href="https://nodejs.org/api/cli.html">Node.js CLI</a> to run JavaScript code using the Node
runtime.
Keep in mind that most of ES2015 has been supported in <a href="https://node.green/">Node since
6.14.4+</a>.
But if you want ES2015+ including staged proposals you'll need to use a tool like <a href="https://babeljs.io/docs/en/next/babel-node.html">babel-node</a>.</p>
<p>Personally, I prefer using <a href="https://quokkajs.com/">Quokka.js</a> in my code editor with <a
href="https://quokkajs.com/docs/configuration.html#babel">Babel
enabled</a>. I setup Quokka to use <a href="https://babeljs.io/docs/en/babel-preset-env">babel-preset-env</a>
and <a href="https://babeljs.io/docs/en/babel-preset-stage-1">stage 1-3</a>.</p>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>Writing source code that uses ES2015+ in a coding environment isn't the topic of this book.
However,
keep in mind, that most developers today working on the front-end will set up a compiler
like
Babel or TypeScript as part of a development environment process so ES2015+ code will be
compiled
as it is developed. Typically, this involves using a <a href="https://github.com/topics/module-bundler">module
bundler
</a> that makes use of Babel or Typescript during development and production bundling.</li>
<li>Babel Polyfill is automatically loaded when using babel-node.</li>
</ol>
</div>
<h3>2.4 : Compiling ES2015+ Development Syntax To Static ES5 Production Syntax</h3>
<p>Because developers today don't want to wait for native support for newer
<a href="https://kangax.github.io/compat-table/es2016plus/">ES2016</a>,
<a href="https://kangax.github.io/compat-table/esnext/">ES2017</a>,
<a href="https://kangax.github.io/compat-table/esnext/">ES2018</a> syntax and coming syntax <a href="https://github.com/tc39/proposals">proposals</a>
they will adopt a compiling step for JavaScript source code. A compiling step takes ES2015+ syntax,
and potentially <a href="https://github.com/tc39/proposals">staged syntax proposals</a>, and
transforms newer/proposed syntax
to ES5 syntax (<a href="https://babeljs.io/docs/en/babel-polyfill">polyfill</a> require for
complete
compatibility). For example, it can take <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function syntax</a> and convert it to ES5 syntax.
</p>
<pre class="line-numbers"><code class="language-js">
// Compilers like Babel/TypeScript will take this:
const myFunction = () => {};
// And turn it into this:
var myFunction = function myFunction() {};
</code></pre>
<p>The most common compilers in use today are
<a href="https://babeljs.io/">Babel</a> and
<a href="https://www.typescriptlang.org/">TypeScript</a>. These compilers are routinely used as
part
of a build/bundling module process where ES2015+ source code and ES modules syntax are taken in and
transformed
to <strong>static</strong> ES5 production code (e.g.
<a href="https://webpack.js.org/loaders/babel-loader/">Webpack</a> and
<a href="https://parceljs.org/transforms.html#babel">Parcel</a> exist to bundle assets, but they can
also
compile ES2015+ code found in JavaScript modules to ES5 when bundling).</p>
<div class="notes ">
<p>
<strong>Notes:</strong>
</p>
<ol>
<li>The <a href="https://babeljs.io">Babel</a> compiling tool does double duty by compiling not