ts-react/JavascriptReactStyleGuide.html at master · nunoblue/ts-react · GitHub

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>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>JavascriptReactStyleGuide.html</title>
  <meta name="generator" content="Haroopad 0.13.1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>div.oembedall-githubrepos{border:1px solid #DDD;border-radius:4px;list-style-type:none;margin:0 0 10px;padding:8px 10px 0;font:13.34px/1.4 helvetica,arial,freesans,clean,sans-serif;width:452px;background-color:#fff}div.oembedall-githubrepos .oembedall-body{background:-moz-linear-gradient(center top,#FAFAFA,#EFEFEF);background:-webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF));border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #EEE;margin-left:-10px;margin-top:8px;padding:5px 10px;width:100%}div.oembedall-githubrepos h3{font-size:14px;margin:0;padding-left:18px;white-space:nowrap}div.oembedall-githubrepos p.oembedall-description{color:#444;font-size:12px;margin:0 0 3px}div.oembedall-githubrepos p.oembedall-updated-at{color:#888;font-size:11px;margin:0}div.oembedall-githubrepos ul.oembedall-repo-stats{border:none;float:right;font-size:11px;font-weight:700;padding-left:15px;position:relative;z-index:5;margin:0}div.oembedall-githubrepos ul.oembedall-repo-stats li{border:none;color:#666;display:inline-block;list-style-type:none;margin:0!important}div.oembedall-githubrepos ul.oembedall-repo-stats li a{background-color:transparent;border:none;color:#666!important;background-position:5px -2px;background-repeat:no-repeat;border-left:1px solid #DDD;display:inline-block;height:21px;line-height:21px;padding:0 5px 0 23px}div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a{border-left:medium none;margin-right:-3px}div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover{background:5px -27px no-repeat #4183C4;color:#FFF!important;text-decoration:none}div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover{border-bottom-left-radius:3px;border-top-left-radius:3px}ul.oembedall-repo-stats li:last-child a:hover{border-bottom-right-radius:3px;border-top-right-radius:3px}span.oembedall-closehide{background-color:#aaa;border-radius:2px;cursor:pointer;margin-right:3px}div.oembedall-container{margin-top:5px;text-align:left}.oembedall-ljuser{font-weight:700}.oembedall-ljuser img{vertical-align:bottom;border:0;padding-right:1px}.oembedall-stoqembed{border-bottom:1px dotted #999;float:left;overflow:hidden;width:730px;line-height:1;background:#FFF;color:#000;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;font-size:80%;text-align:left;margin:0;padding:0}.oembedall-stoqembed a{color:#07C;text-decoration:none;margin:0;padding:0}.oembedall-stoqembed a:hover{text-decoration:underline}.oembedall-stoqembed a:visited{color:#4A6B82}.oembedall-stoqembed h3{font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;font-size:130%;font-weight:700;margin:0;padding:0}.oembedall-stoqembed .oembedall-reputation-score{color:#444;font-size:120%;font-weight:700;margin-right:2px}.oembedall-stoqembed .oembedall-user-info{height:35px;width:185px}.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32{float:left;height:32px;width:32px}.oembedall-stoqembed .oembedall-user-info .oembedall-user-details{float:left;margin-left:5px;overflow:hidden;white-space:nowrap;width:145px}.oembedall-stoqembed .oembedall-question-hyperlink{font-weight:700}.oembedall-stoqembed .oembedall-stats{background:#EEE;margin:0 0 0 7px;padding:4px 7px 6px;width:58px}.oembedall-stoqembed .oembedall-statscontainer{float:left;margin-right:8px;width:86px}.oembedall-stoqembed .oembedall-votes{color:#555;padding:0 0 7px;text-align:center}.oembedall-stoqembed .oembedall-vote-count-post{font-size:240%;color:#808185;display:block;font-weight:700}.oembedall-stoqembed .oembedall-views{color:#999;padding-top:4px;text-align:center}.oembedall-stoqembed .oembedall-status{margin-top:-3px;padding:4px 0;text-align:center;background:#75845C;color:#FFF}.oembedall-stoqembed .oembedall-status strong{color:#FFF;display:block;font-size:140%}.oembedall-stoqembed .oembedall-summary{float:left;width:635px}.oembedall-stoqembed .oembedall-excerpt{line-height:1.2;margin:0;padding:0 0 5px}.oembedall-stoqembed .oembedall-tags{float:left;line-height:18px}.oembedall-stoqembed .oembedall-tags a:hover{text-decoration:none}.oembedall-stoqembed .oembedall-post-tag{background-color:#E0EAF1;border-bottom:1px solid #3E6D8E;border-right:1px solid #7F9FB6;color:#3E6D8E;font-size:90%;line-height:2.4;margin:2px 2px 2px 0;padding:3px 4px;text-decoration:none;white-space:nowrap}.oembedall-stoqembed .oembedall-post-tag:hover{background-color:#3E6D8E;border-bottom:1px solid #37607D;border-right:1px solid #37607D;color:#E0EAF1}.oembedall-stoqembed .oembedall-fr{float:right}.oembedall-stoqembed .oembedall-statsarrow{background-image:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3);background-repeat:no-repeat;overflow:hidden;background-position:0 -435px;float:right;height:13px;margin-top:12px;width:7px}.oembedall-facebook1{border:1px solid #1A3C6C;padding:0;font:13.34px/1.4 verdana;width:500px}.oembedall-facebook2{background-color:#627add}.oembedall-facebook2 a{color:#e8e8e8;text-decoration:none}.oembedall-facebookBody{background-color:#fff;vertical-align:top;padding:5px}.oembedall-facebookBody .contents{display:inline-block;width:100%}.oembedall-facebookBody div img{float:left;margin-right:5px}div.oembedall-lanyard{-webkit-box-shadow:none;-webkit-transition-delay:0s;-webkit-transition-duration:.4000000059604645s;-webkit-transition-property:width;-webkit-transition-timing-function:cubic-bezier(0.42,0,.58,1);background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:none;background-origin:padding-box;border-width:0;box-shadow:none;color:#112644;display:block;float:left;font-family:'Trebuchet MS',Trebuchet,sans-serif;font-size:16px;height:253px;line-height:19px;margin:0;max-width:none;min-height:0;outline:#112644 0;overflow-x:visible;overflow-y:visible;padding:0;position:relative;text-align:left;vertical-align:baseline;width:804px}div.oembedall-lanyard .tagline{font-size:1.5em}div.oembedall-lanyard .wrapper{overflow:hidden;clear:both}div.oembedall-lanyard .split{float:left;display:inline}div.oembedall-lanyard .prominent-place .flag:active,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:hover,div.oembedall-lanyard .prominent-place .flag:link,div.oembedall-lanyard .prominent-place .flag:visited{float:left;display:block;width:48px;height:48px;position:relative;top:-5px;margin-right:10px}div.oembedall-lanyard .place-context{font-size:.889em}div.oembedall-lanyard .prominent-place .sub-place{display:block}div.oembedall-lanyard .prominent-place{font-size:1.125em;line-height:1.1em;font-weight:400}div.oembedall-lanyard .main-date{color:#8CB4E0;font-weight:700;line-height:1.1}div.oembedall-lanyard .first{width:48.57%;margin:0 0 0 2.857%}.mermaid .label{color:#333}.node circle,.node polygon,.node rect{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2;rx:40;stroke:#6eaa49;stroke-width:1px}.cluster text{fill:#333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:#000;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#333}.messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333}#arrowhead{fill:#333}#crosshead path{fill:#333!important;stroke:#333!important}.messageText{fill:#333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText,.loopText{fill:#000;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:#000;stroke:none;font-family:'trebuchet ms',verdana,arial;font-size:14px}.section{stroke:none;opacity:.2}.section0,.section2{fill:#6eaa49}.section1,.section3{fill:#fff;opacity:.2}.sectionTitle0,.sectionTitle1,.sectionTitle2,.sectionTitle3{fill:#333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:#fff}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside1,.taskTextOutside2,.taskTextOutside3{fill:#000}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:#000!important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:#000!important}.crit0,.crit1,.crit2,.crit3{stroke:#f88;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#f88;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#f88;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3,.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:#000!important}.titleText{text-anchor:middle;font-size:18px;fill:#000}text{font-family:'trebuchet ms',verdana,arial;font-size:14px}html{height:100%}body{margin:0!important;padding:5px 20px 26px!important;background-color:#fff;font-family:"Lucida Grande","Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Lucida Sans Unicode",Helvetica,Arial,sans-serif;font-size:.9em;overflow-x:hidden;overflow-y:auto}br,h1,h2,h3,h4,h5,h6{clear:both}hr.page{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x;border:0;height:3px;padding:0}hr.underscore{border-top-style:dashed!important}body >:first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:3px}iframe{border:0}figure{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}kbd{border:1px solid #aaa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:1px 2px 2px #ddd;-webkit-box-shadow:1px 2px 2px #ddd;box-shadow:1px 2px 2px #ddd;background-color:#f9f9f9;background-image:-moz-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-o-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-webkit-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:linear-gradient(top,#eee,#f9f9f9,#eee);padding:1px 3px;font-family:inherit;font-size:.85em}.oembeded .oembed_photo{display:inline-block}img[data-echo]{margin:25px 0;width:100px;height:100px;background:url(../img/ajax.gif) center center no-repeat #fff}.spinner{display:inline-block;width:10px;height:10px;margin-bottom:-.1em;border:2px solid rgba(0,0,0,.5);border-top-color:transparent;border-radius:100%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}.spinner:after{content:'';display:block;width:0;height:0;position:absolute;top:-6px;left:0;border:4px solid transparent;border-bottom-color:rgba(0,0,0,.5);-webkit-transform:rotate(45deg);transform:rotate(45deg)}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}p.toc{margin:0!important}p.toc ul{padding-left:10px}p.toc>ul{padding:10px;margin:0 10px;display:inline-block;border:1px solid #ededed;border-radius:5px}p.toc li,p.toc ul{list-style-type:none}p.toc li{width:100%;padding:0;overflow:hidden}p.toc li a::after{content:"."}p.toc li a:before{content:"• "}p.toc h5{text-transform:uppercase}p.toc .title{float:left;padding-right:3px}p.toc .number{margin:0;float:right;padding-left:3px;background:#fff;display:none}input.task-list-item{margin-left:-1.62em}.markdown{font-family:"Hiragino Sans GB","Microsoft YaHei",STHeiti,SimSun,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",'Segoe UI',AppleSDGothicNeo-Medium,'Malgun Gothic',Verdana,Tahoma,sans-serif;padding:20px}.markdown a{text-decoration:none;vertical-align:baseline}.markdown a:hover{text-decoration:underline}.markdown h1{font-size:2.2em;font-weight:700;margin:1.5em 0 1em}.markdown h2{font-size:1.8em;font-weight:700;margin:1.275em 0 .85em}.markdown h3{font-size:1.6em;font-weight:700;margin:1.125em 0 .75em}.markdown h4{font-size:1.4em;font-weight:700;margin:.99em 0 .66em}.markdown h5{font-size:1.2em;font-weight:700;margin:.855em 0 .57em}.markdown h6{font-size:1em;font-weight:700;margin:.75em 0 .5em}.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child{margin-top:0}.markdown hr{border:1px solid #ccc}.markdown p{margin:1em 0;word-wrap:break-word}.markdown ol{list-style-type:decimal}.markdown li{display:list-item;line-height:1.4em}.markdown blockquote{margin:1em 20px}.markdown blockquote>:first-child{margin-top:0}.markdown blockquote>:last-child{margin-bottom:0}.markdown blockquote cite:before{content:'\2014 \00A0'}.markdown .code{border-radius:3px;word-wrap:break-word}.markdown pre{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;overflow:auto;padding:.5em}.markdown pre code{border:0;display:block}.markdown pre>code{font-family:Consolas,Inconsolata,Courier,monospace;font-weight:700;white-space:pre;margin:0}.markdown code{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;padding:0 5px;margin:0 2px}.markdown img{max-width:100%}.markdown mark{color:#000;background-color:#fcf8e3}.markdown table{padding:0;border-collapse:collapse;border-spacing:0;margin-bottom:16px}.markdown table tr td,.markdown table tr th{border:1px solid #ccc;margin:0;padding:6px 13px}.markdown table tr th{font-weight:700}.markdown table tr th>:first-child{margin-top:0}.markdown table tr th>:last-child{margin-bottom:0}.markdown table tr td>:first-child{margin-top:0}.markdown table tr td>:last-child{margin-bottom:0}.github{padding:20px;font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",STHeiti,SimSun,"Segoe UI",AppleSDGothicNeo-Medium,'Malgun Gothic',Arial,freesans,sans-serif;font-size:15px;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}.github a{color:#3269a0}.github a:hover{color:#4183c4}.github h2{border-bottom:1px solid #e6e6e6;line-height:1.6}.github h6{color:#777}.github hr{border:1px solid #e6e6e6}.github pre>code{font-size:.9em;font-family:Consolas,Inconsolata,Courier,monospace}.github blockquote>code,.github h1>code,.github h2>code,.github h3>code,.github h4>code,.github h5>code,.github h6>code,.github li>code,.github p>code,.github td>code{background-color:rgba(0,0,0,.07);font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:85%;padding:.2em .5em;border:0}.github blockquote{border-left:4px solid #e6e6e6;padding:0 15px;font-style:italic}.github table{background-color:#fafafa}.github table tr td,.github table tr th{border:1px solid #e6e6e6}.github table tr:nth-child(2n){background-color:#f2f2f2}.hljs{display:block;overflow-x:auto;padding:.5em;background:#fdf6e3;color:#657b83;-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.lisp .hljs-string{color:#93a1a1}.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title{color:#859900}.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#2aa198}.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal{color:#268bd2}.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number{color:#b58900}.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label{color:#6c71c4}.tex .hljs-formula{background:#eee8d5}.MathJax_Hover_Frame{border-radius:.25em;-webkit-border-radius:.25em;-moz-border-radius:.25em;-khtml-border-radius:.25em;box-shadow:0 0 15px #83A;-webkit-box-shadow:0 0 15px #83A;-moz-box-shadow:0 0 15px #83A;-khtml-box-shadow:0 0 15px #83A;border:1px solid #A6D!important;display:inline-block;position:absolute}.MathJax_Hover_Arrow{position:absolute;width:15px;height:11px;cursor:pointer}#MathJax_About{position:fixed;left:50%;width:auto;text-align:center;border:3px outset;padding:1em 2em;background-color:#DDD;color:#000;cursor:default;font-family:message-box;font-size:120%;font-style:normal;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;-khtml-border-radius:15px;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}.MathJax_Menu{position:absolute;background-color:#fff;color:#000;width:auto;padding:2px;border:1px solid #CCC;margin:0;cursor:default;font:menu;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}.MathJax_MenuItem{padding:2px 2em;background:0 0}.MathJax_MenuArrow{position:absolute;right:.5em;color:#666}.MathJax_MenuActive .MathJax_MenuArrow{color:#fff}.MathJax_MenuArrow.RTL{left:.5em;right:auto}.MathJax_MenuCheck{position:absolute;left:.7em}.MathJax_MenuCheck.RTL{right:.7em;left:auto}.MathJax_MenuRadioCheck{position:absolute;left:1em}.MathJax_MenuRadioCheck.RTL{right:1em;left:auto}.MathJax_MenuLabel{padding:2px 2em 4px 1.33em;font-style:italic}.MathJax_MenuRule{border-top:1px solid #CCC;margin:4px 1px 0}.MathJax_MenuDisabled{color:GrayText}.MathJax_MenuActive{background-color:Highlight;color:HighlightText}.MathJax_Menu_Close{position:absolute;width:31px;height:31px;top:-15px;left:-15px}#MathJax_Zoom{position:absolute;background-color:#F0F0F0;overflow:auto;display:block;z-index:301;padding:.5em;border:1px solid #000;margin:0;font-weight:400;font-style:normal;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;box-shadow:5px 5px 15px #AAA;-webkit-box-shadow:5px 5px 15px #AAA;-moz-box-shadow:5px 5px 15px #AAA;-khtml-box-shadow:5px 5px 15px #AAA;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}#MathJax_ZoomOverlay{position:absolute;left:0;top:0;z-index:300;display:inline-block;width:100%;height:100%;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}#MathJax_ZoomFrame{position:relative;display:inline-block;height:0;width:0}#MathJax_ZoomEventTrap{position:absolute;left:0;top:0;z-index:302;display:inline-block;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}.MathJax_Preview{color:#888}#MathJax_Message{position:fixed;left:1px;bottom:2px;background-color:#E6E6E6;border:1px solid #959595;margin:0;padding:2px 8px;z-index:102;color:#000;font-size:80%;width:auto;white-space:nowrap}#MathJax_MSIE_Frame{position:absolute;top:0;left:0;width:0;z-index:101;border:0;margin:0;padding:0}.MathJax_Error{color:#C00;font-style:italic}footer{position:fixed;font-size:.8em;text-align:right;bottom:0;margin-left:-25px;height:20px;width:100%}</style>
</head>
<body class="markdown github">
<h1 id="nkia-javascript/react-style-guide"><a name="nkia-javascript/react-style-guide" href="#nkia-javascript/react-style-guide"></a>NKIA Javascript/React Style Guide</h1><p><strong> 본 스타일 가이드는 ES2015(ES6) 기준입니다. </strong><br><em>※ <a href="https://github.com/airbnb/javascript">Based on Airbnb JavaScript Stytle Guide</a></em></p><h2 id="javascript-목차"><a name="javascript-목차" href="#javascript-목차"></a>Javascript 목차</h2><ol>
<li><a href="#참조references">참조(References)</a></li><li><a href="#오브젝트objects">오브젝트(Objects)</a></li><li><a href="#배열arrays">배열(Arrays)</a></li><li><a href="#구조화대입destructuring">구조화대입(Destructuring)</a></li><li><a href="#문자열strings">문자열(Strings)</a></li><li><a href="#함수functions">함수(Functions)</a></li><li><a href="#arrow함수arrow-functions">Arrow함수(Arrow Functions)</a></li><li><a href="#classes--constructors">Classes &amp; Constructors</a></li><li><a href="#모듈modules">모듈(Modules)</a></li><li><a href="#이터레이터와-제너레이터iterators-and-generators">이터레이터와 제너레이터(Iterators and Generators)</a></li><li><a href="#프로퍼티properties">프로퍼티(Properties)</a></li><li><a href="#변수variables">변수(Variables)</a></li><li><a href="#hoisting">Hoisting</a></li><li><a href="#조건식과-등가식comparison-operators--equality">조건식과 등가식(Comparison Operators &amp; Equality)</a></li><li><a href="#블록blocks">블록(Blocks)</a></li><li><a href="#코멘트comments">코멘트(Comments)</a></li><li><a href="#공백whitespace">공백(Whitespace)</a></li><li><a href="#콤마commas">콤마(Commas)</a></li><li><a href="#세미콜론semicolons">세미콜론(Semicolons)</a></li><li><a href="#형변환과-강제type-casting--coercion">형변환과 강제(Type Casting &amp; Coercion)</a></li><li><a href="#명명규칙naming-conventions">명명규칙(Naming Conventions)</a></li><li><a href="#억세서accessors">억세서(Accessors)</a></li><li><a href="#이벤트events">이벤트(Events)</a></li><li><a href="#jquery">jQuery</a></li><li><a href="#비동기-처리promise">비동기 처리(Promise)</a></li><li><a href="#비동기-통신axios">비동기 통신(Axios)</a></li></ol><h2 id="react-목차"><a name="react-목차" href="#react-목차"></a>React 목차</h2><ol>
<li><a href="#기본규칙">기본규칙</a></li><li><a href="#class-vs-reactcreateclass-vs-stateless">Class vs <code>React.createClass</code> vs stateless</a></li><li><a href="#명명규칙">명명규칙</a></li><li><a href="#선언">선언</a></li><li><a href="#정렬">정렬</a></li><li><a href="#따옴표">따옴표</a></li><li><a href="#띄어쓰기">띄어쓰기</a></li><li><a href="#속성">속성</a></li><li><a href="#참조">참조</a></li><li><a href="#괄호">괄호</a></li><li><a href="#태그">태그</a></li><li><a href="#메소드">메소드</a></li><li><a href="#순서">순서</a></li><li><a href="#ismounted"><code>isMounted</code></a></li></ol><h2 id="참조(references)"><a name="참조(references)" href="#참조(references)"></a>참조(References)</h2><ul>
<li><p><a href="#1.1">1.1</a> <a name="1.1"></a> 모든 참조에 대해서 <code>const</code> 를 사용하고, <code>var</code> 를 사용하지 마십시오.</p>
<blockquote>
<p>참조를 재할당 할 수 없으므로, 버그로 이어지고 이해하기 어려운 코드가 되는것을 방지합니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;
<span class="hljs-keyword">var</span> b = <span class="hljs-number">2</span>;

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> a = <span class="hljs-number">1</span>;
<span class="hljs-keyword">const</span> b = <span class="hljs-number">2</span>;
</code></pre>
</li><li><p><a href="#1.2">1.2</a> <a name="1.2"></a> 참조를 재할당 해야한다면 <code>var</code> 대신 <code>let</code> 을 사용하십시오.</p>
<blockquote>
<p><code>var</code>는 함수스코프인데 비하여, <code>let</code>은 블록스코프이기 때문에 변수스코프에 대해 명확해집니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">var</span> count = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) {
  count += <span class="hljs-number">1</span>;
}

