spellcheck

Author: AlbertoMontalesi

ebook/01_var_let_const.md

@@ -1,12 +1,14 @@
 # Chapter 1: Var vs Let vs Const & the temporal dead zone
 
-With the introduction of `let` and `const` in **ES6** we can know better define our variable depending on our needs. Let's have a look at the major differences between them.
+With the introduction of `let` and `const` in **ES6**, we can now better define our variable depending on our needs. Let's have a look at the major differences between them.
+
+ 
 
 ## `Var`
 
-`var` are **function scoped**, which means that if we declare them inside a `for` loop \(which is a **block** scope\) they will be available globally.
+`var` are **function scoped**, which means that if we declare them inside a `for` loop (which is a **block** scope) they will be available globally.
 
-```javascript
+``` javascript 
 for (var i = 0; i < 10; i++) {
   var global = "I am available globally";
 }
@@ -24,13 +26,15 @@ console.log(functionScoped);
 // ReferenceError: functionScoped is not defined
 ```
 
-In the first example the value of `var` global leaked out of the block-scope and could be accessed from the global scope whereas in the second example `var` was confined inside a function-scope and we could not access it from outside.
+In the first example the value of the `var` global leaked out of the block-scope and could be accessed from the global scope, whereas in the second example `var` was confined inside a function-scope and we could not access it from outside.
+
+&nbsp;
 
 ## `Let`
 
-`let` \(and `const` are **block scoped** meaning that they will be available only inside of the block where they are declared and its sub-blocks.
+`let` (and `const`) 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";
 
@@ -58,24 +62,31 @@ 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 the value in the global scope, whereas when did the same with our `var` it leaked outside of the block-scope and also change it in the global scope.
+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 global scope, whereas when did the same with our `var` it leaked outside of the block-scope and also changed it in the global 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 redeclared**.
+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  redeclared**.
 
-```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 **const are immutable**.
+
+&nbsp;
 
 ### The content of a `const` is an Object
 
