Follow review by @rvagg (#28)

* Start review of @rvagg's commentary! 🎉

* naming clarification and arguments example.

* @rvagg's comments for chapter 2 addressed. should check `for` examples for correctness.

* review chapters 3 and 4 via @rvagg

* finish applying @rvagg's review

Author: bevacqua

chapters/ch01.asciidoc

@@ -1,7 +1,7 @@
 [[ecmascript-and-the-future-of-javascript]]
 == ECMAScript and the Future of JavaScript
 
-JavaScript has gone from being a 1995 marketing ploy to gain a tactical advantage, to becoming the core programming experience in the world's most widely used application runtime platform in 2017. The language doesn't merely run in browsers anymore, but is also used to create desktop and mobile applications, in hardware devices, and even in the vacuum of space.
+JavaScript has gone from being a 1995 marketing ploy to gain a tactical advantage, to becoming the core programming experience in the world's most widely used application runtime platform in 2017. The language doesn't merely run in browsers anymore, but is also used to create desktop and mobile applications, in hardware devices, and even in space suit design at NASA.
 
 How did JavaScript get here, and where is it going next?
 
@@ -47,7 +47,7 @@ Having spent ten years without observing significant change to the language spec
 
 Since ES6 came out, TC39 has streamlinedfootnote:[You can find the September 2013 presentation which lead to the streamlined proposal revisioning process here: https://mjavascript.com/out/tc39-improvement.] its proposal revisioning process and adjusted it to meet modern expectations: the need to iterate more often and consistently, and to democratize specification development. At this point, TC39 moved from an ancient Word-based flow to using ecmarkup and GitHub Pull Requests, greatly increasing the number of proposalsfootnoteref:[proposals,You can find all proposals being considered by TC39 at https://mjavascript.com/out/tc39-proposals.] being created as well as external participation by non-members.
 
-Firefox, Chrome, Edge, Safari and Node.js all offer over 95% compliancy of the ES6 specification,footnote:[For a detailed ES6 compatibility report across browsers, check out the following table: https://mjavascript.com/out/es6-compat.] but we’ve been able to use the features as they came out in each of these browsers rather than having to wait until the flip of a switch when their implementation of ES6 was 100% finalized.
+Firefox, Chrome, Edge, Safari and Node.js all offer over 95% compliance of the ES6 specification,footnote:[For a detailed ES6 compatibility report across browsers, check out the following table: https://mjavascript.com/out/es6-compat.] but we’ve been able to use the features as they came out in each of these browsers rather than having to wait until the flip of a switch when their implementation of ES6 was 100% finalized.
 
 The new process involves four different maturity stagesfootnote:[The TC39 proposal process documentation can be found at https://mjavascript.com/out/tc39-process.]. The more mature a proposal is, the more likely it is to eventually make it into the specification.
 
@@ -160,7 +160,9 @@ For the next step, we'll replace the value of the +scripts+ property in +package
 [source,json]
 ----
 {
-  "build": "babel src --out-dir dist"
+  "scripts": {
+    "build": "babel src --out-dir dist"
+  }
 }
 ----
 
@@ -258,12 +260,16 @@ Referencing the +node_modules/.bin+ directory, an implementation detail of how n
 
 [source,json]
 ----
-"lint": "eslint ."
+{
+  "scripts": {
+    "lint": "eslint ."
+  }
+}
 ----
 
 As you might recall from the Babel example, +npm+ add +node_modules+ to the +PATH+ when executing scripts. To lint our codebase, we can execute +npm run lint+ and npm will find the ESLint CLI embedded deep in the +node_modules+ directory.
 
-Let's consider the following +example.js+ file, which is purposely ridden with style issues, to demonstrate what ESLint does.
+Let's consider the following +example.js+ file, which is purposely riddled with style issues, to demonstrate what ESLint does.
 
 [source,javascript]
 ----
@@ -283,7 +289,11 @@ ESLint is able to fix most style problems automatically if we pass in a +--fix+
 
 [source,json]
 ----
-"lint-fix": "eslint . --fix"
+{
+  "scripts": {
+    "lint-fix": "eslint . --fix"
+  }
+}
 ----
 
 When we run +lint-fix+ we'll only get a pair of errors: +hello+ is never used and +false+ is a constant condition. Every other error has been fixed in place, resulting in the bit of source code found below. The remaining errors weren't fixed because ESLint avoids making assumptions about our code, and prefers not to incur in semantic changes. In doing so, +--fix+ becomes a useful tool to resolve code style wrinkles without risking a broken program as a result.
@@ -317,7 +327,7 @@ We get several new mechanics to describe asynchronous code flows in ES6: promise
 
 There's a common practice in JavaScript where developers use plain objects to create hash maps with arbitrary string keys. This can lead to vulnerabilities if we're not careful and let user input end up defining those keys. ES6 introduces a few different native built-ins to manage sets and maps, which don't have the limitation of using string keys exclusively. These collections are explored in chapter 5.
 
-Proxy objects redefine what can be done through JavaScript reflection. Proxy objects are similar to proxies in other contexts, such as web traffic routing. They can intercept any interaction with a JavaScript object such as defining, deleting, or accessing a property. Given the mechanics of how proxies work, they are impossible to implement holistically as a polyfill. We'll devote chapter 6 to understanding proxies.
+Proxy objects redefine what can be done through JavaScript reflection. Proxy objects are similar to proxies in other contexts, such as web traffic routing. They can intercept any interaction with a JavaScript object such as defining, deleting, or accessing a property. Given the mechanics of how proxies work, they are impossible to polyfill holistically: polyfills exist, but they have limitations making them incompatible with the specification in some use cases. We'll devote chapter 6 to understanding proxies.
 
 Besides new built-ins, ES6 comes with several updates to +Number+, +Math+, +Array+, and strings. In chapter 7 we'll go over a plethora of new instance and static methods added to these built-ins.
 

chapters/ch02.asciidoc

@@ -232,7 +232,7 @@ var example = (parameters) => {
 }
 ----
 
-While arrow functions look very similar to your typical anonymous function, they are fundamentally different: arrow functions can't have a name, they can't be used as constructors, they don't have a +prototype+ property, and they are bound to their lexical scope.
+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+.
 
 Let's dig into their semantic differences with traditional functions, the many ways to declare an arrow function, and practical use cases.
 
@@ -261,6 +261,32 @@ If we had defined the function passed to +setInterval+ as a regular anonymous fu
 
 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.
 
+Let's now shift our attention to the following example. What do you think the `console.log` statement will print?
+
+[source,javascript]
+----
+function puzzle () {
+  return function () {
+    console.log(arguments)
+  }
+}
+puzzle('a', 'b', 'c')(1, 2, 3)
+----
+
+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`.
+
+What about in the following case, where we use an arrow function instead of the anonymous function in the previous example?
+
+[source,javascript]
+----
+function puzzle () {
+  return () => console.log(arguments)
+}
+puzzle('a', 'b', 'c')(1, 2, 3)
+----
+
+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'`.
+
 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?
 
 ==== 2.2.2 Arrow Function Flavors
@@ -274,7 +300,7 @@ var example = (parameters) => {
 }
 ----
 
-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.
+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.
 
 [source,javascript]
 ----
@@ -738,7 +764,7 @@ Let's turn our attention to spread and rest operators next.
 
 === 2.4 Rest Parameters and Spread Operator
 
-Before ES6, interacting with an arbitrary amount of function parameters was complicated. You had to use +arguments+, which isn't an array but has a +length+ property. Usually you'd end up casting the +arguments+ object into an actual array using +Array.prototype.slice.call+, and going from there, as shown in the following snippet.
+Before ES6, interacting with an arbitrary amount of function parameters was complicated. You had to use +arguments+, which isn't an array but has a +length+ property. Usually you'd end up casting the +arguments+ object into an actual array using +Array#slice.call+, and going from there, as shown in the following snippet.
 
 [source,javascript]
 ----
@@ -861,8 +887,8 @@ In ES6, you can combine spread with array destructuring. The following piece of
 
 [source,javascript]
 ----
-var [first, second, ...rest] = ['a', 'b', 'c', 'd', 'e']
-console.log(rest)
+var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']
+console.log(other)
 // <- ['c', 'd', 'e']
 ----
 
@@ -921,8 +947,8 @@ The following table summarizes the use cases we've discussed for the spread oper
 |=======
 |Use Case|ES5|ES6
 |Concatenation|+[1, 2].concat(more)+|+[1, 2, ...more]+
-|Push onto list|+list.push.apply(list, [3, 4])+|+list.push(...[3, 4])+
-|Destructuring|+a = list[0], rest = list.slice(1)+ | +[a, ...rest] = list+
+|Push an array onto list|+list.push.apply(list, items)+|+list.push(...items)+
+|Destructuring|+a = list[0], other = list.slice(1)+ | +[a, ...other] = list+
 |+new+ and +apply+|+new (Date.bind.apply(Date, [null,2015,31,8]))+| +new Date(...[2015,31,8])+
 |=======
 
@@ -1062,7 +1088,37 @@ The template we've just prepared would produce output like what's shown in the f
 </article>
 ----
 
-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.
+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.
+
+[source,javascript]
+----
+function getParagraph () {
+  return `
+    Dear Rod,
+
+    This is a template literal string that's indented
+    four spaces. However, you may have expected for it
+    to be not indented at all.
+
+    Nico
+  `
+}
+----
+
+While not ideal, we could get away with a utility function to remove indentation from each line in the resulting string.
+
+[source,javascript]
+----
+function unindent (text) {
+  return text
+    .split('\n')
+    .map(line => line.slice(4))
+    .join('\n')
+    .trim()
+}
+----
+
+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.
 
 ==== 2.5.3 Tagged Templates
 
@@ -1126,7 +1182,7 @@ console.log(text)
 // <- 'Hello MAURICE, I am THRILLED to meet you!'
 ----
 
-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.
+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.
 
 [source,javascript]
 ----
@@ -1225,6 +1281,35 @@ console.log(i)
 // <- i is not defined
 ----
 
+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.
+
+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.
+
+[source,javascript]
+----
+function printNumbers () {
+  for (var i = 0; i < 10; i++) {
+    setTimeout(function () {
+      console.log(i)
+    }, i * 100)
+  }
+}
+printNumbers()
+----
+
+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.
+
+[source,javascript]
+----
+function printNumbers () {
+  for (let i = 0; i < 10; i++) {
+    setTimeout(function () {
+      console.log(i)
+    }, i * 100)
+  }
+}
+printNumbers()
+----
 
 One more thing of note about +let+ is a concept called the "Temporal Dead Zone".