-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathfunctions.html
More file actions
862 lines (664 loc) · 187 KB
/
functions.html
File metadata and controls
862 lines (664 loc) · 187 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Functions</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Function Scoping, Currying, Immediately Invoked Function Expressions, Binding `this` and arguments, Named Functions, Functions with an Unknown Number of Arguments (variadic functions), Anonymous Function, Default parameters, Function Arguments, arguments object, rest and spread parameters, Passing arguments by reference or value, Call and apply, Partial Application, Function Composition, Functions as a variable, Recursive Function, Using the Return Statement, Get the name of a function object">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Functions">
<meta property="og:description" content="Function Scoping, Currying, Immediately Invoked Function Expressions, Binding `this` and arguments, Named Functions, Functions with an Unknown Number of Arguments (variadic functions), Anonymous Function, Default parameters, Function Arguments, arguments object, rest and spread parameters, Passing arguments by reference or value, Call and apply, Partial Application, Function Composition, Functions as a variable, Recursive Function, Using the Return Statement, Get the name of a function object">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/functions.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Functions">
<meta name="twitter:description" content="Function Scoping, Currying, Immediately Invoked Function Expressions, Binding `this` and arguments, Named Functions, Functions with an Unknown Number of Arguments (variadic functions), Anonymous Function, Default parameters, Function Arguments, arguments object, rest and spread parameters, Passing arguments by reference or value, Call and apply, Partial Application, Function Composition, Functions as a variable, Recursive Function, Using the Return Statement, Get the name of a function object">
<meta name="twitter:url" content="/javascript/functions.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1745.8bdea00b.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" class="sidebar-link">Strings</a></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" class="sidebar-link">Conditions</a></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" class="sidebar-link">Objects</a></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" class="sidebar-link">Bitwise operators</a></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" aria-current="page" class="active sidebar-link">Functions</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/functions.html#function-scoping" class="sidebar-link">Function Scoping</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#currying" class="sidebar-link">Currying</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#immediately-invoked-function-expressions" class="sidebar-link">Immediately Invoked Function Expressions</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#binding-this-and-arguments" class="sidebar-link">Binding this and arguments</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#named-functions" class="sidebar-link">Named Functions</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#functions-with-an-unknown-number-of-arguments-variadic-functions" class="sidebar-link">Functions with an Unknown Number of Arguments (variadic functions)</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#anonymous-function" class="sidebar-link">Anonymous Function</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#default-parameters" class="sidebar-link">Default parameters</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#function-arguments-arguments-object-rest-and-spread-parameters" class="sidebar-link">Function Arguments, "arguments" object, rest and spread parameters</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#passing-arguments-by-reference-or-value" class="sidebar-link">Passing arguments by reference or value</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#call-and-apply" class="sidebar-link">Call and apply</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#partial-application" class="sidebar-link">Partial Application</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#function-composition" class="sidebar-link">Function Composition</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#functions-as-a-variable" class="sidebar-link">Functions as a variable</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#recursive-function" class="sidebar-link">Recursive Function</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#using-the-return-statement" class="sidebar-link">Using the Return Statement</a></li><li class="sidebar-sub-header"><a href="/javascript/functions.html#get-the-name-of-a-function-object" class="sidebar-link">Get the name of a function object</a></li></ul></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="functions"><a href="#functions" class="header-anchor">#</a> Functions</h1> <p>Functions in JavaScript provide organized, reusable code to perform a set of actions. Functions simplify the coding process, prevent redundant logic, and make code easier to follow. This topic describes the declaration and utilization of functions, arguments, parameters, return statements and scope in JavaScript.</p> <h2 id="function-scoping"><a href="#function-scoping" class="header-anchor">#</a> Function Scoping</h2> <p>When you define a function, it creates a <strong>scope</strong>.</p> <p>Everything defined within the function is not accessible by code outside the
function. Only code within this scope can see the entities defined inside the
scope.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'hello'</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// reference error</span>
</code></pre></div><p>Nested functions are possible in JavaScript and the same rules apply.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'hello'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'world'</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'hello'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// reference error</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// reference error</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// reference error</span>
</code></pre></div><p>When JavaScript tries to resolve a reference or variable, it starts looking for
it in the current scope. If it cannot find that declaration in the current scope, it
climbs up one scope to look for it. This process repeats until the declaration has been found. If the JavaScript parser reaches the global scope and still cannot find the
reference, a reference error will be thrown.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token string">'!!'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'hello'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'world'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => '!!'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// reference error</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>This climbing behavior can also mean that one reference may "shadow" over a
similarly named reference in the outer scope since it gets seen first.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'world'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The way JavaScript resolves scoping also applies to the <code>const</code> keyword. Declaring a variable with the <code>const</code> keyword implies that you are not allowed to reassign the value, but declaring it in a function will create a new scope and with that a new variable.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// different variable</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// SyntaxError</span>
a <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// TypeError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token punctuation">}</span>
</code></pre></div><p>However, functions are not the only blocks that create a scope (if you are using <code>let</code> or <code>const</code>). <code>let</code> and <code>const</code> declarations have a scope of the nearest block statement. See <a href="http://stackoverflow.com/documentation/javascript/480/scope/1574/difference-between-var-and-let#t=201612210455387857533" target="_blank" rel="noopener noreferrer">here<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for a more detailed description.</p> <h2 id="currying"><a href="#currying" class="header-anchor">#</a> Currying</h2> <p><a href="https://en.wikipedia.org/wiki/Currying" target="_blank" rel="noopener noreferrer">Currying<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> is the transformation of a function of <code>n</code> arity or arguments into a sequence of <code>n</code> functions taking only one argument.</p> <p>Use cases: When the values of some arguments are available before others, you can use currying to decompose a function into a series of functions that complete the work in stages, as each value arrives. This can be useful:</p> <ul><li>When the value of an argument almost never changes (e.g., a conversion factor), but you need to maintain the flexibility of setting that value (rather than hard-coding it as a constant).</li> <li>When the result of a curried function is useful before the other curried functions have run.</li> <li>To validate the arrival of the functions in a specific sequence.</li></ul> <p>For example, the volume of a rectangular prism can be explained by a function of three factors: length (<code>l</code>), width (<code>w</code>), and height (<code>h</code>):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">prism</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">l<span class="token punctuation">,</span> w<span class="token punctuation">,</span> h</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> l <span class="token operator">*</span> w <span class="token operator">*</span> h<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>A curried version of this function would look like:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">prism</span><span class="token punctuation">(</span><span class="token parameter">l</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">w</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">h</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> l <span class="token operator">*</span> w <span class="token operator">*</span> h<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// alternatively, with concise ECMAScript 6+ syntax:</span>
<span class="token keyword">var</span> <span class="token function-variable function">prism</span> <span class="token operator">=</span> <span class="token parameter">l</span> <span class="token operator">=></span> <span class="token parameter">w</span> <span class="token operator">=></span> <span class="token parameter">h</span> <span class="token operator">=></span> l <span class="token operator">*</span> w <span class="token operator">*</span> h<span class="token punctuation">;</span>
</code></pre></div><p>You can call these sequence of functions with <code>prism(2)(3)(5)</code>, which should evaluate to 30.</p> <p>Without some extra machinery (like with libraries), currying is of limited syntactical flexibility in JavaScript (ES 5/6) due to the lack of placeholder
values; thus, while you can use <code>var a = prism(2)(3)</code> to create a <a href="https://en.wikipedia.org/wiki/Partial_application" rel="nofollow">partially
applied function</a>, you cannot use <code>prism()(3)(5)</code>.</p> <h2 id="immediately-invoked-function-expressions"><a href="#immediately-invoked-function-expressions" class="header-anchor">#</a> Immediately Invoked Function Expressions</h2> <p>Sometimes you don't want to have your function accessible/stored as a variable. You can create an Immediately Invoked Function Expression (IIFE for short). These are essentially <strong>self-executing anonymous functions</strong>. They have access to the surrounding scope, but the function itself and any internal variables will be inaccessible from outside. An important thing to note about IIFE is that even if you name your function, IIFE are not hoisted like standard functions are and cannot be called by the function name they are declared with.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span>"<span class="token constant">I</span><span class="token string">'ve run - but can'</span>t be run again because <span class="token constant">I</span>'m immediately invoked at runtime<span class="token punctuation">,</span>
leaving behind only the result <span class="token constant">I</span> generate"<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>This is another way to write IIFE. Notice that the closing parenthesis before the semicolon was moved and placed right after the closing curly bracket:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"This is IIFE too."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>You can easily pass parameters into an IIFE:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token string">"Hello World!"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Additionally, you can return values to the surrounding scope:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">42</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>example<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 42</span>
</code></pre></div><p>If required it is possible to name an IIFE. While less often seen, this pattern has several advantages, such as providing a reference which can be used for a recursion and can make debugging simpler as the name is included in the callstack.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">namedIIFE</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">throw</span> error<span class="token punctuation">;</span> <span class="token comment">// We can now see the error thrown in 'namedIIFE()'</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>While wrapping a function in parenthesis is the most common way to denote to the Javascript parser to expect an expression, in places where an expression is already expected, the notation can be made more concise:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">a</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">42</span> <span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// => 42</span>
</code></pre></div><p>Arrow version of immediately invoked function:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello!"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Hello!</span>
</code></pre></div><h2 id="binding-this-and-arguments"><a href="#binding-this-and-arguments" class="header-anchor">#</a> Binding <code>this</code> and arguments</h2> <p>When you take a reference to a method (a property which is a function) in JavaScript, it usually doesn't remember the object it was originally attached to. If the method needs to refer to that object as <code>this</code> it won't be able to, and calling it will probably cause a crash.</p> <p>You can use the <code>.bind()</code> method on a function to create a wrapper that includes the value of <code>this</code> and any number of leading arguments.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> monitor <span class="token operator">=</span> <span class="token punctuation">{</span>
threshold<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token function-variable function">check</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span>threshold<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string">"Value is too high!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">display</span><span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
monitor<span class="token punctuation">.</span><span class="token function">check</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The value of `this` is implied by the method call syntax.</span>
<span class="token keyword">var</span> badCheck <span class="token operator">=</span> monitor<span class="token punctuation">.</span>check<span class="token punctuation">;</span>
<span class="token function">badCheck</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The value of `this` is window object and this.threshold is undefined, so value > this.threshold is false</span>
<span class="token keyword">var</span> check <span class="token operator">=</span> monitor<span class="token punctuation">.</span><span class="token function">check</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>monitor<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">check</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// This value of `this` was explicitly bound, the function works.</span>
<span class="token keyword">var</span> check8 <span class="token operator">=</span> monitor<span class="token punctuation">.</span><span class="token function">check</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>monitor<span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">check8</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// We also bound the argument to `8` here. It can't be re-specified.</span>
</code></pre></div><p>When not in strict mode, a function uses the global object (<code>window</code> in the browser) as <code>this</code>, unless the function is called as a method, bound, or called with the method <code>.call</code> syntax.</p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
</code></pre></div><p>In strict mode <code>this</code> is <code>undefined</code> by default</p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token string">"use strict"</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught TypeError: Cannot read property 'x' of undefined(…)</span>
</code></pre></div><h3 id="bind-operator"><a href="#bind-operator" class="header-anchor">#</a> Bind Operator</h3> <p>The double colon <strong>bind operator</strong> can be used as a shortened syntax for the concept explained above:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> log <span class="token operator">=</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>console<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// long version</span>
<span class="token keyword">const</span> log <span class="token operator">=</span> <span class="token operator">:</span><span class="token operator">:</span>console<span class="token punctuation">.</span>log<span class="token punctuation">;</span> <span class="token comment">// short version</span>
foo<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// long version</span>
foo<span class="token operator">:</span><span class="token operator">:</span><span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// short version</span>
foo<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">,</span> arg3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// long version</span>
foo<span class="token operator">:</span><span class="token operator">:</span><span class="token function">bar</span><span class="token punctuation">(</span>arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">,</span> arg3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// short version</span>
foo<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// long version</span>
foo<span class="token operator">:</span><span class="token operator">:</span><span class="token function">bar</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// short version</span>
</code></pre></div><p>This syntax allows you to write normally, without worrying about binding <code>this</code> everywhere.</p> <h3 id="binding-console-functions-to-variables"><a href="#binding-console-functions-to-variables" class="header-anchor">#</a> Binding console functions to variables</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> log <span class="token operator">=</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>console<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>Usage:</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token number">5</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>Output:</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>one <span class="token number">2</span> <span class="token number">3</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> Object <span class="token punctuation">{</span><span class="token number">5</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">}</span>
</code></pre></div><p><strong>Why would you do that?</strong></p> <p>One use case can be when you have custom logger and you want to decide on runtime which one to use.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> logger <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'appLogger'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> log <span class="token operator">=</span> logToServer <span class="token operator">?</span> logger<span class="token punctuation">.</span>log <span class="token operator">:</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>console<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="named-functions"><a href="#named-functions" class="header-anchor">#</a> Named Functions</h2> <p>Functions can either be named or unnamed (<a href="http://stackoverflow.com/documentation/javascript/186/functions/726/anonymous-function#t=201608210702278709208" target="_blank" rel="noopener noreferrer">anonymous functions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">namedSum</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">sum</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// named</span>
<span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> <span class="token function-variable function">anonSum</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// anonymous</span>
<span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">namedSum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">anonSum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>4<br>
4</p> <p>But their names are private to their own scope:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">sumTwoNumbers</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">sum</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>Uncaught ReferenceError: sum is not defined</p> <p>Named functions differ from the anonymous functions in multiple scenarios:</p> <ul><li>When you are debugging, the name of the function will appear in the error/stack trace</li> <li>Named functions are <a href="http://stackoverflow.com/documentation/javascript/480/scope/1576/hoisting#t=201608210658129342026" target="_blank" rel="noopener noreferrer">hoisted<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> while anonymous functions are not</li> <li>Named functions and anonymous functions behave differently when handling recursion</li> <li>Depending on ECMAScript version, named and anonymous functions may treat the function <code>name</code> property differently</li></ul> <h3 id="named-functions-are-hoisted"><a href="#named-functions-are-hoisted" class="header-anchor">#</a> Named functions are hoisted</h3> <p>When using an anonymous function, the function can only be called after the line of declaration, whereas a named function can be called before declaration. Consider</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// using an anonymous function</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote></blockquote> <p>Uncaught TypeError: foo is not a function</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// using a named function</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote></blockquote> <p>bar</p> <h3 id="named-functions-in-a-recursive-scenario"><a href="#named-functions-in-a-recursive-scenario" class="header-anchor">#</a> Named Functions in a recursive scenario</h3> <p>A recursive function can be defined as:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">times</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>times <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">say</span><span class="token punctuation">(</span>times <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//you could call 'say' directly, </span>
<span class="token comment">//but this way just illustrates the example</span>
<span class="token keyword">var</span> sayHelloTimes <span class="token operator">=</span> say<span class="token punctuation">;</span>
<span class="token function">sayHelloTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>Hello!<br>
Hello!</p> <p>What if somewhere in your code the original function binding gets redefined?</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">times</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>times <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">say</span><span class="token punctuation">(</span>times <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> sayHelloTimes <span class="token operator">=</span> say<span class="token punctuation">;</span>
say <span class="token operator">=</span> <span class="token string">"oops"</span><span class="token punctuation">;</span>
<span class="token function">sayHelloTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>Hello!<br>
Uncaught TypeError: say is not a function</p> <p>This can be solved using a named function</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The outer variable can even have the same name as the function</span>
<span class="token comment">// as they are contained in different scopes</span>
<span class="token keyword">var</span> <span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">say</span> <span class="token punctuation">(</span><span class="token parameter">times</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>times <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// this time, 'say' doesn't use the outer variable</span>
<span class="token comment">// it uses the named function</span>
<span class="token function">say</span><span class="token punctuation">(</span>times <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> sayHelloTimes <span class="token operator">=</span> say<span class="token punctuation">;</span>
say <span class="token operator">=</span> <span class="token string">"oops"</span><span class="token punctuation">;</span>
<span class="token function">sayHelloTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>Hello!<br>
Hello!</p> <p>And as bonus, the named function can't be set to <code>undefined</code>, even from inside:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">say</span> <span class="token punctuation">(</span><span class="token parameter">times</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// this does nothing</span>
say <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>times <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// this time, 'say' doesn't use the outer variable</span>
<span class="token comment">// it's using the named function</span>
<span class="token function">say</span><span class="token punctuation">(</span>times <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> sayHelloTimes <span class="token operator">=</span> say<span class="token punctuation">;</span>
say <span class="token operator">=</span> <span class="token string">"oops"</span><span class="token punctuation">;</span>
<span class="token function">sayHelloTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote></blockquote> <p>Hello!<br>
Hello!</p> <h3 id="the-name-property-of-functions"><a href="#the-name-property-of-functions" class="header-anchor">#</a> The <code>name</code> property of functions</h3> <p>Before ES6, named functions had their <code>name</code> properties set to their function names, and anonymous functions had their <code>name</code> properties set to the empty string.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs ''</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs 'foo'</span>
</code></pre></div><p>Post ES6, named and unnamed functions both set their <code>name</code> properties:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs 'foo'</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs 'foo'</span>
<span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs 'bar'</span>
</code></pre></div><h2 id="functions-with-an-unknown-number-of-arguments-variadic-functions"><a href="#functions-with-an-unknown-number-of-arguments-variadic-functions" class="header-anchor">#</a> Functions with an Unknown Number of Arguments (variadic functions)</h2> <p>To create a function which accepts an undetermined number of arguments, there are two methods depending on your environment.</p> <p>Whenever a function is called, it has an Array-like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments" target="_blank" rel="noopener noreferrer">arguments<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> object in its scope, containing all the arguments passed to the function.
Indexing into or iterating over this will give access to the arguments, for example</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">logSomeThings</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arguments<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">logSomeThings</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// logs "hello"</span>
<span class="token comment">// logs "world"</span>
</code></pre></div><p>Note that you can convert <code>arguments</code> to an actual Array if need-be; see: <a href="http://stackoverflow.com/documentation/javascript/187/arrays/2333/converting-an-array-like-object-list-to-an-array#t=201608022102508755726" target="_blank" rel="noopener noreferrer">Converting Array-like Objects to Arrays<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>From ES6, the function can be declared with it's last parameter using the <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/rest_parameters" target="_blank" rel="noopener noreferrer">rest operator<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (<code>...</code>). This creates an Array which holds the arguments from that point onwards</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">personLogsSomeThings</span><span class="token punctuation">(</span><span class="token parameter">person<span class="token punctuation">,</span> <span class="token operator">...</span>msg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
msg<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">arg</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'says'</span><span class="token punctuation">,</span> arg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">personLogsSomeThings</span><span class="token punctuation">(</span><span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// logs "John says hello"</span>
<span class="token comment">// logs "John says world"</span>
</code></pre></div><p>Functions can also be called with similar way, the <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_operator" target="_blank" rel="noopener noreferrer">spread syntax<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">logArguments</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token function">logArguments</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token operator">...</span>list<span class="token punctuation">)</span>
<span class="token comment">// output: Array [ "a", "b", "c", 1, 2, 3 ]</span>
</code></pre></div><p>This syntax can be use to insert arbitrary number of arguments to any position, and can be used with any iterable(<code>apply</code> accepts only array-like objects).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">logArguments</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span>
<span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">generateNumbers</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">yield</span> <span class="token number">6</span>
<span class="token keyword">yield</span> <span class="token number">5</span>
<span class="token keyword">yield</span> <span class="token number">4</span>
<span class="token punctuation">}</span>
<span class="token function">logArguments</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token function">generateNumbers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token string">'pqr'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">)</span>
<span class="token comment">// output: Array [ "a", 6, 5, 4, "p", "q", "r", "b" ]</span>
</code></pre></div><h2 id="anonymous-function"><a href="#anonymous-function" class="header-anchor">#</a> Anonymous Function</h2> <h3 id="defining-an-anonymous-function"><a href="#defining-an-anonymous-function" class="header-anchor">#</a> Defining an Anonymous Function</h3> <p>When a function is defined, you often give it a name and then invoke it using that name, like so:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>When you define a function this way, the Javascript runtime stores your function in memory and then creates a reference to that function, using the name you've assigned it. That name is then accessible within the current scope. This can be a very convenient way to create a function, but Javascript does not require you to assign a name to a function. The following is also perfectly legal:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>When a function is defined without a name, it's known as an anonymous function. The function is stored in memory, but the runtime doesn't automatically create a reference to it for you. At first glance, it may appear as if such a thing would have no use, but there are several scenarios where anonymous functions are very convenient.</p> <h3 id="assigning-an-anonymous-function-to-a-variable"><a href="#assigning-an-anonymous-function-to-a-variable" class="header-anchor">#</a> Assigning an Anonymous Function to a Variable</h3> <p>A very common use of anonymous functions is to assign them to a variable:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>This use of anonymous functions is covered in more detail in <a href="http://stackoverflow.com/documentation/javascript/186/functions/716/functions-as-a-variable#t=20160817162538432807" target="_blank" rel="noopener noreferrer">Functions as a variable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="supplying-an-anonymous-function-as-a-parameter-to-another-function"><a href="#supplying-an-anonymous-function-as-a-parameter-to-another-function" class="header-anchor">#</a> Supplying an Anonymous Function as a Parameter to Another Function</h3> <p>Some functions may accept a reference to a function as a parameter. These are sometimes referred to as "dependency injections" or "callbacks", because it allows the function your calling to "call back" to your code, giving you an opportunity to change the way the called function behaves. For example, the Array object's map function allows you to iterate over each element of an array, then build a new array by applying a transform function to each element.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> doubledNums <span class="token operator">=</span> nums<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> element <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [0,2,4]</span>
</code></pre></div><p>It would be tedious, sloppy and unnecessary to create a named function, which would clutter your scope with a function only needed in this one place and break the natural flow and reading of your code (a colleague would have to leave this code to find your function to understand what's going on).</p> <h3 id="returning-an-anonymous-function-from-another-function"><a href="#returning-an-anonymous-function-from-another-function" class="header-anchor">#</a> Returning an Anonymous Function From Another Function</h3> <p>Sometimes it's useful to return a function as the result of another function. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> hash <span class="token operator">=</span> <span class="token function">getHashFunction</span><span class="token punctuation">(</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> hashValue <span class="token operator">=</span> <span class="token function">hash</span><span class="token punctuation">(</span> <span class="token string">'Secret Value'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">getHashFunction</span><span class="token punctuation">(</span> <span class="token parameter">algorithm</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> algorithm <span class="token operator">===</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> algorithm <span class="token operator">===</span> <span class="token string">'md5'</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="immediately-invoking-an-anonymous-function"><a href="#immediately-invoking-an-anonymous-function" class="header-anchor">#</a> Immediately Invoking an Anonymous Function</h3> <p>Unlike many other languages, scoping in Javascript is function-level, not block-level. (See <a href="http://stackoverflow.com/documentation/javascript/186/functions/844/function-scoping#t=20160817162538432807" target="_blank" rel="noopener noreferrer">Function Scoping<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ). In some cases, however, it's necessary to create a new scope. For example, it's common to create a new scope when adding code via a <code><script></code> tag, rather than allowing variable names to be defined in the global scope (which runs the risk of other scripts colliding with your variable names). A common method to handle this situation is to define a new anonymous function and then immediately invoke it, safely hiding you variables within the scope of the anonymous function and without making your code accessible to third-parties via a leaked function name. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> My Script <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword">function</span> <span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// foo is safely hidden within initialize, but...</span>
<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// ...my initialize function is now accessible from global scope.</span>
<span class="token comment">// There's a risk someone could call it again, probably by accident.</span>
<span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token comment">// Using an anonymous function, and then immediately</span>
<span class="token comment">// invoking it, hides my foo variable and guarantees</span>
<span class="token comment">// no one else can call it a second time.</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// <--- the parentheses invokes the function immediately</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre></div><h3 id="self-referential-anonymous-functions"><a href="#self-referential-anonymous-functions" class="header-anchor">#</a> Self-Referential Anonymous Functions</h3> <p>Sometimes it's useful for an anonymous function to be able to refer to itself. For example, the function may need to recursively call itself or add properties to itself. If the function is anonymous, though, this can be very difficult as it requires knowledge of the variable that the function has been assigned to. This is the less than ideal solution:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callAgain</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">'Whassup?'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Less then ideal... we're dependent on a variable reference...</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>callAgain <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Console Output:</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Assign bar to the original function, and assign foo to another function.</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> foo<span class="token punctuation">;</span>
<span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Bad.'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">bar</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Console Output:</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Bad.</span>
</code></pre></div><p>The intent here was for the anonymous function to recursively call itself, but when the value of foo changes, you end up with a potentially difficult to trace bug.</p> <p>Instead, we can give the anonymous function a reference to itself by giving it a private name, like so:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">myself</span><span class="token punctuation">(</span><span class="token parameter">callAgain</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">'Whassup?'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Less then ideal... we're dependent on a variable reference...</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>callAgain <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token function">myself</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Console Output:</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Assign bar to the original function, and assign foo to another function.</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> foo<span class="token punctuation">;</span>
<span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Bad.'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">bar</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Console Output:</span>
<span class="token comment">// Whassup?</span>
<span class="token comment">// Whassup?</span>
</code></pre></div><p>Note that the function name is scoped to itself. The name has not leaked into the outer scope:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">myself</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ReferenceError: myself is not defined</span>
</code></pre></div><p>This technique is especially useful when dealing with recursive anonymous functions as callback parameters:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Calculate the fibonacci value for each number in an array:</span>
<span class="token keyword">var</span> fib <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>
<span class="token keyword">function</span> <span class="token function">fib</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span> n <span class="token operator"><=</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token function">fib</span><span class="token punctuation">(</span> n <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">fib</span><span class="token punctuation">(</span> n <span class="token operator">-</span> <span class="token number">2</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// result = [1, 1, 2, 3, 5, 8, 13, 21]</span>
<span class="token comment">// fib = false (the anonymous function name did not overwrite our fib variable)</span>
</code></pre></div><h2 id="default-parameters"><a href="#default-parameters" class="header-anchor">#</a> Default parameters</h2> <p>Before ECMAScript 2015 (ES6), a parameter's default value could be assigned in the following way:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">printMsg</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
msg <span class="token operator">=</span> <span class="token keyword">typeof</span> msg <span class="token operator">!==</span> <span class="token string">'undefined'</span> <span class="token operator">?</span> <span class="token comment">// if a value was provided </span>
msg <span class="token operator">:</span> <span class="token comment">// then, use that value in the reassignemnt</span>
<span class="token string">'Default value for msg.'</span><span class="token punctuation">;</span> <span class="token comment">// else, assign a default value</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>ES6 provided a new syntax where the condition and reassignment depicted above is no longer necessary:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">printMsg</span><span class="token punctuation">(</span>msg<span class="token operator">=</span><span class="token string">'Default value for msg.'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">printMsg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "Default value for msg."</span>
<span class="token function">printMsg</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "Default value for msg."</span>
<span class="token function">printMsg</span><span class="token punctuation">(</span><span class="token string">'Now my msg in different!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "Now my msg in different!"</span>
</code></pre></div><p>This also shows that if a parameter is missing when the function is invoked, its value is kept as <code>undefined</code>, as it can be confirmed by explicitly providing it in the following example (using an <a href="http://stackoverflow.com/documentation/javascript/5007/arrow-functions/720/defining-and-using-arrow-functions#t=20170119164653068688" target="_blank" rel="noopener noreferrer">arrow function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> param_check <span class="token operator">=</span> <span class="token punctuation">(</span>p <span class="token operator">=</span> <span class="token string">'str'</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token string">' is of type: '</span> <span class="token operator">+</span> <span class="token keyword">typeof</span> p<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">param_check</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "str is of type: string"</span>
<span class="token function">param_check</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "str is of type: string"</span>
<span class="token function">param_check</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "1 is of type: number"</span>
<span class="token function">param_check</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "[object Window] is of type: object"</span>
</code></pre></div><h3 id="functions-variables-as-default-values-and-reusing-parameters"><a href="#functions-variables-as-default-values-and-reusing-parameters" class="header-anchor">#</a> Functions/variables as default values and reusing parameters</h3> <p>The default parameters' values are not restricted to numbers, strings or simple objects. A function can also be set as the default value <code>callback = function(){}</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// custom</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//default</span>
</code></pre></div><p>There are certain characteristics of the operations that can be performed through default values:</p> <ul><li>A previously declared parameter can be reused as a default value for the upcoming parameters' values.</li> <li>Inline operations are allowed when assigning a default value to a parameter.</li> <li>Variables existing in the same scope of the function being declared can be used in its default values.</li> <li>Functions can be invoked in order to provide their return value into a default value.</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> zero <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">multiply</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> zero<span class="token punctuation">,</span> b <span class="token operator">=</span> a<span class="token punctuation">,</span> c <span class="token operator">=</span> b <span class="token operator">+</span> a<span class="token punctuation">,</span> d <span class="token operator">=</span> <span class="token function">multiply</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">)</span><span class="token punctuation">,</span> d<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4, 4</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12, 12</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 18, 18</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8, 10</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8, 20 </span>
</code></pre></div><h3 id="reusing-the-function-s-return-value-in-a-new-invocation-s-default-value"><a href="#reusing-the-function-s-return-value-in-a-new-invocation-s-default-value" class="header-anchor">#</a> Reusing the function's return value in a new invocation's default value:</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// meaningless: this will be overshadowed in the function's scope</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
array<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> array<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [5]</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [6], not [5, 6]</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [5, 6]</span>
</code></pre></div><h3 id="arguments-value-and-length-when-lacking-parameters-in-invocation"><a href="#arguments-value-and-length-when-lacking-parameters-in-invocation" class="header-anchor">#</a> <code>arguments</code> value and length when lacking parameters in invocation</h3> <p>The <a href="http://stackoverflow.com/documentation/javascript/5007/arrow-functions/17664/arguments-object#t=201701231210419176666" target="_blank" rel="noopener noreferrer"><code>arguments</code> array object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> only retains the parameters whose values are not default, i.e. those that are explicitly provided when the function is invoked:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> b <span class="token operator">=</span> a <span class="token operator">+</span> <span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length<span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// info: 0 >> [] | log: 1, 2</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// info: 1 >> [4] | log: 4, 5</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// info: 2 >> [5, 6] | log: 5, 6</span>
</code></pre></div><h2 id="function-arguments-arguments-object-rest-and-spread-parameters"><a href="#function-arguments-arguments-object-rest-and-spread-parameters" class="header-anchor">#</a> Function Arguments, "arguments" object, rest and spread parameters</h2> <p>Functions can take inputs in form of variables that can be used and assigned inside their own scope. The following function takes two numeric values and returns their sum:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">addition</span> <span class="token punctuation">(</span><span class="token parameter">argument1<span class="token punctuation">,</span> argument2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> argument1 <span class="token operator">+</span> argument2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">addition</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 5</span>
</code></pre></div><h3 id="arguments-object"><a href="#arguments-object" class="header-anchor">#</a> <code>arguments</code> object</h3> <p>The <code>arguments</code> object contains all the function's parameters that contain a non-<a href="http://stackoverflow.com/documentation/javascript/186/functions/9475/default-parameters" target="_blank" rel="noopener noreferrer">default value<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. It can also be used even if the parameters are not explicitly declared:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token string">'str'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// -> [0, "str", Array[2]]</span>
</code></pre></div><p>Although when printing <code>arguments</code> the output resembles an Array, it is in fact an object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> object</span>
</code></pre></div><h3 id="rest-parameters-function-parm"><a href="#rest-parameters-function-parm" class="header-anchor">#</a> Rest parameters: <code>function (...parm) {}</code></h3> <p>In ES6, the <code>...</code> syntax when used in the declaration of a function's parameters transforms the variable to its right into a single object containing all the remaining parameters provided after the declared ones. This allows the function to be invoked with an unlimited number of arguments, which will become part of this variable:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> <span class="token operator">...</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> b<span class="token operator">+</span><span class="token string">': '</span><span class="token operator">+</span>b<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">+</span>b<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">+</span>b<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">{</span>i<span class="token operator">:</span><span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -> object: 123 </span>
</code></pre></div><h3 id="spread-parameters-function-name-varb"><a href="#spread-parameters-function-name-varb" class="header-anchor">#</a> Spread parameters: <code>function_name(...varb);</code></h3> <p>In ES6, the <code>...</code> syntax can also be used when invoking a function by placing an object/variable to its right. This allows that object's elements to be passed into that function as a single object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">42</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>nums<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> a b c 42</span>
</code></pre></div><h2 id="passing-arguments-by-reference-or-value"><a href="#passing-arguments-by-reference-or-value" class="header-anchor">#</a> Passing arguments by reference or value</h2> <p>In JavaScript all arguments are passed by value. When a function assigns a new value to an argument variable, that change will not be visible to the caller:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myfunc</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
arg <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Note the assignment is to the parameter variable itself</span>
<span class="token punctuation">}</span>
<span class="token function">myfunc</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
</code></pre></div><p>However, changes made to (nested) properties <strong>of</strong> such arguments, will be visible to the caller:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myfunc</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
arg<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// assignment to a property of the argument</span>
<span class="token punctuation">}</span>
<span class="token function">myfunc</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5</span>
</code></pre></div><p>This can be seen as a <strong>call by reference</strong>: although a function cannot change the caller's object by assigning a new value to it, it could <strong>mutate</strong> the caller's object.</p> <p>As primitive valued arguments, like numbers or strings, are immutable, there is no way for a function to mutate them:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">'say'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myfunc</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
arg <span class="token operator">+=</span> <span class="token string">' hello'</span><span class="token punctuation">;</span> <span class="token comment">// assignment to the parameter variable itself</span>
<span class="token punctuation">}</span>
<span class="token function">myfunc</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'say'</span>
</code></pre></div><p>When a function wants to mutate an object passed as argument, but does not want to actually mutate the caller's object, the argument variable should be reassigned:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myfunc</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
arg <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> arg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// assignment to argument variable, shallow copy</span>
arg<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">myfunc</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
</code></pre></div><p>As an alternative to in-place mutation of an argument, functions can create a new value, based on the argument, and return it. The caller can then assign it, even to the original variable that was passed as argument:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myfunc</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
arg<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> arg<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
a <span class="token operator">=</span> <span class="token function">myfunc</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
</code></pre></div><h2 id="call-and-apply"><a href="#call-and-apply" class="header-anchor">#</a> Call and apply</h2> <p>Functions have two built-in methods that allow the programmer to supply arguments and the <code>this</code> variable differently: <code>call</code> and <code>apply</code>.</p> <p>This is useful, because functions that operate on one object (the object that they are a property of) can be repurposed to operate on another, compatible object. Additionally, arguments can be given in one shot as arrays, similar to the spread (<code>...</code>) operator in ES6.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> a<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>b <span class="token operator">=</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// normal syntax</span>
obj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// equivalent to the above</span>
obj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// equivalent to the above; note that an array is used</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints { a: 3, b: 5 }</span>
<span class="token keyword">let</span> myObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
myObj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fails; myObj has no `set` property</span>
obj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>myObj<span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// success; `this` in set() is re-routed to myObj instead of obj</span>
obj<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>myObj<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// same as above; note the array</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints { a: 3, b: 5 }</span>
</code></pre></div><p>ECMAScript 5 introduced another method called <strong><code>bind()</code></strong>
in addition to <code>call()</code> and <code>apply()</code> to explicitly set <strong><code>this</code></strong> value of the function to specific object.</p> <p>It behaves quite differently than the other two. The first argument to <code>bind()</code> is the <code>this</code> value for the new function. All other arguments represent named parameters that should be permanently set in the new function.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">showName</span><span class="token punctuation">(</span><span class="token parameter">label</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>label <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> student1 <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">"Ravi"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> student2 <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">"Vinod"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// create a function just for student1</span>
<span class="token keyword">var</span> showNameStudent1 <span class="token operator">=</span> <span class="token function">showName</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>student1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">showNameStudent1</span><span class="token punctuation">(</span><span class="token string">"student1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs "student1:Ravi"</span>
<span class="token comment">// create a function just for student2</span>
<span class="token keyword">var</span> showNameStudent2 <span class="token operator">=</span> <span class="token function">showName</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>student2<span class="token punctuation">,</span> <span class="token string">"student2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">showNameStudent2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs "student2:Vinod"</span>
<span class="token comment">// attaching a method to an object doesn't change `this` value of that method.</span>
student2<span class="token punctuation">.</span>sayName <span class="token operator">=</span> showNameStudent1<span class="token punctuation">;</span>
student2<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token string">"student2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs "student2:Ravi"</span>
</code></pre></div><h2 id="partial-application"><a href="#partial-application" class="header-anchor">#</a> Partial Application</h2> <p>Similar to currying, partial application is used to reduce the number of arguments passed to a function. Unlike currying, the number need not go down by one.</p> <p>Example:</p> <p>This function ...</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">multiplyThenAdd</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> a <span class="token operator">*</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>... can be used to create another function that will always multiply by 2 and then add 10 to the passed value;</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reversedMultiplyThenAdd</span><span class="token punctuation">(</span><span class="token parameter">c<span class="token punctuation">,</span> b<span class="token punctuation">,</span> a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> a <span class="token operator">*</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token parameter">b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">reversedMultiplyThenAdd</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> c<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> multiplyTwoThenAddTen <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">multiplyTwoThenAddTen</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 30</span>
</code></pre></div><p>The "application" part of partial application simply means fixing parameters of a function.</p> <h2 id="function-composition"><a href="#function-composition" class="header-anchor">#</a> Function Composition</h2> <p>Composing multiple functions into one is a functional programming common practice;</p> <p>composition makes a pipeline through which our data will transit and get modified simply working on the function-composition (just like snapping pieces of a track together)...</p> <p>you start out with some single responsibility functions:</p> <div class="language- extra-class"><pre class="language-text"><code>
const capitalize = x => x.replace(/^\w/, m => m.toUpperCase());
const sign = x => x + ',\nmade with love';
</code></pre></div><p>and easily create a transformation track:</p> <div class="language- extra-class"><pre class="language-text"><code>
const formatText = compose(capitalize, sign);
formatText('this is an example')
//This is an example,
//made with love
</code></pre></div><p>N.B. Composition is achieved through a utility function usually called <code>compose</code> as in our example.</p> <p>Implementation of <code>compose</code> are present in many JavaScript utility libraries (<a href="https://lodash.com/docs#flow" target="_blank" rel="noopener noreferrer">lodash<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="http://ramdajs.com/" target="_blank" rel="noopener noreferrer">rambda<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, etc.) but you can also start out with a simple implementation such as:</p> <div class="language- extra-class"><pre class="language-text"><code>
const compose = (...funs) =>
x =>
funs.reduce((ac, f) => f(ac), x);
</code></pre></div><h2 id="functions-as-a-variable"><a href="#functions-as-a-variable" class="header-anchor">#</a> Functions as a variable</h2> <p>A normal function declaration looks like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre></div><p>A function defined like this is accessible from anywhere within its context by its name. But sometimes it can be useful to treat function references like object references. For example, you can assign an object to a variable based on some set of conditions and then later retrieve a property from one or the other object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'Cameron'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> spouse<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> name <span class="token operator">===</span> <span class="token string">'Taylor'</span> <span class="token punctuation">)</span> spouse <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Jordan'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> name <span class="token operator">===</span> <span class="token string">'Cameron'</span> <span class="token punctuation">)</span> spouse <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Casey'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> spouseName <span class="token operator">=</span> spouse<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
</code></pre></div><p>In JavaScript, you can do the same thing with functions:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 1</span>
<span class="token keyword">var</span> hashAlgorithm <span class="token operator">=</span> <span class="token string">'sha1'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> hash<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span> <span class="token function-variable function">hash</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'md5'</span> <span class="token punctuation">)</span> <span class="token function-variable function">hash</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">hash</span><span class="token punctuation">(</span><span class="token string">'Fred'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>In the example above, <code>hash</code> is a normal variable. It is assigned a reference to a function, after which the function it references can be invoked using parentheses, just like a normal function declaration.</p> <p>The example above references anonymous functions... functions that do not have their own name. You can also use variables to refer to named functions. The example above could be rewritten like so:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 2</span>
<span class="token keyword">var</span> hashAlgorithm <span class="token operator">=</span> <span class="token string">'sha1'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> hash<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span> hash <span class="token operator">=</span> sha1Hash<span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'md5'</span> <span class="token punctuation">)</span> hash <span class="token operator">=</span> md5Hash<span class="token punctuation">;</span>
<span class="token function">hash</span><span class="token punctuation">(</span><span class="token string">'Fred'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">md5Hash</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">sha1Hash</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Or, you can assign function references from object properties:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 3</span>
<span class="token keyword">var</span> hashAlgorithms <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">sha1</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/**/</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">md5</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/**/</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> hashAlgorithm <span class="token operator">=</span> <span class="token string">'sha1'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> hash<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span> hash <span class="token operator">=</span> hashAlgorithms<span class="token punctuation">.</span>sha1<span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> hashAlgorithm <span class="token operator">===</span> <span class="token string">'md5'</span> <span class="token punctuation">)</span> hash <span class="token operator">=</span> hashAlgorithms<span class="token punctuation">.</span>md5<span class="token punctuation">;</span>
<span class="token function">hash</span><span class="token punctuation">(</span><span class="token string">'Fred'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>You can assign the reference to a function held by one variable to another by omitting the parentheses. This can result in an easy-to-make mistake: attempting to assign the return value of a function to another variable, but accidentally assigning the reference to the function.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 4</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> getValue<span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span> <span class="token comment">// b is now a reference to getValue.</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// b is invoked, so c now holds the value returned by getValue (41)</span>
<span class="token keyword">function</span> <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">41</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>A reference to a function is like any other value. As you've seen, a reference can be assigned to a variable, and that variable's reference value can be subsequently assigned to other variables. You can pass around references to functions like any other value, including passing a reference to a function as the return value of another function. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 5</span>
<span class="token comment">// getHashingFunction returns a function, which is assigned</span>
<span class="token comment">// to hash for later use:</span>
<span class="token keyword">var</span> hash <span class="token operator">=</span> <span class="token function">getHashingFunction</span><span class="token punctuation">(</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token function">hash</span><span class="token punctuation">(</span><span class="token string">'Fred'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// return the function corresponding to the given algorithmName</span>
<span class="token keyword">function</span> <span class="token function">getHashingFunction</span><span class="token punctuation">(</span> <span class="token parameter">algorithmName</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// return a reference to an anonymous function</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>algorithmName <span class="token operator">===</span> <span class="token string">'sha1'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/**/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// return a reference to a declared function</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>algorithmName <span class="token operator">===</span> <span class="token string">'md5'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> md5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">md5Hash</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You don't need to assign a function reference to a variable in order to invoke it. This example, building off example 5, will call getHashingFunction and then immediately invoke the returned function and pass its return value to hashedValue.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example 6</span>
<span class="token keyword">var</span> hashedValue <span class="token operator">=</span> <span class="token function">getHashingFunction</span><span class="token punctuation">(</span> <span class="token string">'sha1'</span> <span class="token punctuation">)</span><span class="token punctuation">(</span> <span class="token string">'Fred'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="a-note-on-hoisting"><a href="#a-note-on-hoisting" class="header-anchor">#</a> A Note on Hoisting</h3> <p>Keep in mind that, unlike normal function declarations, variables that reference functions are not "hoisted". In example 2, the <code>md5Hash</code> and <code>sha1Hash</code> functions are defined at the bottom of the script, but are available everywhere immediately. No matter where you define a function, the interpreter "hoists" it to the top of its scope, making it immediately available. This is <strong>not</strong> the case for variable definitions, so code like the following will break:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> functionVariable<span class="token punctuation">;</span>
<span class="token function">hoistedFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// works, because the function is "hoisted" to the top of its scope</span>
<span class="token function">functionVariable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error: undefined is not a function.</span>
<span class="token keyword">function</span> <span class="token function">hoistedFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token function-variable function">functionVariable</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="recursive-function"><a href="#recursive-function" class="header-anchor">#</a> Recursive Function</h2> <p>A recursive function is simply a function, that would call itself.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">factorial</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator"><=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> n <span class="token operator">*</span> <span class="token function">factorial</span><span class="token punctuation">(</span>n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The above function shows a basic example of how to perform a recursive function to return a factorial.</p> <p>Another example, would be to retrieve the sum of even numbers in an array.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">countEvenNumbers</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Sentinel value. Recursion stops on empty array.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// The shift() method removes the first element from an array </span>
<span class="token comment">// and returns that element. This method changes the length of the array.</span>
<span class="token keyword">var</span> value <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// `value % 2 === 0` tests if the number is even or odd</span>
<span class="token comment">// If it's even we add one to the result of counting the remainder of </span>
<span class="token comment">// the array. If it's odd, we add zero to it.</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>value <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">countEvens</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>It is important that such functions make some sort of sentinel value check to avoid infinite loops. In the first example above, when <code>n</code> is less than or equal to 1, the recursion stops, allowing the result of each call to be returned back up the call stack.</p> <h2 id="using-the-return-statement"><a href="#using-the-return-statement" class="header-anchor">#</a> Using the Return Statement</h2> <p>The return statement can be a useful way to create output for a function. The return statement is especially useful if you do not know in which context the function will be used yet.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//An example function that will take a string as input and return </span>
<span class="token comment">//the first character of the string.</span>
<span class="token keyword">function</span> <span class="token function">firstChar</span> <span class="token punctuation">(</span><span class="token parameter">stringIn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> stringIn<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Now to use this function, you need to put it in place of a variable somewhere else in your code:</p> <p><strong>Using the function result as an argument for another function:</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">firstChar</span><span class="token punctuation">(</span><span class="token string">"Hello world"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>Console output will be:</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">></span> <span class="token constant">H</span>
</code></pre></div><p><strong>The return statement ends the function</strong></p> <p>If we modify the function in the beginning, we can demonstrate that the return statement ends the function.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">firstChar</span> <span class="token punctuation">(</span><span class="token parameter">stringIn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"The first action of the first char function"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> stringIn<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"The last action of the first char function"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Running this function like so will look like this:</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">firstChar</span><span class="token punctuation">(</span><span class="token string">"JS"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>Console output:</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">></span> The first action <span class="token keyword">of</span> the first char <span class="token keyword">function</span>
<span class="token operator">></span> <span class="token constant">J</span>
</code></pre></div><p>It will not print the message after the return statement, as the function has now been ended.</p> <p><strong>Return statement spanning multiple lines:</strong></p> <p>In JavaScript, you can normally split up a line of code into many lines for readability purposes or organization. This is valid JavaScript:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span>
name <span class="token operator">=</span> <span class="token string">"bob"</span><span class="token punctuation">,</span>
age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
</code></pre></div><p>When JavaScript sees an incomplete statement like <code>var</code> it looks to the next line to complete itself. However, if you make the same mistake with the <code>return</code> statement, you will not get what you expected.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">return</span>
<span class="token string">"Hi, my name is "</span><span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">". "</span> <span class="token operator">+</span>
<span class="token string">"I'm "</span><span class="token operator">+</span> age <span class="token operator">+</span> <span class="token string">" years old."</span><span class="token punctuation">;</span>
</code></pre></div><p>This code will return <code>undefined</code> because <code>return</code> by itself is a complete statement in Javascript, so it will not look to the next line to complete itself. If you need to split up a <code>return</code> statement into multiple lines, put a value next to return before you split it up, like so.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">return</span> <span class="token string">"Hi, my name is "</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">". "</span> <span class="token operator">+</span>
<span class="token string">"I'm "</span> <span class="token operator">+</span> age <span class="token operator">+</span> <span class="token string">" years old."</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="get-the-name-of-a-function-object"><a href="#get-the-name-of-a-function-object" class="header-anchor">#</a> Get the name of a function object</h2> <p><strong>ES6</strong>:</p> <div class="language-js extra-class"><pre class="language-js"><code>myFunction<span class="token punctuation">.</span>name
</code></pre></div><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name" target="_blank" rel="noopener noreferrer">Explanation on MDN<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. As of 2015 works in nodejs and all major browsers except IE.</p> <p><strong>ES5</strong>:</p> <p>If you have a reference to the function, you can do:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">functionName</span><span class="token punctuation">(</span> <span class="token parameter">func</span> <span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// Match:</span>
<span class="token comment">// - ^ the beginning of the string</span>
<span class="token comment">// - function the word 'function'</span>
<span class="token comment">// - \s+ at least some white space</span>
<span class="token comment">// - ([\w\$]+) capture one or more valid JavaScript identifier characters</span>
<span class="token comment">// - \( followed by an opening brace</span>
<span class="token comment">//</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^function\s+([\w\$]+)\(</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span> func<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token keyword">return</span> result <span class="token operator">?</span> result<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="syntax"><a href="#syntax" class="header-anchor">#</a> Syntax</h4> <li>
function example(x) { return x }
</li> <li>
var example = function (x) { return x }
</li> <li>
(function() { ... })(); // Immediately Invoked Function Expression (IIFE)
</li> <li>
var instance = new Example(x);
</li> <li>
**Methods**
</li> <li>
fn.apply(valueForThis[, arrayOfArgs])
</li> <li>
fn.bind(valueForThis[, arg1[, arg2, ...]])
</li> <li>
fn.call(valueForThis[, arg1[, arg2, ...]])
</li> <li>
**ES2015+ (ES6+):**
</li> <li>
const example = x => { return x }; // Arrow function explicit return
</li> <li>
const example = x => x; // Arrow function implicit return
</li> <li>
const example = (x, y, z) => { ... } // Arrow function multiple arguments
</li> <li>
(() => { ... })(); // IIFE using an arrow function
</li> <h4 id="remarks"><a href="#remarks" class="header-anchor">#</a> Remarks</h4> <p>For information on arrow functions, please view the <a href="http://stackoverflow.com/documentation/javascript/5007/arrow-functions#t=201608022013277301912" target="_blank" rel="noopener noreferrer">Arrow Functions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> documentation.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/functions.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/loops.html" class="prev">
Loops
</a></span> <span class="next"><a href="/javascript/functional-javascript.html">
Functional JavaScript
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1745.8bdea00b.js" defer></script>
</body>
</html>