updated to 2019 edition

Author: AlbertoMontalesi

README.md

@@ -11,30 +11,60 @@
 [![HitCount](http://hits.dwyl.io/albertomontalesi/JavaScript-es6-and-beyond-ebook.svg)](http://hits.dwyl.io/albertomontalesi/JavaScript-es6-and-beyond-ebook)
 
 
-# [The Complete Guide to Modern JavaScript ](https://www.amazon.com/dp/B07DGGFNS6)
+# [The Complete Guide to Modern JavaScript ](https://www.amazon.com/dp/B07S2M3FVV)
 
-## Discover all the new features introduced to JavaScript from 2015 to 2018
+## Discover all the new features introduced to JavaScript from 2015 to 2019
 
-![book-cover](/assets/Cover.jpg)
+![book-cover](/assets/Cover.png)
 
-## Disclaimer
+## Who is this book for ?
 
-This book is intended for somebody already familiar with the basics of JavaScript, as I am only focusing on the new features introduced by ES6 and I won't be explaining what is a `var`, how to create a function, etc...
+Whether you are a complete beginner or you have some knowledge in JavaScript, this book will guide you from the basics of the language to all the new features introduced until 2019. At the end of each chapter test your knowledge with quizzes.
 
-Additional chapters cover the new features introduced post ES6 (ES2015) all the way to the most recent version, ES2018.
+After reading this book, Let Const, generators, promises and async won't be a problem anymore.
+
+If you want to experience something new, this book also includes an introduction to the basics of TypeScript, a must-know for any JavaScript develop in 2019.
 
 ## Where to buy it
 
-You can purchase this ebook on amazon.com at this [link](https://www.amazon.com/dp/B07DGGFNS6) or click [here](http://bit.ly/2kGMwKn) if you are not in the US to find the right amazon store.
+You can purchase this ebook on amazon.com at this [link](https://www.amazon.com/dp/B07S2M3FVV)
 
 You can also read my articles on my blog [here](https://www.inspiredwebdev.com/).
 
-The ebook contains 50+ extra quizzes for your to practice and test your knowledge after reading each chapter.
+The ebook includes two sections dedicated to the basics of JavaScript and TypeScript and also contains 50+ extra quizzes for your to practice and test your knowledge after reading each chapter.
 You can have a look at the quizzes from the first two chapters in the `quizzes` folder.
 
 ## About me
 
-My name is Alberto, I'm from Italy and I love programming. As I was studying ES6 I decided that the best way for me to test my understanding of it was to write articles about it. I have now packaged those articles in this ebook.
+My name is Alberto Montalesi, I am from Italy and I am working in Vietnam as a Software Developer creating enterprise software.
+
+My passion for programming started late in life, in 2016 at the age of 24 after a bachelor's degree in Law.
+
+My path to become a self-taught software developer has not been easy, but it's definitely something I would do again.
+
+You can read my story on Medium at this link: https://medium.freecodecamp.org/my-journey-from-esl-teacher-to-software-developer-35cc998a6ec0
+
+Writing a book that can help other aspiring developers fills me with pride as I know very well how hard it can be to find the motivation and the resources to continue studying and improving your skill.
+
+Apart from programming, my other passions include photography, traveling and gaming.
+
+ 
+
+## Get in touch
+
+If you want to get in touch for any type of collaboration or discussion you can find me on:
+
+- [Medium](https://medium.com/@labby92) at https://medium.com/@labby92
+- [Github](https://github.com/AlbertoMontalesi) at https://github.com/AlbertoMontalesi
+- [InspiredWebDev](https://inspiredwebdev.com) my personal blog https://inspiredwebdev.com
+  
+ 
+
+## Contributions & Donations
+
+Any contributions you make are of course greatly appreciated.
+
+If you enjoy my content and you want to donate a cup of coffee to me, you can do so at [https://www.paypal.me/albertomontalesi](https://www.paypal.me/albertomontalesi).
 
 
 ## License

assets/Cover.jpg

@@ -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. 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 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`
 
-`var` 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.
+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";
 }
@@ -26,13 +26,13 @@ console.log(functionScoped);
 // ReferenceError: functionScoped is not defined
 ```
 
-In the first example the value of the `var`  leaked out of the block-scope and could be accessed from outside of it, 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` leaked out of the block-scope and could be accessed from outside of it, 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.
+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
 // using `let`
@@ -62,7 +62,7 @@ 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 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.
+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.
 
 &nbsp;
 
@@ -78,8 +78,7 @@ constant = " I can't be reassigned";
 // Uncaught TypeError: Assignment to constant variable
 ```
 
-
-**Important** 
+**Important**
 This **does not** mean that **const are immutable**.
 
 &nbsp;
@@ -95,18 +94,19 @@ const person = {
 person.age = 26;
 console.log(person.age);
 // 26
-// in this case no error will be raised, we are not re-assigning the variable but just one of its properties.
 ```
 
+In this case we are not reassigning the whole variable but just one of its properties, which is perfectly fine.
+
 ---
 
 &nbsp;
 
 ## The temporal dead zone
 
-According to **MDN**:
+Now we will have a look at a very important concept which may sound complicate from its name, but i reassure you it is not.
 
-> 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.
+First let's have a look at a simple example:
 
 Let's look at an example:
 
@@ -125,8 +125,9 @@ let j = "I am a let";
 `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.
+Despite what you may read on other sources, both `var` and `let`(and `const`) are subject to **hoisting** which measn thath they are processe 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.
 
 ---
 &nbsp;
@@ -137,7 +138,6 @@ There is no rule stating where to use each of them and people have different opi
 
 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.
@@ -150,3 +150,5 @@ The second opinion comes from [Kyle Simpson:]( blog.getify.com/constantly-confus
 - 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.
+
+My personal opinion is to always use `const` by default and then switch to `let` if you see yourself in need of rebinding the value.

assets/Cover.png

@@ -39,24 +39,43 @@ const greeting = () => {
 
 ## Implicitly return
 
-With arrow functions we can skip the explicit return and return like this:
+With arrow functions we can skip the explicit `return` and return like this:
 
 ``` javascript
 const greeting = name => `hello ${name}`;
 ```
 
+Look at a side by side comparison with an old ES5 Function:
+
+```js
+const oldFunction = function(name){
+  return `hello ${name}`
+}
+
+const arrowFunction = name => `hello ${name}`;
+```
+
+Both functions achieve the same result, but the new syntax allows you to be more concise.
+Beware! Readability is more important than conciceness so you might want to write your funciton like this if you are working in a team and not everybody is totally up-to-date with ES6.
+
+```js
+const arrowFunction = (name) => {
+  return `hello ${name}`;
+}
+```
+
 Let's say we want to implicitly return an **object literal**, we would do like this:
 
 ``` javascript
 const race = "100m dash";
 const runners = [ "Usain Bolt", "Justin Gatlin", "Asafa Powell" ];
 
-const winner = runners.map((runner, i) =>  ({ name: runner, race, place: i + 1}));
+const results = runners.map((runner, i) =>  ({ name: runner, race, place: i + 1}));
 
-console.log(winner);
-// {name: "Usain Bolt", race: "100m dash", place: 1}
+console.log(results);
+// [{name: "Usain Bolt", race: "100m dash", place: 1}
 // {name: "Justin Gatlin", race: "100m dash", place: 2}
-// {name: "Asafa Powell", race: "100m dash", place: 3}
+// {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.
@@ -77,7 +96,6 @@ const greeting = name => `hello ${name}`;
 greeting("Tom");
 ```
 
-
  
 
 ## Arrow function and the `this` keyword
@@ -133,7 +151,7 @@ Here, the second `this` will inherit from its parent, and will be set to the `co
 
 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.
+The next 2 examples show when to be careful using `this` inside of arrows.
 
 ``` javascript
 const button = document.querySelector("btn");
@@ -153,15 +171,33 @@ const person = {
 }
 ```
 
-One other difference between Arrow functions and normal functions is access to the `arguments`. 
+Another difference between Arrow functions and normal functions is the access to the `arguments object`.
+The `arguments object` is an array-like object that we can access from inside functions and contains the values of the arguments passed to that function.
+
+A quick example:
+
+```js
+function example(){
+  console.log(arguments[0])
+}
+
+example(1,2,3);
+// 1
+```
+
+As you can see we accessed the first argument using an array notation `arguments[0]`.
+
+Similarly as what we saw with the `this` keyword, Arrow functions inherit the value of the `arguments object` from their parent scope.
+
+Let's have a look at this example with our previous list of runners:
 
 ```javascript
-const orderRunners = () => {
-  const runners = Array.from(arguments);
-  return runners.map((runner, i) => {
-    return `#{runner} was number #{i +1}`;
-   })
+const showWinner = () => {
+  const winner = arguments[0];
+  return `${winner} was the winner`
 }
+
+showWinner( "Usain Bolt", "Justin Gatlin", "Asafa Powell" )
 ```
 
 This code will return:
@@ -170,14 +206,28 @@ This code will return:
 ReferenceError: arguments is not defined
 ```
 
-To access all the arguments of an array, use old function notation, or the splat syntax. The name of the parameter does not matter (here it is called args to reduce confusion with `arguments`). 
+To access all the arguments passed to the function we can either use the old function notation or the spread syntax(which we will discuss more in Chapter 9)
+
+Remember that `arguments` it's just a keyword, it's not a variable name.
+
+Example with **arrow function**:
 
 ```javascript
-const orderRunners = (...args) => {
-  const runners = Array.from(args);
-  console.log(runners);
-  return runners.map((runner, i) => {
-    return `#{runner} was number #{i +1}`;
-  })
+const showWinner = (...args) => {
+  const winner = args[0];
+  return `${winner} was the winner`
+}
+showWinner("Usain Bolt", "Justin Gatlin", "Asafa Powell" )
+// "Usain Bolt was the winner"
+```
+
+Example with **function**:
+
+```js
+const showWinner = function() {
+  const winner = arguments[0];
+  return `${winner} was the winner`
 }
+showWinner("Usain Bolt", "Justin Gatlin", "Asafa Powell")
+// "Usain Bolt was the winner"
 ```