<span class="hljs-comment">// good, use the let.</span>
<span class="hljs-keyword">let</span> count = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) {
  count += <span class="hljs-number">1</span>;
}
</code></pre>
</li><li><p><a href="#1.3">1.3</a> <a name="1.3"></a> <code>var</code>와 달리 <code>let</code> 과 <code>const</code> 는 같이 블록스코프라는 것을 유념하세요.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// const and let only exist in the blocks they are defined in.
// const 와 let 은 선언된 블록의 안에서만 존재합니다.
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
</code></pre>"><span class="hljs-comment">// const and let only exist in the blocks they are defined in.</span>
<span class="hljs-comment">// const 와 let 은 선언된 블록의 안에서만 존재합니다.</span>
{
  <span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;
  <span class="hljs-keyword">const</span> b = <span class="hljs-number">1</span>;
}
<span class="hljs-built_in">console</span>.log(a); <span class="hljs-comment">// ReferenceError</span>
<span class="hljs-built_in">console</span>.log(b); <span class="hljs-comment">// ReferenceError</span>
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="오브젝트(objects)"><a name="오브젝트(objects)" href="#오브젝트(objects)"></a>오브젝트(Objects)</h2><ul>
<li><p><a href="#2.1">2.1</a> <a name="2.1"></a> 오브젝트를 작성할때는, 리터럴 구문을 사용하십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const item = new Object();