-```javascript
+``` javascript
 const person = {
   name: 'Alberto',
   age: 25,
@@ -84,13 +95,16 @@ const person = {
 person.age = 26;
 
 // in this case no error will be raised, we are not re-assigning the variable but just one of its properties.
-```
+``` 
+
+---
+&nbsp;
 
 ## The temporal dead zone
 
 According to **MDN**:
 
-> In ECMAScript 2015, let bindings are not subject to **Variable Hoisting**, which means that let declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a ReferenceError \(contrary to a variable declared with var, which will just have the undefined value\). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.
+> In ECMAScript 2015, let bindings are not subject to **Variable Hoisting**, which means that let declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.
 
 Let's look at an example:
 
@@ -106,27 +120,33 @@ let j = "I am a let";
 // expected output: ReferenceError: can't access lexical declaration `j' before initialization
 ```
 
-`var` can be accessed **before** they are defined, but we can't access their **value**. `let` and `const` can't be accessed **before we define them**.
+`var` can be accessed **before** they are defined, but we can't access their **value**.
+`let` and `const` can't be accessed **before we define them**.
+
+This happens because `var` are subject to **hoisting**, which means that they are processed before any code is executed. Declaring a `var` anywhere is equivalent to **declaring it at the top**. This is why we can still access the `var` but we can't yet see its content, hence the `undefined` result.
 
-This happens because `var` are subject to **hoisting** which means that they are processed before any code is executed. Declaring a `var` anywhere is equivalent to **declaring it at the top**. This is why we can still access the `var` but we can't yet see its content, hence the `undefined` 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.
 
 The first opinion comes from [Mathias Bynes:](https://mathiasbynens.be/notes/es6-const)
 
-* 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://github.com/AlbertoMontalesi/JavaScript-ES6-for-beginners-ebook/tree/33fc6a922b67c3f7e105bd14b3828b77a67ebdb4/ebook/blog.getify.com/constantly-confusing-const/README.md)
+- use `const` by default
+- use `let` only if rebinding is needed.
+- `var` should never be used in ES6.
 
-* Use `var` for top-level variables that are shared across many \(especially larger\) scopes.
-* Use `let` for localized variables in smaller scopes.
-* Refactor `let` to `const` only after some code has to be written, and you're reasonably sure that you've got a case where there shouldn't be variable reassignment.
 
-Which opinion to follow is entirely up to you. As always, do your own research and figure out which one you think is the best.
+The second opinion comes from [Kyle Simpson:]( blog.getify.com/constantly-confusing-const/)
 
-You may want to [read this article](https://medium.com/@sbakkila/javascript-es-6-let-and-the-dreaded-temporal-dead-zone-85b89314d168) to understand how `let` affects your performances compared to `var` before you choose to follow either [Mathias Bynes](https://mathiasbynens.be/notes/es6-const) or [Kyle Simpson](https://github.com/AlbertoMontalesi/JavaScript-ES6-for-beginners-ebook/tree/33fc6a922b67c3f7e105bd14b3828b77a67ebdb4/ebook/blog.getify.com/constantly-confusing-const/README.md).
+- Use `var` for top-level variables that are shared across many (especially larger) scopes.
+- Use `let` for localized variables in smaller scopes.
+- Refactor `let` to `const` only after some code has to be written, and you're reasonably sure that you've got a case where there shouldn't be variable reassignment.
+
+Which opinion to follow is entirely up to you. As always, do your own research and figure out which one you think is the best.
 
+You may want to [read this article](https://medium.com/@sbakkila/javascript-es-6-let-and-the-dreaded-temporal-dead-zone-85b89314d168) to understand how `let` affects your performances compared to `var` before you choose to follow either [Mathias Bynes](https://mathiasbynens.be/notes/es6-const) or [Kyle Simpson]( blog.getify.com/constantly-confusing-const/).

ebook/02_arrow_functions.md

@@ -2,49 +2,53 @@
 
 ## What is an arrow function
 
-ES6 introduced fat arrows \(`=>`\) as a way to declare functions. This is how we would normally declare a function in ES5:
+ES6 introduced fat arrows (`=>`) as a way to declare functions.
+This is how we would normally declare a function in ES5:
 
-```javascript
+``` javascript
 var greeting = (function(name) {
   return "hello " + name;
 })
 ```
 
 The new syntax with a fat arrow looks like this:
 
-```javascript
+``` javascript
 const greeting = (name) => {
   return `hello ${name}`;
 }
 ```
 
-But we can go further, if we only have one parameter we can drop the parenthesis and write:
+We can go further, if we only have one parameter we can drop the parenthesis and write:
 
-```javascript
+``` javascript
 const greeting = name => {
   return `hello ${name}`;
 }
 ```
 
-And if we have no parameter at all we need to write empty parenthesis like this:
+If we have no parameter at all we need to write empty parenthesis like this:
 
-```javascript
+``` javascript
 const greeting = () => {
   return "hello";
 }
 ```
 
+
+ 
+
 ## Implicitly return
 
 With arrow functions we can skip the explicit return and return like this:
 
-```javascript
+``` javascript
 const greeting = (name) => `hello ${name}` ;
 ```
 
 Let's say we want to implicitly return an **object literal**, we would do like this:
 
-```javascript
+``` javascript
 const race = "100m dash";
 const runners = [ "Usain Bolt", "Justin Gatlin", "Asafa Powell" ];
 
@@ -54,33 +58,39 @@ console.log(winner);
 // 0: {name: "Usain Bolt", race: "100m dash", place: 1}
 // 1: {name: "Justin Gatlin", race: "100m dash", place: 2}
 // 2: {name: "Asafa Powell", race: "100m dash", place: 3}
+
 ```
 
-To tell JavaScript that what's inside the curly braces is an **object literal** that we want to implicitly return we need to wrap everything inside parenthesis.
+To tell JavaScript that what's inside the curly braces is an **object literal** that we want to implicitly return, we need to wrap everything inside parenthesis.
 
 Writing `race` or `race:race` is the same.
 
+ 
+
 ## Arrow functions are anonymous
 
 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");
 ```
 
+
+ 
+
 ## Arrow function and the `this` keyword
 
-You need to be careful when using arrow functions in conjunction with the this keyword as they behave differently from normal functions.
+You need to be careful when using arrow functions in conjunction with the this keyword, as they behave differently from normal functions.
 
 When you use an arrow function, the `this` keyword is inherited from the parent scope.
 
 This can be useful in cases like this one:
 
-```javascript
+``` javascript 
 // grab our div with class box
 const box = document.querySelector(".box");
 // listen for a click event 
@@ -94,15 +104,16 @@ box.addEventListener("click",function() {
 })
 ```
 
-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, trowing this error:
 
-```javascript
-Uncaught TypeError: cannot read property "toggle" of undefined
+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, trowing this error:
+
+``` 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:
+Since we know that **arrow functions** inherit the value of `this` from the parent scope, we can re-write our function like this:
 
-```javascript
+``` javascript
 // grab our div with class box
 const box = document.querySelector(".box");
 // listen for a click event 
@@ -118,21 +129,24 @@ box.addEventListener("click",function() {
 
 Here, the second `this` will inherit from its parent, and will be therefore set to the `const` box.
 
+
+ 
+
 ## 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 all show when to be careful using `this` inside of arrows.
 
-```javascript
+``` javascript
 const button = document.querySelector("btn");
 button.addEventListener("click", () => {
   // error: *this* refers to the window 
   this.classList.toggle("on");
 })
 ```
 
-```javascript
+``` javascript
 const person = {
   age: 10,
   grow: () => {
@@ -144,7 +158,7 @@ const person = {
 
 Here's another example of when you should use a normal function instead of an arrow.
 
-```javascript
+``` javascript
 const orderRunners = () => {
   const runners = Array.from(arguments);
   return runners.map((runner, i) => {
@@ -156,9 +170,8 @@ const orderRunners = () => {
 
 This code will return:
 
-```javascript
+``` javascript
 ReferenceError: arguments is not defined
 ```
 
-We don't have access to the `arguments` object in arrow functions, we need to use a normal function.
-
+We don't have access to the `arguments` object in arrow functions, we need to use a normal function.

ebook/03_default_function_arguments.md

@@ -4,7 +4,7 @@
 
 ES6 makes it very easy to set default function arguments. Let's look at an example:
 
-```javascript
+``` javascript
 function calculatePrice(total, tax = 0.1, tip = 0.05){
 // When no value is given for tax or tip, the default 0.1 and 0.05 will be used 
 return total + (total * tax) + (total * tip);,
@@ -13,14 +13,14 @@ return total + (total * tax) + (total * tip);,
 
 What if we don't want to pass the parameter at all, like this:
 
-```javascript
+``` javascript
 // The 0.15 will be bound to the second argument, tax even if in our intention it was to set 0.15 as the tip
 calculatePrice(100, 0.15)
 ```
 
 We can solve by doing this:
 
-```javascript
+``` javascript
 // In this case 0.15 will be bound to the tip
 calculatePrice(100, undefined, 0.15)
 ```
@@ -29,11 +29,10 @@ It works, but it's not very nice, how to improve it?
 
 With **destructuring** we can write this:
 
-```javascript
+``` javascript
 const Bill = calculatePrice({ tip: 0.15, total:150});
 ```
 
 We don't even have to pass the parameters in the same order as when we declared our function, since we are calling them the same way as the arguments JavaScript will know how to match them.
 
-Don't worry about destructuring, we will talk about it in a later chapter.
-
+Don't worry about destructuring, we will talk about it in a later chapter.