5th edition

README.md

@@ -10,7 +10,7 @@
 
 # [The Complete Guide to Modern JavaScript ](https://leanpub.com/completeguidetomodernjavascript2020)
 
-## Learn everything from the basics of JavaScript to the new ES2021 features. Practice with more than 50 quizzes and dive into the basics of TypeScript.
+## Learn everything from the basics of JavaScript to the new ES2022 features. Practice with more than 50 quizzes and dive into the basics of TypeScript.
 
 [![book-cover](/assets/banner.jpg)](http://bit.ly/2VV2LbX)
 
@@ -22,9 +22,9 @@ This book is **not** for total beginners, it does **cover** the basics of progra
 
  
 
-## 4th Edition is out
+## 5th Edition is out
 
-Included a new chapter detailing all the new features introduced by ES2021
+Included a new chapter detailing all the new features introduced by ES2022
 
 ## Free vs Paid Version
 
@@ -44,13 +44,13 @@ The Paid version gives you access to:
 You can get the course based on this book on:
 
 - [Leanpub](https://leanpub.com/c/completeguidetomodernjavascript)
-- [Educative](https://www.educative.io/courses/complete-guide-to-modern-javascript?aff=BqmB)
+- [Educative](https://www.educative.io/courses/complete-guide-to-modern-javascript?aff=BqmB) or get the complete path to become a front end develop [here](https://www.educative.io/path/become-front-end-developer?aff=BqmB)
 
 You get the ebook on Amazon, Leanpub and other stores, check the following link to find your local amazon store:
 
 - Play Store [Ebook](https://play.google.com/store/books/details/Alberto_Montalesi_The_Complete_Guide_to_Modern_Jav?id=avqrDwAAQBAJ)
 - Leanpub: [Ebook](https://leanpub.com/completeguidetomodernjavascript2020)
-- Amazon Global: [Paperback](https://bit.ly/2QTvHzn)
+- Amazon: [Paperback](https://www.amazon.com/dp/B09FNNVY1Y?ref=inspiredwebde-20)
 
 If you enjoyed the book please leave a review to support me and help other buyers.
 

ebook/03_default_function_arguments.md

@@ -112,6 +112,13 @@ Cannot destructure property `total` of 'undefined' or 'null'.
 By writing `= {}` we default our argument to an `Object` and no matter what argument we pass in the function, it will be an `Object`:
 
 ```javascript
+function calculatePrice({
+  total = 0,
+  tax = 0.1,
+  tip = 0.05} = {}){
+  return total + (total * tax) + (total * tip);
+}
+
 calculatePrice({});
 // 0
 calculatePrice();

ebook/10_object_literal_upgrades.md

@@ -108,7 +108,7 @@ var name = "myname";
 var person = {};
 // update the object
 person[name] = "Alberto";
-console.log(person.name);
+console.log(person.myname);
 // Alberto
 ```
 

ebook/11_symbols.md

@@ -43,12 +43,12 @@ As we mentioned earlier, we can use them to create identifiers for object proper
 
 ```javascript
 const office = {
-  "Tom" : "CEO",
-  "Mark": "CTO",
-  "Mark": "CIO",
-}
+  Tom: "CEO",
+  Mark: "CTO",
+  Mark: "CIO",
+};
 
-for (person in office){
+for (person in office) {
   console.log(person);
 }
 // Tom
@@ -60,12 +60,12 @@ To avoid naming collisions we can use symbols.
 
 ```javascript
 const office = {
-  [Symbol("Tom")] : "CEO",
-  [Symbol("Mark")] : "CTO",
-  [Symbol("Mark")] : "CIO",
-}
+  [Symbol("Tom")]: "CEO",
+  [Symbol("Mark")]: "CTO",
+  [Symbol("Mark")]: "CIO",
+};
 
-for(person in office) {
+for (person in office) {
   console.log(person);
 }
 // undefined
@@ -93,6 +93,12 @@ console.log(symbols);
 We retrieved the array, but to be able to access the properties we have to use `map`.
 
 ```javascript
+const office = {
+  [Symbol("Tom")] : "CEO",
+  [Symbol("Mark")] : "CTO",
+  [Symbol("Mark")] : "CIO",
+};
+
 const symbols = Object.getOwnPropertySymbols(office);
 const value = symbols.map(symbol => office[symbol]);
 console.log(value);

ebook/20_ES2018_async_iteration_and_more.md

@@ -1,4 +1,4 @@
-# Chapter 20: ES2018 Async Iteration and more?
+# Chapter 20: ES2018 Async Iteration and more
 
 In this chapter we will look at what was introduced with ES2018.
 

ebook/21_ES2019_what_is_coming.md → ebook/21_ES2019_string_methods_and_more.md

@@ -1,8 +1,8 @@
-# Chapter 21: What's new in ES2019?
+# Chapter 21: What's new in ES2019
 
 In this chapter we will look at what is included in the latest version of `ECMAScript`: ES2019.
 
-  
+ 
 
 ## `Array.prototype.flat()` / `Array.prototype.flatMap()`
 

ebook/22_es2020_what_is_coming.md → ebook/22_what_new_es2020.md

@@ -1,6 +1,6 @@
-# Chapter 22: What's coming in ES2020
+# Chapter 22: What's new in ES2020
 
-The latest version of ECMAScript, ES2020, includes many new interesting changes and we are going to cover them in this chapter.
+`ES2020` includes many new interesting changes and we are going to cover them in this chapter.
 
 Not all browsers currently support these features so, I recommend you use the latest version of Chrome or Firefox to test the code examples. Otherwise, if you want to use them in your project, be sure to install a compiler like **Babel**, which at their latest version 7.8 already supports ES2020 by default so you don't need to use any plugin.
 
@@ -9,7 +9,7 @@ Not all browsers currently support these features so, I recommend you use the la
 The support for `BigInt` means that we will be able store much larger integers in our `JavaScript`. The current max is 2^53 and you can get it by using `Number.MAX_SAFE_INTEGER`. That does not mean that you cannot store larger integer, but `JavaScript` does not handle them well, let's look at an example:
 
 ```javascript
-let num = Number.MAX_SAFE_INTEGER
+let num = Number.MAX_SAFE_INTEGER;
 // 9007199254740991
 num + 1;
 // 9007199254740992
@@ -41,12 +41,10 @@ As you can see I did not add `1` but I added `1n`, that's because you can't add
 This will allow you to dynamically import your modules when you need them. Look at the following example:
 
 ```javascript
-if(condition1 && condition2){
-    const module = await import('./path/to/module.js');
-    module.doSomething();
+if (condition1 && condition2) {
+  const module = await import("./path/to/module.js");
+  module.doSomething();
 }
-
-
 ```
 
 If you don't need a module, you don't have to import it and you can just do that when/if it's needed, using `async/await`.
@@ -59,35 +57,34 @@ Let's take these simple `Object` that represent our Users.
 
 ```js
 const user1 = {
- name: 'Alberto',
- age: 27,
- work: {
-  title: 'software developer',
-  location: 'Vietnam'
- }
-}
+  name: "Alberto",
+  age: 27,
+  work: {
+    title: "software developer",
+    location: "Vietnam",
+  },
+};
 
 const user2 = {
- name: 'Tom',
- age: 27
-}
-
+  name: "Tom",
+  age: 27,
+};
 ```
 
 Let's say we want to display the job title of our user.
 As we can see, `work` is an optional property of our `Object` so we would have to write something like this:
 
 ```js
 let jobTitle;
-if (user.work){
- jobTitle = user.work.title
+if (user.work) {
+  jobTitle = user.work.title;
 }
 ```
 
 or using a ternary operator:
 
 ```js
-const jobTitle = user.work ? user.work.title : ''
+const jobTitle = user.work ? user.work.title : "";
 ```
 
 Before we access the property `title` of `work` we need to check that the user actually has a `work`.
@@ -97,7 +94,7 @@ When we are dealing with simple objects it's not such a big deal but when the da
 This is where the Optional Chaining `?.` operator comes to the rescue. This is how we would rewrite our code with this new operator:
 
 ```js
-const jobTitle = user.work?.title
+const jobTitle = user.work?.title;
 ```
 
 Done! More concise and readable.
@@ -117,31 +114,43 @@ Imagine dealing with a deeply nested object with optional properties such as the
 
 ```js
 const elon = {
- name: 'Elon Musk',
- education: {
-  primary_school: { /*  primary school stuff */ },
-  middle_school: { /* middle school stuff */ },
-  high_school: {/* high school stuff here */},
-  university: {
-   name: 'University of Pennsylvania',
-   graduation: {
-    year: 1995
-   }
-  }
- }
-}
+  name: "Elon Musk",
+  education: {
+    primary_school: {
+      /*  primary school stuff */
+    },
+    middle_school: {
+      /* middle school stuff */
+    },
+    high_school: {
+      /* high school stuff here */
+    },
+    university: {
+      name: "University of Pennsylvania",
+      graduation: {
+        year: 1995,
+      },
+    },
+  },
+};
 
 const mark = {
- name: 'Mark Zuckerberg',
- education: {
-  primary_school: { /*  primary school stuff */ },
-  middle_school: { /* middle school stuff */ },
-  high_school: {/* high school stuff here */},
-  university: {
-   name: 'Harvard University',
-  }
- }
-}
+  name: "Mark Zuckerberg",
+  education: {
+    primary_school: {
+      /*  primary school stuff */
+    },
+    middle_school: {
+      /* middle school stuff */
+    },
+    high_school: {
+      /* high school stuff here */
+    },
+    university: {
+      name: "Harvard University",
+    },
+  },
+};
 ```
 
 Not all of our Users have studied in University so that property is going to be optional and the same goes for the graduation as some have dropped out and didn't finish the study.
@@ -150,8 +159,11 @@ Now imagine wanting to access the graduation year of our two users:
 
 ```js
 let graduationYear;
-if(
- user.education.university && user.education.university.graduation && user.education.university.graduation.year){
+if (
+  user.education.university &&
+  user.education.university.graduation &&
+  user.education.university.graduation.year
+) {
   graduationYear = user.education.university.graduation.year;
 }
 ```
@@ -174,14 +186,13 @@ ES6 added `Promise.all` that let us await until all the promises given to it are
 This means that we will be able to tell easily which one of our promises is failing:
 
 ```javascript
-
 const arrayOfPromises = [
-    new Promise((res, rej) => setTimeout(res, 1000)),
-    new Promise((res, rej) => setTimeout(rej, 1000)),
-    new Promise((res, rej) => setTimeout(res, 1000)),
-]
+  new Promise((res, rej) => setTimeout(res, 1000)),
+  new Promise((res, rej) => setTimeout(rej, 1000)),
+  new Promise((res, rej) => setTimeout(res, 1000)),
+];
 
-Promise.allSettled(arrayOfPromises).then(data => console.log(data));
+Promise.allSettled(arrayOfPromises).then((data) => console.log(data));
 
 // [
 //   Object { status: "fulfilled", value: undefined},
@@ -221,10 +232,10 @@ As you can see, all of these values are falsey. Sometimes we want to distinguish
 The Nullish Coalescing operator (`??`) returns the right-hand side operand when the left-hand side is nullish.
 
 ```javascript
-const x = '' ?? 'empty string';
+const x = "" ?? "empty string";
 console.log(x);
 // ''
-const num = 0 ?? 'zero';
+const num = 0 ?? "zero";
 console.log(num);
 // 0
 const n = null ?? "it's null";
@@ -246,7 +257,7 @@ The `matchAll()` method is a new string method that returns an iterator of all t
 ```javascript
 // regex that matches any character in the range from 'a' to 'd'
 const regEx = /[a-d]/g;
-const str = "Lorem ipsum dolor sit amet"
+const str = "Lorem ipsum dolor sit amet";
 const regExIterator = str.matchAll(regEx);
 
 console.log(Array.from(regExIterator));
@@ -265,19 +276,19 @@ As you can see, we called the `matchAll` method against our string and since our
 We could already do something like this:
 
 ```javascript
-import * as stuff from './test.mjs';
+import * as stuff from "./test.mjs";
 ```
 
 But now we can also do the same for **exports**:
 
 ```javascript
-export * as stuff from './test.mjs';
+export * as stuff from "./test.mjs";
 ```
 
 which would be the same as doing:
 
 ```javascript
-export { stuff }
+export { stuff };
 ```
 
 It's not a game-changer feature, but it adds a better symmetry between import and export statements and their syntax.
@@ -289,7 +300,7 @@ It's not a game-changer feature, but it adds a better symmetry between import an
 The `import.meta` object exposes information about a module, such as its URL.
 
 ```javascript
-<script type="module" src="test.js"></script>
+<script type="module" src="test.js"></script>;
 console.log(import.meta); // { url: "file:///home/user/test.js" }
 ```
 
@@ -305,4 +316,4 @@ You would have to manually detect the environment at runtime and bind the approp
 
 Now, in ES202 you can use the `globalThis` which always refers to the `global` object. In Browsers, due to the fact, the `global` object is not directly accessible, the `globalThis` will be a reference to a `Proxy` of it.
 
-Using the new `globalThis` you won't have to worry anymore about the environment in which your application is running in order to access this global value.
+Using the new `globalThis` you won't have to worry anymore about the environment in which your application is running in order to access this global value.