// good
const item = {};
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> item = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Object</span>();

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> item = {};
</code></pre>
</li><li><p><a href="#2.2">2.2</a> <a name="2.2"></a> 코드가 브라우저상의 스크립트로 실행될때 <a href="http://es5.github.io/#x7.6.1">예약어</a>를 키로 이용하지 마십시오. IE8에서 작동하지 않습니다. <a href="https://github.com/airbnb/javascript/issues/61">More info</a> 하지만 ES6 모듈안이나 서버사이드에서는 이용가능합니다.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const superman = {
  default: { clark: 'kent' },
  private: true,
};

// good
const superman = {
  defaults: { clark: 'kent' },
  hidden: true,
};
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> superman = {
  <span class="hljs-keyword">default</span>: { clark: <span class="hljs-string">'kent'</span> },
  private: <span class="hljs-literal">true</span>,
};

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> superman = {
  defaults: { clark: <span class="hljs-string">'kent'</span> },
  hidden: <span class="hljs-literal">true</span>,
};
</code></pre>
</li><li><p><a href="#2.3">2.3</a> <a name="2.3"></a> 예약어 대신 알기쉬운 동의어를 사용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const superman = {
  class: 'alien',
};

// bad
const superman = {
  klass: 'alien',
};

// good
const superman = {
  type: 'alien',
};
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> superman = {
  <span class="hljs-keyword">class</span>: <span class="hljs-string">'alien'</span>,
};

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> superman = {
  klass: <span class="hljs-string">'alien'</span>,
};

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> superman = {
  type: <span class="hljs-string">'alien'</span>,
};
</code></pre>
<p><a name="es6-object-concise"></a></p>
</li><li><p><a href="#2.4">2.4</a> <a name="2.4"></a> 프로퍼티의 단축구문을 이용해 주십시오.</p>
<blockquote>
<p>기술과 설명이 간결해집니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};
</code></pre>"><span class="hljs-keyword">const</span> lukeSkywalker = <span class="hljs-string">'Luke Skywalker'</span>;

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> obj = {
  lukeSkywalker: lukeSkywalker,
};

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> obj = {
  lukeSkywalker,
};
</code></pre>
</li><li><p><a href="#2.5">2.5</a> <a name="2.5"></a> 프로퍼티의 단축구문은 오브젝트 선언의 시작부분에 그룹화 해주십시오.</p>
<blockquote>
<p>어떤 프로퍼티가 단축구문을 이용하고 있는지가 알기쉽기 때문입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};
</code></pre>"><span class="hljs-keyword">const</span> anakinSkywalker = <span class="hljs-string">'Anakin Skywalker'</span>;
<span class="hljs-keyword">const</span> lukeSkywalker = <span class="hljs-string">'Luke Skywalker'</span>;

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> obj = {
  episodeOne: <span class="hljs-number">1</span>,
  twoJediWalkIntoACantina: <span class="hljs-number">2</span>,
  lukeSkywalker,
  episodeThree: <span class="hljs-number">3</span>,
  mayTheFourth: <span class="hljs-number">4</span>,
  anakinSkywalker,
};

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: <span class="hljs-number">1</span>,
  twoJediWalkIntoACantina: <span class="hljs-number">2</span>,
  episodeThree: <span class="hljs-number">3</span>,
  mayTheFourth: <span class="hljs-number">4</span>,
};
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="배열(arrays)"><a name="배열(arrays)" href="#배열(arrays)"></a>배열(Arrays)</h2><ul>
<li><p><a href="#3.1">3.1</a> <a name="3.1"></a> 배열을 작성 할 때는 리터럴 구문을 사용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const items = new Array();

