Major update and fixes

Author: AlbertoMontalesi

ebook/01_var_let_const.md

@@ -1,14 +1,14 @@
 # Chapter 1: Var vs Let vs Const & the temporal dead zone
 
-With the introduction of `let` and `const` in **ES6**, we can now better define our variables depending on our needs. During our JavaScript primer we looked at the basic differences between these 3 keywords, now we will go into more detail.
+With the introduction of `let` and `const` in **ES6**, we can now better define our variables depending on our needs. During our `JavaScript` primer we looked at the basic differences between these 3 keywords, now we will go into more detail.
 
  
 
 ## `Var`
 
 Variables declared with the `var` keyword are **function scoped**, which means that if we declare them inside a `for` loop (which is a **block** scope) they will be available even outside of it.
 
-``` javascript
+```JavaScript
 for (var i = 0; i < 10; i++) {
   var leak = "I am available outside of the loop";
 }
@@ -34,7 +34,7 @@ In the first example the value of the `var` leaked out of the block-scope and co
 
 Variables declared with the `let` (and `const`) keyword are **block scoped**, meaning that they will be available only inside of the block where they are declared and its sub-blocks.
 
-``` javascript
+```JavaScript
 // using `let`
 let x = "global";
 
@@ -62,29 +62,29 @@ console.log(y);
 // expected output: block-scoped
 ```
 
-As you can see, when we assigned a new value to our `let` inside our block-scope, it **did not** change its value in the outer scope, whereas when did the same with our `var` it leaked outside of the block-scope and also changed it in the outer scope.
+As you can see, when we assigned a new value to the variable declared with `let` inside our block-scope, it **did not** change its value in the outer scope. Whereas, when we did the same with the variable declared with var, it leaked outside of the block-scope and also changed it in the outer scope.
 
 &nbsp;
 
 ## `Const`
 
-Similarly to `let`, `const` are **block-scoped**, but they differ in the fact that their value **can't change through re-assignment or can't be re-declared**.
+Similarly to `let`, variables declared with `const` are also **block-scoped**, but they differ in the fact that their value **can't change through re-assignment or can't be re-declared**.
 
-``` javascript
+```JavaScript
 const constant = 'I am a constant';
 constant = " I can't be reassigned";
 
 // Uncaught TypeError: Assignment to constant variable
 ```
 
-**Important**
-This **does not** mean that **const are immutable**.
+>**Important**:
+This **does not** mean that variables declared with `const` are immutable.
 
 &nbsp;
 
 ### The content of a `const` is an Object
 
