Skip to content

Commit 598dc8b

Browse files
committed
@rvagg's comments for chapter 2 addressed. should check for examples for correctness.
1 parent c8e33bf commit 598dc8b

File tree

1 file changed

+66
-7
lines changed

1 file changed

+66
-7
lines changed

chapters/ch02.asciidoc

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ var example = (parameters) => {
300300
}
301301
----
302302

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.
304304

305305
[source,javascript]
306306
----
@@ -887,8 +887,8 @@ In ES6, you can combine spread with array destructuring. The following piece of
887887
888888
[source,javascript]
889889
----
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)
892892
// <- ['c', 'd', 'e']
893893
----
894894
@@ -947,8 +947,8 @@ The following table summarizes the use cases we've discussed for the spread oper
947947
|=======
948948
|Use Case|ES5|ES6
949949
|Concatenation|+[1, 2].concat(more)+|+[1, 2, ...more]+
950-
|Push onto list|+list.push.apply(list, [3, 4])+|+list.push(...[3, 4])+
951-
|Destructuring|+a = list[0], rest = list.slice(1)+ | +[a, ...rest] = list+
950+
|Push an array onto list|+list.push.apply(list, items)+|+list.push(...items)+
951+
|Destructuring|+a = list[0], other = list.slice(1)+ | +[a, ...other] = list+
952952
|+new+ and +apply+|+new (Date.bind.apply(Date, [null,2015,31,8]))+| +new Date(...[2015,31,8])+
953953
|=======
954954

@@ -1088,7 +1088,37 @@ The template we've just prepared would produce output like what's shown in the f
10881088
</article>
10891089
----
10901090

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.
10921122

10931123
==== 2.5.3 Tagged Templates
10941124

@@ -1152,7 +1182,7 @@ console.log(text)
11521182
// <- 'Hello MAURICE, I am THRILLED to meet you!'
11531183
----
11541184

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.
11561186

11571187
[source,javascript]
11581188
----
@@ -1251,6 +1281,35 @@ console.log(i)
12511281
// <- i is not defined
12521282
----
12531283

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+
----
12541313

12551314
One more thing of note about +let+ is a concept called the "Temporal Dead Zone".
12561315

0 commit comments

Comments
 (0)