// good
const items = [];
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> items = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>();

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> items = [];
</code></pre>
</li><li><p><a href="#3.2">3.2</a> <a name="3.2"></a> 직접 배열에 항목을 대입하지 말고, Array#push를 이용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');
</code></pre>"><span class="hljs-keyword">const</span> someStack = [];

<span class="hljs-comment">// bad</span>
someStack[someStack.length] = <span class="hljs-string">'abracadabra'</span>;

<span class="hljs-comment">// good</span>
someStack.push(<span class="hljs-string">'abracadabra'</span>);
</code></pre>
<p><a name="es6-array-spreads"></a></p>
</li><li><p><a href="#3.3">3.3</a> <a name="3.3"></a> 배열을 복사할때는 배열의 확장연산자 <code>...</code> 를 이용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i &amp;lt; len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> len = items.length;
<span class="hljs-keyword">const</span> itemsCopy = [];
<span class="hljs-keyword">let</span> i;

<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i &lt; len; i++) {
  itemsCopy[i] = items[i];
}

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> itemsCopy = [...items];
</code></pre>
</li><li><p><a href="#3.4">3.4</a> <a name="3.4"></a> array-like 오브젝트를 배열로 변환하는 경우는 Array#from을 이용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
</code></pre>"><span class="hljs-keyword">const</span> foo = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'.foo'</span>);
<span class="hljs-keyword">const</span> nodes = <span class="hljs-built_in">Array</span>.from(foo);
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="구조화대입(destructuring)"><a name="구조화대입(destructuring)" href="#구조화대입(destructuring)"></a>구조화대입(Destructuring)</h2><ul>
<li><p><a href="#4.1">4.1</a> <a name="4.1"></a> 하나의 오브젝트에서 복수의 프로퍼티를 억세스 할 때는 오브젝트 구조화대입을 이용해 주십시오.</p>
<blockquote>
<p>구조화대입을 이용하는 것으로 프로퍼티를 위한 임시적인 참조의 작성을 줄이며, 가독성을 향상시킵니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFullName</span><span class="hljs-params">(user)</span> </span>{
  <span class="hljs-keyword">const</span> firstName = user.firstName;
  <span class="hljs-keyword">const</span> lastName = user.lastName;

  <span class="hljs-keyword">return</span> `${firstName} ${lastName}`;
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFullName</span><span class="hljs-params">(obj)</span> </span>{
  <span class="hljs-keyword">const</span> { firstName, lastName } = obj;
  <span class="hljs-keyword">return</span> `${firstName} ${lastName}`;
}

<span class="hljs-comment">// best</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFullName</span><span class="hljs-params">({ firstName, lastName })</span> </span>{
  <span class="hljs-keyword">return</span> `${firstName} ${lastName}`;
}
</code></pre>
</li><li><p><a href="#4.2">4.2</a> <a name="4.2"></a> 배열의 구조화대입을 이용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;
</code></pre>"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>];

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> first = arr[<span class="hljs-number">0</span>];
<span class="hljs-keyword">const</span> second = arr[<span class="hljs-number">1</span>];

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> [first, second] = arr;
</code></pre>
</li><li><p><a href="#4.3">4.3</a> <a name="4.3"></a> 복수의 값을 반환하는 경우는 배열의 구조화대입이 아닌 오브젝트의 구조화대입을 이용해 주십시오.</p>
<blockquote>
<p>호출처에 영향을 주지않고 새로운 프로퍼티를 추가하거나 순서를 변경할수 있습니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
// 호출처에서 반환된 데이터의 순서를 고려할 필요가 있습니다.
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return { left, right, top, bottom };
}