-``` javascript
+```JavaScript
 const person = {
   name: 'Alberto',
   age: 25,
@@ -99,9 +99,9 @@ In this case we are not reassigning the whole variable but just one of its prope
 
 ---
 
-Note: We can still freeze the const object, which will not change the contents of the object (but trying to change the values of object JavaScript will not throw any error)
+>Note: We can still freeze the `const` object, which will not change the contents of the object (but trying to change the values of object `JavaScript` will not throw any error)
 
-``` javascript
+```JavaScript
 const person = {
   name: 'Alberto',
   age: 25,
@@ -144,19 +144,19 @@ let j = "I am a let";
 
 Despite what you may read on other sources, both `var` and `let`(and `const`) are subject to **hoisting** which means that they are processed before any code is executed and lifted up to the top of their scope (whether it's global or block).
 
-The main differences lays in the fact that `var` can still be accessed before they are defined, causing the value to be `undefined` while on the other hand, `let` variables sit in a **temporal dead zone** until they are declared, causing an error when accessed before initialization which makes it easier to debug code rather than having an `undefined` as the result.
+The main differences lie in the fact that `var` can still be accessed before they are defined. This causes the value to be `undefined`. While on the other hand, `let` lets the variables sit in a **temporal dead zone** until they are declared. And this causes an error when accessed before initialization, which makes it easier to debug code rather than having an `undefined` as the result.
 
 ---
 &nbsp;
 
 ## When to use `Var`, `Let` and `Const`
 
-There is no rule stating where to use each of them and people have different opinions. Here I am going to present to you two opinions from popular developers in the JavaScript community.
+There is no rule stating where to use each of them and people have different opinions. Here I am going to present to you two opinions from popular developers in the `JavaScript` community.
 
 The first opinion comes from [Mathias Bynes:](https://mathiasbynens.be/notes/es6-const)
 
-- use `const` by default
-- use `let` only if rebinding is needed.
+- Use `const` by default
+- Use `let` only if rebinding is needed.
 - `var` should never be used in ES6.
 
 The second opinion comes from [Kyle Simpson:](https://me.getify.com/)

ebook/02_arrow_functions.md

@@ -5,32 +5,32 @@
 ES6 introduced fat arrows (`=>`) as a way to declare functions.
 This is how we would normally declare a function in ES5:
 
-``` javascript
-var greeting = function(name) {
+```JavaScript
+const greeting = function(name) {
   return "hello " + name;
 }
 ```
 
 The new syntax with a fat arrow looks like this:
 
-``` javascript
-const greeting = (name) => {
+```JavaScript
+var greeting = (name) => {
   return `hello ${name}`;
 }
 ```
 
 We can go further, if we only have one parameter we can drop the parenthesis and write:
 
-``` javascript
-const greeting = name => {
+```JavaScript
+var greeting = name => {
   return `hello ${name}`;
 }
 ```
 
 If we have no parameter at all we need to write empty parenthesis like this:
 
-``` javascript
-const greeting = () => {
+```JavaScript
+var greeting = () => {
   return "hello";
 }
 ```
@@ -41,7 +41,7 @@ const greeting = () => {
 
 With arrow functions we can skip the explicit `return` and return like this:
 
-``` javascript
+```JavaScript
 const greeting = name => `hello ${name}`;
 ```
 
@@ -64,9 +64,9 @@ const arrowFunction = (name) => {
 }
 ```
 
-Let's say we want to implicitly return an **object literal**, we would do like this:
+Let's say we want to implicitly return an **object literal**, we would do it like this:
 
-``` javascript
+```JavaScript
 const race = "100m dash";
 const runners = [ "Usain Bolt", "Justin Gatlin", "Asafa Powell" ];
 
@@ -78,7 +78,9 @@ console.log(results);
 // {name: "Asafa Powell", race: "100m dash", place: 3}]
 ```
 
-To tell JavaScript what's inside the curly braces is an **object literal** we want to implicitly return, we need to wrap everything inside parenthesis.
+In this example, we are using the `map` function to iterate over the array `runners`. The first argument is the current item in the array and the `i` is the index of it. For each item in the array we are then adding into `results` an Object containing the properties `name`, `race`, and `place`.
+
+To tell `JavaScript` what's inside the curly braces is an **object literal** we want to implicitly return, we need to wrap everything inside parenthesis.
 
 Writing `race` or `race: race` is the same.
 
@@ -90,7 +92,7 @@ As you can see from the previous examples, arrow functions are **anonymous**.
 
 If we want to have a name to reference them we can bind them to a variable:
 
-``` javascript
+```JavaScript
 const greeting = name => `hello ${name}`;
 
 greeting("Tom");
@@ -106,7 +108,19 @@ When you use an arrow function, the `this` keyword is inherited from the parent
 
 This can be useful in cases like this one:
 
-``` javascript
+```html
+<div class="box open">
+	This is a box
+</div>
+```
+
+```css
+.opening {
+	background-color:red;
+}
+```
+
+```JavaScript
 // grab our div with class box
 const box = document.querySelector(".box");
 // listen for a click event
@@ -115,59 +129,80 @@ box.addEventListener("click", function() {
   this.classList.toggle("opening");
   setTimeout(function(){
     // try to toggle again the class
-    this.classList.toggle("open");
-    });
+    this.classList.toggle("opening");
+    },500);
 });
 ```
 
 The problem in this case is that the first `this` is bound to the `const` box but the second one, inside the `setTimeout`, will be set to the `Window` object, throwing this error:
 
-``` javascript
+```JavaScript
 Uncaught TypeError: cannot read property "toggle" of undefined
 ```
 
 Since we know that **arrow functions** inherit the value of `this` from the parent scope, we can re-write our function like this:
 
-``` javascript
-// grab our div with class box
+```JavaScript
 const box = document.querySelector(".box");
 // listen for a click event
-box.addEventListener("click", function () {
+box.addEventListener("click", function() {
   // toggle the class opening on the div
   this.classList.toggle("opening");
-  setTimeout(() => {
+  setTimeout(()=>{
     // try to toggle again the class
-    this.classList.toggle("open");
-   });
+    this.classList.toggle("opening");
+    },500);
 });
 ```
 
 Here, the second `this` will inherit from its parent, and will be set to the `const` box.
 
+Running the example code you should see our `div` turning red for just half a second.
+
 &nbsp;
 
 ## When you should avoid arrow functions
 
 Using what we know about the inheritance of the `this` keyword we can define some instances where you should **not** use arrow functions.
 
-The next 2 examples show when to be careful using `this` inside of arrows.
+The next two examples show when to be careful using `this` inside of arrows.
+
+#### Example 1
 
-``` javascript
+```JavaScript
 const button = document.querySelector("btn");
 button.addEventListener("click", () => {
   // error: *this* refers to the `Window` Object
   this.classList.toggle("on");
 })
 ```
 
-``` javascript
-const person = {
+&nbsp;
+
+#### Example 2
+
+```JavaScript
+const person1 = {
+  age: 10,
+  grow: function() {
+    this.age++;
+    console.log(this.age);
+  }
+}
+
+person1.grow();
+// 11
+
+const person2 = {
   age: 10,
   grow: () => {
     // error: *this* refers to the `Window` Object
     this.age++;
+    console.log(this.age);
   }
 }
+
+person2.grow();
 ```
 
 Another difference between Arrow functions and normal functions is the access to the `arguments object`.
@@ -193,15 +228,15 @@ Let's have a look at this example with our previous list of runners:
 ```javascript
 const showWinner = () => {
   const winner = arguments[0];
-  return `${winner} was the winner`
+  console.log(`${winner} was the winner`)
 }
 
 showWinner( "Usain Bolt", "Justin Gatlin", "Asafa Powell" )
 ```
 
 This code will return:
 
-``` javascript
+```JavaScript
 ReferenceError: arguments is not defined
 ```
 
@@ -214,7 +249,7 @@ Example with **arrow function**:
 ```javascript
 const showWinner = (...args) => {
   const winner = args[0];
-  return `${winner} was the winner`
+  console.log(`${winner} was the winner`)
 }
 showWinner("Usain Bolt", "Justin Gatlin", "Asafa Powell" )
 // "Usain Bolt was the winner"
@@ -225,7 +260,7 @@ Example with **function**:
 ```javascript
 const showWinner = function() {
   const winner = arguments[0];
-  return `${winner} was the winner`
+  console.log(`${winner} was the winner`)
 }
 showWinner("Usain Bolt", "Justin Gatlin", "Asafa Powell")
 // "Usain Bolt was the winner"

ebook/03_default_function_arguments.md

@@ -81,14 +81,15 @@ With **destructuring** we can write this:
 function calculatePrice({
   total = 0,
   tax = 0.1,
-  tip = 0.05} = {} ){
+  tip = 0.05} = {}){
   return total + (total * tax) + (total * tip);
 }
 
 const bill = calculatePrice({ tip: 0.15, total:150 });
 // 187.5
+```
 
-We made the argument of our function an Object and when calling the function we don't even have to worry about the order of the parameters because they will be matched based on their key.
+We made the argument of our function an Object. When calling the function, we don’t even have to worry about the order of the parameters because they are matched based on their key.
 
 In the example above the default value for *tip* was 0.05 and we overwrote it with 0.15 but we didn't give a value to tax which remained the default 0.1.
 
@@ -104,7 +105,7 @@ Notice this detail:
 
 If we don't default our argument Object to an empty Object, and we were to try and run `calculatePrice()` we would get:
 
-``` javascript
+```JavaScript
 Cannot destructure property `total` of 'undefined' or 'null'.
 ```
 
@@ -121,4 +122,19 @@ calculatePrice(undefined)
 
 No matter what we passed, the argument was defaulted to an `Object` which had three default properties of total, tax and tip.
 
+```javascript
+function calculatePrice({
+  total = 0,
+  tax = 0.1,
+  tip = 0.05}){
+  return total + (total * tax) + (total * tip);
+}
+calculatePrice({});
+// cannot read property `total` of 'undefined' or 'null'.
+calculatePrice();
+// cannot read property `total` of 'undefined' or 'null'.
+calculatePrice(undefined)
+// cannot read property `total` of 'undefined' or 'null'.
+```
+
 Don't worry about destructuring, we will talk about it in Chapter 10.