You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: chapters/ch02.asciidoc
+27-1Lines changed: 27 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -232,7 +232,7 @@ var example = (parameters) => {
232
232
}
233
233
----
234
234
235
-
While arrow functions look very similar to your typical anonymous function, they are fundamentally different: arrow functions can't have a name, theycan't be used as constructors, they don't have a +prototype+ property, and they are bound to their lexical scope.
235
+
While arrow functions look very similar to your typical anonymous function, they are fundamentally different: arrow functions can't be named explicitly, although modern runtimes can infer a name based on the variable they're assigned to; they can't be used as constructors nor do they have a +prototype+ property, meaning you can't use +new+ on an arrow function; and they are bound to their lexical scope, which is the reason why they don't alter the meaning of +this+.
236
236
237
237
Let's dig into their semantic differences with traditional functions, the many ways to declare an arrow function, and practical use cases.
238
238
@@ -261,6 +261,32 @@ If we had defined the function passed to +setInterval+ as a regular anonymous fu
261
261
262
262
In a similar fashion, lexical binding in ES6 arrow functions also means that function calls won't be able to change the +this+ context when using +.call+, +.apply+, +.bind+, etc. That limitation is usually more useful than not, as it ensures that the context will always be preserved and constant.
263
263
264
+
Let's now shift our attention to the following example. What do you think the `console.log` statement will print?
265
+
266
+
[source,javascript]
267
+
----
268
+
function puzzle () {
269
+
return function () {
270
+
console.log(arguments)
271
+
}
272
+
}
273
+
puzzle('a', 'b', 'c')(1, 2, 3)
274
+
----
275
+
276
+
The answer is that `arguments` refers to the context of the anonymous function, and thus the arguments passed to that function will be printed. In this case, those arguments are `1, 2, 3`.
277
+
278
+
What about in the following case, where we use an arrow function instead of the anonymous function in the previous example?
279
+
280
+
[source,javascript]
281
+
----
282
+
function puzzle () {
283
+
return () => console.log(arguments)
284
+
}
285
+
puzzle('a', 'b', 'c')(1, 2, 3)
286
+
----
287
+
288
+
In this case, the `arguments` object refers to the context of the `puzzle` function, because arrow functions don't create a closure. For this reason, the printed arguments will be `'a', 'b', 'c'`.
289
+
264
290
I've mentioned there's several flavors of arrow functions, but so far we've only looked at their fully fleshed version. What are the others way to represent an arrow function?
0 commit comments