// the caller selects only the data they need
// 호출처에서는 필요한 데이터만 선택하면 됩니다.
const { left, right } = processInput(input);
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">processInput</span><span class="hljs-params">(input)</span> </span>{
  <span class="hljs-comment">// then a miracle occurs</span>
  <span class="hljs-comment">// 그리고 기적이 일어납니다.</span>
  <span class="hljs-keyword">return</span> [left, right, top, bottom];
}

<span class="hljs-comment">// the caller needs to think about the order of return data</span>
<span class="hljs-comment">// 호출처에서 반환된 데이터의 순서를 고려할 필요가 있습니다.</span>
<span class="hljs-keyword">const</span> [left, __, top] = processInput(input);

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">processInput</span><span class="hljs-params">(input)</span> </span>{
  <span class="hljs-comment">// then a miracle occurs</span>
  <span class="hljs-comment">// 그리고 기적이 일어납니다.</span>
  <span class="hljs-keyword">return</span> { left, right, top, bottom };
}

<span class="hljs-comment">// the caller selects only the data they need</span>
<span class="hljs-comment">// 호출처에서는 필요한 데이터만 선택하면 됩니다.</span>
<span class="hljs-keyword">const</span> { left, right } = processInput(input);
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="문자열(strings)"><a name="문자열(strings)" href="#문자열(strings)"></a>문자열(Strings)</h2><ul>
<li><p><a href="#5.1">5.1</a> <a name="5.1"></a> 문자열에는 홑따옴표 <code>''</code> 를 사용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const name = &quot;Capt. Janeway&quot;;

// good
const name = 'Capt. Janeway';
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> name = <span class="hljs-string">"Capt. Janeway"</span>;

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> name = <span class="hljs-string">'Capt. Janeway'</span>;
</code></pre>
</li><li><p><a href="#5.2">5.2</a> <a name="5.2"></a> 100 문자 이상의 문자열은 문자열 연결(+)을 이용하여 여러 줄에 나뉘어 표현하세요.</p>
</li><li><p><a href="#5.3">5.3</a> <a name="5.3"></a> 주의: 문자연결을 과용하면 성능에 영향을 미칠 수 있습니다. <a href="http://jsperf.com/ya-string-concat">jsPerf</a> &amp; <a href="https://github.com/airbnb/javascript/issues/40">Discussion</a>.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// good
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> errorMessage = <span class="hljs-string">'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'</span>;

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> errorMessage = <span class="hljs-string">'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.'</span>;

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> errorMessage = <span class="hljs-string">'This is a super long error that was thrown because '</span> +
  <span class="hljs-string">'of Batman. When you stop to think about how Batman had anything to do '</span> +
  <span class="hljs-string">'with this, you would get nowhere fast.'</span>;
