GitBook: [master] 19 pages and one asset modified

Author: AlbertoMontalesi

.gitbook/assets/cover.png

@@ -1,21 +1,20 @@
 # JavaScript ES6 for beginners
 
-<img src="assets/cover.png" width="300">
+![](.gitbook/assets/cover.png)
 
 ## Disclaimer
 
 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...
 
 ## 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 a free ebook that you can read here or on my blog [here](http://albertomontalesi.github.io/).
+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 a free ebook that you can read here or on my blog [here](http://albertomontalesi.github.io/).
 
 ## Contributions & Donations
 
 Any contributions you make are of course greatly appreciated.
 
-If you enjoy my content and you want to donate me a cup of coffee, you can do [here](paypal.me/albertomontalesi).
+If you enjoy my content and you want to donate me a cup of coffee, you can do [here](https://github.com/AlbertoMontalesi/JavaScript-ES6-for-beginners-ebook/tree/33fc6a922b67c3f7e105bd14b3828b77a67ebdb4/paypal.me/albertomontalesi/README.md).
 
 ## Table of contents
 
@@ -36,7 +35,7 @@ If you enjoy my content and you want to donate me a cup of coffee, you can do [h
 * [Chapter 15: Proxies](https://github.com/AlbertoMontalesi/JavaScript-ES6-for-beginners-ebook/blob/master/ebook/15_proxies.md)
 * [Chapter 16: Sets, WeakSets, Maps and WeakMaps](https://github.com/AlbertoMontalesi/JavaScript-ES6-for-beginners-ebook/blob/master/ebook/16_sets_weaksets_maps_weakmaps.md)
 
-
 ## License
 
-This book is licensed under a [Creative Commons Attribution 4.0 - cc-by-4.0](https://creativecommons.org/licenses/by/4.0/)
+This book is licensed under a [Creative Commons Attribution 4.0 - cc-by-4.0](https://creativecommons.org/licenses/by/4.0/)
+

README.md

@@ -0,0 +1,21 @@
+# Table of contents
+
+* [JavaScript ES6 for beginners](README.md)
+* ebook
+  * [Chapter 1: Var vs Let vs Const & the temporal dead zone](ebook/01_var_let_const.md)
+  * [Chapter 2: Arrow functions](ebook/02_arrow_functions.md)
+  * [Chapter 3: Default function arguments](ebook/03_default_function_arguments.md)
+  * [Chapter 4: Template literals](ebook/04_template_literals.md)
+  * [Chapter 5: Additional string methods](ebook/05_additional_string_methods.md)
+  * [Chapter 6: Destructuring](ebook/06_destructuring.md)
+  * [Chapter 7: Iterables and looping](ebook/07_iterables-and-looping.md)
+  * [Chapter 8: Array improvements](ebook/08_array_improvements.md)
+  * [Chapter 9: Spread operator and rest parameters](ebook/09_spread_operator_and_rest_parameters.md)
+  * [Chapter 10: Object literal upgrades](ebook/10_object_literal_upgrades.md)
+  * [Chapter 11: Symbols](ebook/11_symbols.md)
+  * [Chapter 12: Classes](ebook/12_classes.md)
+  * [Chapter 13: Promises](ebook/13_promises.md)
+  * [Chapter 14: Generators](ebook/14_generators.md)
+  * [Chapter 15: Proxies](ebook/15_proxies.md)
+  * [Chapter 16: Sets, WeakSets, Maps and WeakMaps](ebook/16_sets_weaksets_maps_weakmaps.md)
+

SUMMARY.md

@@ -1,14 +1,12 @@
-# Chapter 1: `Var` vs `Let` vs `Const` & the temporal dead zone
+# 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.
 
- 
-
 ## `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";
 }
@@ -28,13 +26,11 @@ console.log(functionScoped);
 
 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.
 
-&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";
 
@@ -64,29 +60,22 @@ console.log(y);
 
 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, wherease when did the same with our `var` it leaked outside of the block-scope and also change 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**.
-
-&nbsp;
+**Important** This **does not** mean that **const are immutable**.
 
 ### The content of a `const` is an Object
 
-``` javascript
+```javascript
 const person = {
   name: 'Alberto',
   age: 25,
@@ -95,16 +84,13 @@ 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:
 
@@ -120,33 +106,27 @@ 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.
 
-
----
-&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.
 
-- 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)
 
-The second opinion comes from [Kyle Simpson:]( blog.getify.com/constantly-confusing-const/)
-
-- 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.
+* 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/).
+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).
+

ebook/01_var_let_const.md

@@ -1,55 +1,50 @@
 # Chapter 2: Arrow functions
 
-
 ## 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:
 
-``` javascript
+```javascript
 const greeting = name => {
   return `hello ${name}`;
 }
 ```
 
 And 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" ];
 
@@ -59,31 +54,24 @@ 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.
 
 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.
@@ -92,7 +80,7 @@ When you use an arrow function, the `this` keyword is inherited from the parent
 
 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 
@@ -106,16 +94,15 @@ 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 
+```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
+```javascript
 // grab our div with class box
 const box = document.querySelector(".box");
 // listen for a click event 
@@ -131,24 +118,21 @@ 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: () => {
@@ -160,7 +144,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) => {
@@ -172,8 +156,9 @@ 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.
+