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
+66-7Lines changed: 66 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -300,7 +300,7 @@ var example = (parameters) => {
300
300
}
301
301
----
302
302
303
-
An arrow function with exactly one parameter can omit the parenthesis. This is optional. It's useful when passing the arrow function to another method, as it reduces the amount of parenthesis involved, making it easier for humans to parse the code.
303
+
An arrow function with exactly one parameter can omit the parenthesis. This is optional. It's useful when passing the arrow function to another method, as it reduces the amount of parenthesis involved, making it easier for some humans to parse the code.
304
304
305
305
[source,javascript]
306
306
----
@@ -887,8 +887,8 @@ In ES6, you can combine spread with array destructuring. The following piece of
887
887
888
888
[source,javascript]
889
889
----
890
-
var [first, second, ...rest] = ['a', 'b', 'c', 'd', 'e']
891
-
console.log(rest)
890
+
var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']
891
+
console.log(other)
892
892
// <- ['c', 'd', 'e']
893
893
----
894
894
@@ -947,8 +947,8 @@ The following table summarizes the use cases we've discussed for the spread oper
|+new+ and +apply+|+new (Date.bind.apply(Date, [null,2015,31,8]))+| +new Date(...[2015,31,8])+
953
953
|=======
954
954
@@ -1088,7 +1088,37 @@ The template we've just prepared would produce output like what's shown in the f
1088
1088
</article>
1089
1089
----
1090
1090
1091
-
Sometimes, it might be a good idea to pre-process the results of expressions before inserting them into your templates. For these advanced kinds of use cases, it's possible to use another feature of template literals called tagged templates.
1091
+
A downside when it comes to multi-line template literals is indentation. The following example shows a typically indented piece of code with a template literal contained in a function. While we may have expected no indentation, the string is has four spaces of indentation.
1092
+
1093
+
[source,javascript]
1094
+
----
1095
+
function getParagraph () {
1096
+
return `
1097
+
Dear Rod,
1098
+
1099
+
This is a template literal string that's indented
1100
+
four spaces. However, you may have expected for it
1101
+
to be not indented at all.
1102
+
1103
+
Nico
1104
+
`
1105
+
}
1106
+
----
1107
+
1108
+
While not ideal, we could get away with a utility function to remove indentation from each line in the resulting string.
1109
+
1110
+
[source,javascript]
1111
+
----
1112
+
function unindent (text) {
1113
+
return text
1114
+
.split('\n')
1115
+
.map(line => line.slice(4))
1116
+
.join('\n')
1117
+
.trim()
1118
+
}
1119
+
----
1120
+
1121
+
Sometimes, it might be a good idea to pre-process the results of interpolated expressions before inserting them into your templates. For these advanced kinds of use cases, it's possible to use another feature of template literals called tagged templates.
1092
1122
1093
1123
==== 2.5.3 Tagged Templates
1094
1124
@@ -1152,7 +1182,7 @@ console.log(text)
1152
1182
// <- 'Hello MAURICE, I am THRILLED to meet you!'
1153
1183
----
1154
1184
1155
-
A decidedly more useful use case would be to sanitize expressions interpolated into your templates, automatically, using a tagged template. Given a template where all expressions are considered user-input, we could use a hypothetical +sanitize+ library to remove HTML tags and similar hazards.
1185
+
A decidedly more useful use case would be to sanitize expressions interpolated into your templates, automatically, using a tagged template. Given a template where all expressions are considered user-input, we could use a hypothetical +sanitize+ library to remove HTML tags and similar hazards, preventing cross site scripting (XSS) attacks where users might inject malicious HTML into our websites.
1156
1186
1157
1187
[source,javascript]
1158
1188
----
@@ -1251,6 +1281,35 @@ console.log(i)
1251
1281
// <- i is not defined
1252
1282
----
1253
1283
1284
+
Given +let+ variables declared in a loop are scoped to each step in the loop, the bindings would work as expected in combination with an asynchronous function call, as opposed to what we're used to with +var+. Let's look at concrete examples.
1285
+
1286
+
First, we'll look at the typical example of how +var+ scoping works. The +i+ binding is scoped to the +printNumbers+ function, and its value increases all the way to +10+ as each timeout callback is scheduled. By the time each callbacks run -- one every 100 milliseconds -- +i+ has a value of +10+ and thus that's what's printed every single time.
1287
+
1288
+
[source,javascript]
1289
+
----
1290
+
function printNumbers () {
1291
+
for (var i = 0; i < 10; i++) {
1292
+
setTimeout(function () {
1293
+
console.log(i)
1294
+
}, i * 100)
1295
+
}
1296
+
}
1297
+
printNumbers()
1298
+
----
1299
+
1300
+
Using +let+, in contrast, binds the variable to the block's scope. Indeed, each step in the loop still increases the value of the variable, but a new binding is created each step of the way, meaning that each timeout callback will hold a reference to the binding holding the value of +i+ at the point when the callback was scheduled, printing every number from +0+ through +9+ as expected.
1301
+
1302
+
[source,javascript]
1303
+
----
1304
+
function printNumbers () {
1305
+
for (let i = 0; i < 10; i++) {
1306
+
setTimeout(function () {
1307
+
console.log(i)
1308
+
}, i * 100)
1309
+
}
1310
+
}
1311
+
printNumbers()
1312
+
----
1254
1313
1255
1314
One more thing of note about +let+ is a concept called the "Temporal Dead Zone".
0 commit comments