</code></pre>
<p><a name="es6-template-literals"></a></p>
</li><li><p><a href="#5.4">5.4</a> <a name="5.4"></a> 프로그램에서 문자열을 생성하는 경우는 문자열 연결이 아닌 template strings를 이용해 주십시오.</p>
<blockquote>
<p>Template strings 는 문자열 보간기능과 적절한 줄바꿈 기능을 갖는 간결한 구문으로 가독성이 좋기 때문입니다. 또한 엔터키를 사용하여 Multi-line 표현이 가능합니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHi</span><span class="hljs-params">(name)</span> </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-string">'How are you, '</span> + name + <span class="hljs-string">'?'</span>;
}

<span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHi</span><span class="hljs-params">(name)</span> </span>{
  <span class="hljs-keyword">return</span> [<span class="hljs-string">'How are you, '</span>, name, <span class="hljs-string">'?'</span>].join();
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHi</span><span class="hljs-params">(name)</span> </span>{
  <span class="hljs-keyword">return</span> `How are you, ${name}?`;
}
</code></pre>
</li><li><a href="#5.5">5.5</a> <a name="5.5"></a> 절대로 <code>eval()</code> 을 이용하지 마십시오. 이것은 많은 취약점을 만들기 때문입니다.</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="함수(functions)"><a name="함수(functions)" href="#함수(functions)"></a>함수(Functions)</h2><ul>
<li><p><a href="#6.1">6.1</a> <a name="6.1"></a> 함수식 보다 함수선언을 이용해 주십시오.</p>
<blockquote>
<p>왜? 이름이 부여된 함수선언은 콜스택에서 간단하게 확인하는 것이 가능합니다. 또한 함수선언은 함수의 본체가 hoist 되어집니다. 그에 반해 함수식은 참조만이 hoist 되어집니다.<br>이 룰에 의해 함수식의 부분을 항상 <a href="#arrow함수arrow-functions">Arrow함수</a>에서 이용하는것이 가능합니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const foo = function () {
};

// good
function foo() {
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> foo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
};

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span> </span>{
}
</code></pre>
</li><li><p><a href="#6.2">6.2</a> <a name="6.2"></a> 함수식(Function Expression)은 다음과 같이 사용하세요.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// immediately-invoked function expression (IIFE)
// 즉시 실행 함수식(IIFE)
(() =&amp;gt; {
  console.log('Welcome to the Internet. Please follow me.');
})();
</code></pre>"><span class="hljs-comment">// immediately-invoked function expression (IIFE)</span>
<span class="hljs-comment">// 즉시 실행 함수식(IIFE)</span>
(() =&gt; {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Welcome to the Internet. Please follow me.'</span>);
})();
</code></pre>
</li><li><p><a href="#6.3">6.3</a> <a name="6.3"></a> 함수이외의 블록 (if나 while같은) 안에서 함수를 선언하지 마십시오. 변수에 함수를 대입하는 대신 브라우저들은 그것을 허용하지만 모두가 다르게 해석합니다.</p>
</li></ul><ul>
<li><p><a href="#6.4">6.4</a> <a name="6.4"></a> <strong>주의:</strong> ECMA-262 사양에서는 <code>block</code> 은 statements의 일람으로 정의되어 있지만 함수선언은 statements 가 아닙니다. <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97">Read ECMA-262’s note on this issue</a>.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
let test;
if (currentUser) {
  test = () =&amp;gt; {
    console.log('Yup.');
  };
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">if</span> (currentUser) {
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Nope.'</span>);
  }
}

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">let</span> test;
<span class="hljs-keyword">if</span> (currentUser) {
  test = () =&gt; {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Yup.'</span>);
  };
}
</code></pre>
</li><li><p><a href="#6.5">6.5</a> <a name="6.5"></a> 절대 파라메터에 <code>arguments</code> 를 지정하지 마십시오. 이것은 함수스코프에 전해지는  <code>arguments</code> 오브젝트의 참조를 덮어써 버립니다.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">nope</span><span class="hljs-params">(name, options, arguments)</span> </span>{
  <span class="hljs-comment">// ...stuff...</span>
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">yup</span><span class="hljs-params">(name, options, args)</span> </span>{
  <span class="hljs-comment">// ...stuff...</span>
}
</code></pre>
<p><a name="es6-rest"></a></p>
</li><li><p><a href="#6.6">6.6</a> <a name="6.6"></a> 절대 <code>arguments</code> 를 이용하지 마십시오. 대신에 rest syntax <code>...</code> 를 이용해 주십시오.</p>
<blockquote>
<p><code>...</code> 을 이용하는것으로 몇개의 파라메터를 이용하고 싶은가를 확실하게 할 수 있습니다. 더해서 rest 파라메터는 <code>arguments</code> 와 같은 Array-like 오브젝트가 아닌 진짜 Array 입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">concatenateAll</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">const</span> args = <span class="hljs-built_in">Array</span>.prototype.slice.call(<span class="hljs-built_in">arguments</span>);
  <span class="hljs-keyword">return</span> args.join(<span class="hljs-string">''</span>);
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">concatenateAll</span><span class="hljs-params">(...args)</span> </span>{
  <span class="hljs-keyword">return</span> args.join(<span class="hljs-string">''</span>);
}
</code></pre>
<p><a name="es6-default-parameters"></a></p>
</li><li><p><a href="#6.7">6.7</a> <a name="6.7"></a> 함수의 파라메터를 변이시키는 것보다 default 파라메터를 이용해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// really bad
function handleThings(opts) {
  // 안돼！함수의 파라메터를 변이시키면 안됩니다.
  // 만약 opts가 falsy 하다면 바라는데로 오브젝트가 설정됩니다.
  // 하지만 미묘한 버그를 일으킬지도 모릅니다.
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}
</code></pre>"><span class="hljs-comment">// really bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleThings</span><span class="hljs-params">(opts)</span> </span>{
  <span class="hljs-comment">// 안돼！함수의 파라메터를 변이시키면 안됩니다.</span>
  <span class="hljs-comment">// 만약 opts가 falsy 하다면 바라는데로 오브젝트가 설정됩니다.</span>
  <span class="hljs-comment">// 하지만 미묘한 버그를 일으킬지도 모릅니다.</span>
  opts = opts || {};
  <span class="hljs-comment">// ...</span>
}

<span class="hljs-comment">// still bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleThings</span><span class="hljs-params">(opts)</span> </span>{
  <span class="hljs-keyword">if</span> (opts === <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>) {
    opts = {};
  }
  <span class="hljs-comment">// ...</span>
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleThings</span><span class="hljs-params">(opts = {})</span> </span>{
  <span class="hljs-comment">// ...</span>
}
</code></pre>
</li><li><p><a href="#6.8">6.8</a> <a name="6.8"></a> side effect가 있을 default 파라메터의 이용은 피해 주십시오.</p>
<blockquote>
<p>혼란을 야기하기 때문입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3
</code></pre>"><span class="hljs-keyword">var</span> b = <span class="hljs-number">1</span>;
<span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">count</span><span class="hljs-params">(a = b++)</span> </span>{
<span class="hljs-built_in">console</span>.log(a);
}
count();  <span class="hljs-comment">// 1</span>
count();  <span class="hljs-comment">// 2</span>
count(<span class="hljs-number">3</span>); <span class="hljs-comment">// 3</span>
count();  <span class="hljs-comment">// 3</span>
</code></pre>
</li><li><p><a href="#6.9">6.9</a> <a name="6.9"></a> 항상 default 파라메터는 뒤쪽에 두십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleThings</span><span class="hljs-params">(opts = {}, name)</span> </span>{
  <span class="hljs-comment">// ...</span>
}

<span class="hljs-comment">// good</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleThings</span><span class="hljs-params">(name, opts = {})</span> </span>{
  <span class="hljs-comment">// ...</span>
}
</code></pre>
</li><li><p><a href="#6.10">6.10</a> <a name="6.10"></a> 절대 새 함수를 작성하기 위해 Function constructor를 이용하지 마십시오.</p>
<blockquote>
<p>Why? Creating a function in this way evaluates a string similarly to eval(), which opens vulnerabilities.</p>
<p>왜? 이 방법으로 문자열을 평가시켜 새 함수를 작성하는것은 eval() 과 같은 수준의 취약점을 일으킬 수 있습니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">var</span> add = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Function</span>(<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'return a + b'</span>);

<span class="hljs-comment">// still bad</span>
<span class="hljs-keyword">var</span> subtract = <span class="hljs-built_in">Function</span>(<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'return a - b'</span>);
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="arrow함수(arrow-functions)"><a name="arrow함수(arrow-functions)" href="#arrow함수(arrow-functions)"></a>Arrow함수(Arrow Functions)</h2><ul>
<li><p><a href="#7.1">7.1</a> <a name="7.1"></a> (무명함수를 전달하는 듯한)함수식을 이용하는 경우 arrow함수 표기를 이용해 주십시오.</p>
<blockquote>
<p>arrow함수는 그 context의 <code>this</code> 에서 실행하는 버전의 함수를 작성합니다. 이것은 통상 기대대로 동작 하고, 보다 간결한 구문이기 때문입니다.<br>단, 복잡한 함수에서 로직을 정의한 함수의 바깥으로 이동하고 싶을때는 사용합니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) =&amp;gt; {
  const y = x + 1;
  return x * y;
});
</code></pre>"><span class="hljs-comment">// bad</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(x)</span> </span>{
  <span class="hljs-keyword">const</span> y = x + <span class="hljs-number">1</span>;
  <span class="hljs-keyword">return</span> x * y;
});

<span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map((x) =&gt; {
  <span class="hljs-keyword">const</span> y = x + <span class="hljs-number">1</span>;
  <span class="hljs-keyword">return</span> x * y;
});
</code></pre>
</li><li><p><a href="#7.2">7.2</a> <a name="7.2"></a> 함수의 본체가 하나의 식으로 구성된 경우에는 중괄호({})를 생략하고 암시적 return을 이용하는것이 가능합니다. 그 외에는 <code>return</code> 문을 이용해 주십시오.</p>
<blockquote>
<p>복수의 함수가 연결된 경우에 읽기 쉬워집니다. 단, Object를 반환할 때에는 <code>return</code>문을 사용하세요.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// good
[1, 2, 3].map(number =&amp;gt; `A string containing the ${number}.`);

// bad
[1, 2, 3].map(number =&amp;gt; {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map(number =&amp;gt; {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});
</code></pre>"><span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(number =&gt; `A string containing the ${number}.`);

<span class="hljs-comment">// bad</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(number =&gt; {
  <span class="hljs-keyword">const</span> nextNumber = number + <span class="hljs-number">1</span>;
  `A string containing the ${nextNumber}.`;
});

<span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(number =&gt; {
  <span class="hljs-keyword">const</span> nextNumber = number + <span class="hljs-number">1</span>;
  <span class="hljs-keyword">return</span> `A string containing the ${nextNumber}.`;
});
</code></pre>
</li><li><p><a href="#7.3">7.3</a> <a name="7.3"></a> 식이 복수행에 걸쳐있을 경우는 가독성을 더욱 좋게하기 위해 소괄호()로 감싸 주십시오.</p>
<blockquote>
<p>함수의 개시와 종료부분의 가독성이 좋아집니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="js" data-origin="<pre><code class=&quot;js&quot;>// bad
[1, 2, 3].map(number =&amp;gt; 'As time went by, the string containing the ' +
  `${number} became much longer. So we needed to break it over multiple ` +
  'lines.'
);

// good
[1, 2, 3].map(number =&amp;gt; (
  `As time went by, the string containing the ${number} became much ` +
  'longer. So we needed to break it over multiple lines.'
));
</code></pre>"><span class="hljs-comment">// bad</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(number =&gt; <span class="hljs-string">'As time went by, the string containing the '</span> +
  `${number} became much longer. So we needed to <span class="hljs-keyword">break</span> it over multiple ` +
  <span class="hljs-string">'lines.'</span>
);

<span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(number =&gt; (
  `As time went by, the string containing the ${number} became much ` +
  <span class="hljs-string">'longer. So we needed to break it over multiple lines.'</span>
));
</code></pre>
</li><li><p><a href="#7.4">7.4</a> <a name="7.4"></a> 함수의 인수가 하나인 경우 소괄호()를 생략하는게 가능합니다.</p>
<blockquote>
<p>Why? Less visual clutter.</p>
<p>왜? 별로 보기 어렵지 않기 때문입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// good
[1, 2, 3].map(x =&amp;gt; x * x);

// good
[1, 2, 3].reduce((y, x) =&amp;gt; x + y);
</code></pre>"><span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(x =&gt; x * x);

<span class="hljs-comment">// good</span>
[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].reduce((y, x) =&gt; x + y);
</code></pre>
</li></ul><p><strong><a href="#목차">↑ 목차로 이동</a></strong></p><h2 id="classes-&amp;-constructors"><a name="classes-&amp;-constructors" href="#classes-&amp;-constructors"></a>Classes &amp; Constructors</h2><ul>
<li><p><a href="#8.1">8.1</a> <a name="9.1"></a> <code>prototype</code> 을 직접 조작하는것을 피하고 항상 <code>class</code> 를 이용해 주십시오.</p>
<blockquote>
<p><code>class</code> 구문은 간결하고 의미를 알기 쉽기 때문입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Queue</span><span class="hljs-params">(contents = [])</span> </span>{
  <span class="hljs-keyword">this</span>._queue = [...contents];
}
Queue.prototype.pop = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">const</span> value = <span class="hljs-keyword">this</span>._queue[<span class="hljs-number">0</span>];
  <span class="hljs-keyword">this</span>._queue.splice(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
  <span class="hljs-keyword">return</span> value;
}

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">class</span> Queue {
  constructor(contents = []) {
    <span class="hljs-keyword">this</span>._queue = [...contents];
  }
  pop() {
    <span class="hljs-keyword">const</span> value = <span class="hljs-keyword">this</span>._queue[<span class="hljs-number">0</span>];
    <span class="hljs-keyword">this</span>._queue.splice(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
    <span class="hljs-keyword">return</span> value;
  }
}
</code></pre>
</li><li><p><a href="#8.2">8.2</a> <a name="8.2"></a> 상속은 <code>extends</code> 를 이용해 주십시오.</p>
<blockquote>
<p><code>instanceof</code> 를 파괴하지 않고 프로토타입 상속을 하기 위해 빌트인 된 방법이기 때문입니다.</p>
</blockquote>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
  return this._queue[0];
}

// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> inherits = <span class="hljs-built_in">require</span>(<span class="hljs-string">'inherits'</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">PeekableQueue</span><span class="hljs-params">(contents)</span> </span>{
  Queue.apply(<span class="hljs-keyword">this</span>, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._queue[<span class="hljs-number">0</span>];
}

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">class</span> PeekableQueue extends Queue {
  peek() {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._queue[<span class="hljs-number">0</span>];
  }
}
</code></pre>
</li><li><p><a href="#8.3">8.3</a> <a name="8.3"></a> 메소드의 반환값으로 <code>this</code> 를 반환하는 것으로 메소드채이닝을 할 수 있습니다.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
Jedi.prototype.jump = function() {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function(height) {
  this.height = height;
};

const luke = new Jedi();
luke.jump(); // =&amp;gt; true
luke.setHeight(20); // =&amp;gt; undefined

// good
class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }

  setHeight(height) {
    this.height = height;
    return this;
  }
}

const luke = new Jedi();

luke.jump()
  .setHeight(20);
</code></pre>"><span class="hljs-comment">// bad</span>
Jedi.prototype.jump = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">this</span>.jumping = <span class="hljs-literal">true</span>;
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
};

Jedi.prototype.setHeight = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(height)</span> </span>{
  <span class="hljs-keyword">this</span>.height = height;
};

<span class="hljs-keyword">const</span> luke = <span class="hljs-keyword">new</span> Jedi();
luke.jump(); <span class="hljs-comment">// =&gt; true</span>
luke.setHeight(<span class="hljs-number">20</span>); <span class="hljs-comment">// =&gt; undefined</span>

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">class</span> Jedi {
  jump() {
    <span class="hljs-keyword">this</span>.jumping = <span class="hljs-literal">true</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
  }

  setHeight(height) {
    <span class="hljs-keyword">this</span>.height = height;
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
  }
}

<span class="hljs-keyword">const</span> luke = <span class="hljs-keyword">new</span> Jedi();

luke.jump()
  .setHeight(<span class="hljs-number">20</span>);
</code></pre>
</li></ul><ul>
<li><p><a href="#8.4">8.4</a> <a name="8.4"></a> toString()을 작성할 때 올바르게 동작하는지와 side effect 가 없는지 확인해 주십시오.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'no name';
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}
</code></pre>"><span class="hljs-keyword">class</span> Jedi {
  constructor(options = {}) {
    <span class="hljs-keyword">this</span>.name = options.name || <span class="hljs-string">'no name'</span>;
  }

  getName() {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.name;
  }

  toString() {
    <span class="hljs-keyword">return</span> `Jedi - ${<span class="hljs-keyword">this</span>.getName()}`;
  }
}
</code></pre>
</li></ul><p><strong><a href="#javascript-목차">↑ 목차로 이동</a></strong></p><h2 id="모듈(modules)"><a name="모듈(modules)" href="#모듈(modules)"></a>모듈(Modules)</h2><ul>
<li><p><a href="#9.1">9.1</a> <a name="9.1"></a> 비표준 모듈시스템이 아닌 항상 (<code>import</code>/<code>export</code>) 를 꼭 이용해 주십시오. 이렇게 함으로써 선호하는 모듈시스템에 언제라도 옮겨가는게 가능해 집니다.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;
</code></pre>"><span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> AirbnbStyleGuide = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./AirbnbStyleGuide'</span>);
<span class="hljs-built_in">module</span>.exports = AirbnbStyleGuide.es6;

<span class="hljs-comment">// ok</span>
import AirbnbStyleGuide from <span class="hljs-string">'./AirbnbStyleGuide'</span>;
export <span class="hljs-keyword">default</span> AirbnbStyleGuide.es6;

<span class="hljs-comment">// best</span>
import { es6 } from <span class="hljs-string">'./AirbnbStyleGuide'</span>;
export <span class="hljs-keyword">default</span> es6;
</code></pre>
</li><li><p><a href="#9.2">9.2</a> <a name="9.2"></a> wildcard import 는 사용하지 않습니다.</p>
<pre class="javascript hljs"><code class="javascript" data-origin="<pre><code class=&quot;javascript&quot;>// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
</code></pre>"><span class="hljs-comment">// bad</span>
import * as AirbnbStyleGuide from <span class="hljs-string">'./AirbnbStyleGuide'</span>;

<span class="hljs-comment">// good</span>
import AirbnbStyleGuide from <span class="hljs-string">'./AirbnbStyleGuide'</span>;
</code></pre>
</li><li><p><a href="#9.3">9.3</a> <a name="9.3"></a> import 문으로부터 직접 export 하는것은 사용하지 않습니다.</p>
<blockquote>