diff --git a/README.md b/README.md index 296e0b0..0101153 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,9 @@ [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/AlbertoMontalesi/JavaScript-es6-and-beyond-ebook/pulls) -# [The Complete Guide to Modern JavaScript ](https://amzn.to/2H76VUz) +# [The Complete Guide to Modern JavaScript ](https://leanpub.com/completeguidetomodernjavascript2020) -## Learn everything from the basics of JavaScript to the new ES2020 features. Practice with more than 50 quizzes and dive into the basics of TypeScript. +## 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. [![book-cover](/assets/banner.jpg)](http://bit.ly/2VV2LbX) @@ -22,6 +22,10 @@ This book is **not** for total beginners, it does **cover** the basics of progra   +## 4th Edition is out + +Included a new chapter detailing all the new features introduced by ES2021 + ## Free vs Paid Version The Paid version gives you access to: @@ -45,9 +49,8 @@ You can get the course based on this book on: 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) -- Kobo [Ebook](https://www.kobo.com/ww/en/ebook/complete-guide-to-modern-javascript) - Leanpub: [Ebook](https://leanpub.com/completeguidetomodernjavascript2020) -- Amazon Global: [Ebook](http://a-fwd.to/jHO6m9t) | [Paperback](http://a-fwd.to/3BiBhIM) +- Amazon Global: [Paperback](http://a-fwd.to/3BiBhIM) If you enjoyed the book please leave a review to support me and help other buyers. @@ -79,7 +82,7 @@ If you want to get in touch for any type of collaboration or discussion you can - [DevTo](https://dev.to/albertomontalesi) at https://dev.to/albertomontalesi - [Medium](https://medium.com/@labby92) at https://medium.com/@labby92 - [Github](https://github.com/AlbertoMontalesi) at https://github.com/AlbertoMontalesi - +   ## Contributions & Donations diff --git a/assets/cover.jpg b/assets/cover.jpg deleted file mode 100644 index 84f06dc..0000000 Binary files a/assets/cover.jpg and /dev/null differ diff --git a/assets/cover.png b/assets/cover.png new file mode 100644 index 0000000..6dafd02 Binary files /dev/null and b/assets/cover.png differ diff --git a/ebook/10_object_literal_upgrades.md b/ebook/10_object_literal_upgrades.md index d6846f5..fae0a5a 100644 --- a/ebook/10_object_literal_upgrades.md +++ b/ebook/10_object_literal_upgrades.md @@ -23,7 +23,7 @@ const person = { surname: surname, age: age, nationality: nationality, -} +}; console.log(person); // { name: 'Alberto', @@ -40,7 +40,7 @@ const person = { surname, age, nationality, -} +}; console.log(person); // {name: "Alberto", surname: "Montalesi", age: 25, nationality: "Italian"} ``` @@ -56,10 +56,10 @@ Let's look at an example from ES5: ```javascript const person = { name: "Alberto", - greet: function(){ + greet: function () { console.log("Hello"); }, -} +}; person.greet(); // Hello @@ -70,10 +70,10 @@ If we wanted to add a function to our object, we had to use the `function` keywo ```javascript const person = { name: "Alberto", - greet(){ + greet() { console.log("Hello"); }, -} +}; person.greet(); // Hello; @@ -105,10 +105,10 @@ This is how we would dynamically define properties of an object in ES5: ```javascript var name = "myname"; // create empty object -var person = {} +var person = {}; // update the object person[name] = "Alberto"; -console.log(person.myname); +console.log(person.name); // Alberto ``` @@ -117,8 +117,8 @@ In the example given above, first we created the object and then we modified it. ```javascript const name = "myname"; const person = { - [name]:"Alberto", + [name]: "Alberto", }; -console.log(person.myname); +console.log(person.name); // Alberto ``` diff --git a/ebook/23_what_new_es2021.md b/ebook/23_what_new_es2021.md new file mode 100644 index 0000000..d7f21ba --- /dev/null +++ b/ebook/23_what_new_es2021.md @@ -0,0 +1,236 @@ +# Chapter 23: What's new in ES2021 + +Let's get started with the first of the new ES2021 features: + +## String.prototype.replaceAll + +`String.replace` is a useful method that allows us to replace a pattern in a string with something else. The problem is that if we want to use a `string` as a pattern and not a RegEx, only the **first** occurrence will get replaced. + +```js +const str = "I like my dog, my dog loves me"; +const newStr = str.replace("dog", "cat"); +newStr; +// "I like my cat, my dog loves me" +``` + +As the name implies, `String.replaceAll` will do exactly what we need in this scenario, replace all the matching pattern, allowing us to easily replace all mentions of a substring, without the use of RegEx: + +```js +const str = "I like my dog, my dog loves me"; +const newStr = str.replaceAll("dog", "cat"); +newStr; +// "I like my cat, my cat loves me" +``` + +[Read More](https://github.com/tc39/proposal-string-replaceall) + +  + +## Promise.any + +During the past years we've seen new methods such as `Promise.all` and `Promise.race` with ES6, `Promise.allSettled` last year with ES2020 and ES2021 will introduce a new one: `Promise.any`. + +I bet you can already tell what it does from the name of the method. + +`Promise.any` shorts-circuits once a given promise is fulfilled but will continue until all promises are rejected. + +Don't get confused with `Promise.race` because with `race`, the promise short-circuits once one of the given promises resolves **or rejects**. + +They have similar behavior for what concerns fulfillment but very different for rejection. + +If all the promises inside of `Promise.any` fails, it will throw an `AggregateError` (a subclass of `Error`) containing the rejection reasons of all the promises. + +We can use it like this: + +```javascript +// example taken from: https://github.com/tc39/proposal-promise-any +Promise.any(promises).then( + (first) => { + // Any of the promises was fulfilled. + }, + (error) => { + // All of the promises were rejected. + } +); +``` + +[Read More](https://github.com/tc39/proposal-promise-any) + +  + +## Logical Operators and Assignment Expressions + +With `ES2021` we will be able to combine Logical Operators (`&&`, `||` and `??`) with Assignment Expression (`=`) similarly to how it's already possible to do in Ruby. + +If you skipped on `ES2020` you may not be aware of `??` which is the **nullish coalescing** operator. Let's look at an example: + +```js +const a = null ?? "test"; +// 'test' +const b = 0 ?? "test"; +// 0 +``` + +The **nullish coalescing** operator returns the _right_ hand-side when the left-hand-side is `null` or `undefined`, otherwise it returns the _left_ hand-side. In the first example the left-hand-side was `null` thus it returned the right-hand-side while on the second example it returned the left-hand-side because it was neither `null` nor `undefined`. + +Moving back to ES2021 stuff, in `JavaScript` we already have many [assignment opeartors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Assignment_operators) like the following basic example: + +```js +let a = 0; +a += 2; +// 2 +``` + +But with this new proposal we will be able to do the following: + +```js +a ||= b; +// equivalent to a = a || b + +c &&= d; +// equivalent to c = c && d + +e ??= f; +// equivalent to e = e ?? f +``` + +Let's go over each one by one: + +- `a ||= b` will return `a` if `a` is a truthy value, or `b` if `a` is falsy +- `c &&= d` will return `d` if both `c` and `d` are truthy, or `c` otherwise +- `e ??= f` will return `f` if `e` is `null` or `undefined` otherwise it will return `e` + +[Read More](https://github.com/tc39/proposal-logical-assignment) + +  + +## Numeric Separators + +The introduction of Numeric Separators will make it easier to read numeric values by using the `_` (underscore) character to provide a separation between groups of digits. + +Let's look at more examples: + +```js +x = 100_000; +// 100 thousand + +dollar = 55_90; +// 55 dollar 90 cents + +fraction = 0.000_1; +// 1 thousandth +``` + +[Read more](https://github.com/tc39/proposal-numeric-separator) + +  + +## WeakRefs + +From [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#:~:text=A%20weak%20reference%20to%20an%20object%20is%20a%20reference%20that,reclaimed%20by%20the%20garbage%20collector.&text=When%20an%20object%20no%20longer,object%20and%20reclaim%20its%20memory.): A weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector. + +With this new proposal for ES2021, we will be able to create weak references to objects with the `WeakRef` class. Please follow the link below to read a more in-depth explanation. + +[Read More](https://github.com/tc39/proposal-weakrefs) + +  + +## Intl.ListFormat + +The `Intl.ListFormat` object is a constructor for objects that enable language-sensitive list formatting. + +Looking at an example is easier than explaining it: + +```js +const list = ["Apple", "Orange", "Banana"]; + +new Intl.ListFormat("en-GB", { style: "long", type: "conjunction" }).format( + list +); +// Apple, Orange and Banana + +new Intl.ListFormat("en-GB", { style: "short", type: "disjunction" }).format( + list +); +// Apple, Orange or Banana +``` + +You are not limited to English, let's try with a few different languages: + +```js +const list = ["Apple", "Orange", "Banana"]; + +// Italian +console.log( + new Intl.ListFormat("it", { style: "long", type: "conjunction" }).format(list) +); +// Apple, Orange e Banana + +// Spanish +console.log( + new Intl.ListFormat("es", { style: "long", type: "conjunction" }).format(list) +); +// Apple, Orange y Banana + +// German +console.log( + new Intl.ListFormat("de", { style: "long", type: "conjunction" }).format(list) +); +// Apple, Orange und Banana +``` + +Pretty neat uh? For a more detailed look at this specification check out the link below. + +[Read More](https://github.com/tc39/proposal-intl-list-format) + +  + +## dateStyle and timeStyle options for Intl.DateTimeFormat + +We can use `dateStyle` and `timeStyle` to request a locale-specific date and time of a given length. + +```js +// short +new Intl.DateTimeFormat("en", { + timeStyle: "short", +}).format(Date.now()); +// "2:45 PM" + +// medium +new Intl.DateTimeFormat("en", { + timeStyle: "medium", +}).format(Date.now()); +// "2:45:53 PM" + +// long +new Intl.DateTimeFormat("en", { + timeStyle: "long", +}).format(Date.now()); +// "2:46:05 PM GMT+7" +``` + +Now let's try with `dateStyle`: + +```js +// short +new Intl.DateTimeFormat("en", { + dateStyle: "short", +}).format(Date.now()); +// "7/25/20" + +// medium +new Intl.DateTimeFormat("en", { + dateStyle: "medium", +}).format(Date.now()); +// "Jul 25, 2020" + +// long +new Intl.DateTimeFormat("en", { + dateStyle: "long", +}).format(Date.now()); +// "July 25, 2020" +``` + +You can pass whatever locale you want and you can also pass both `dateStyle` and `timeStyle` options at the same time, choosing between the three options of 'short', 'medium', and 'long' that best suit your needs. + +[Read More](https://github.com/tc39/proposal-intl-datetime-style) diff --git a/ebook/23_conclusion.md b/ebook/24_conclusion.md similarity index 100% rename from ebook/23_conclusion.md rename to ebook/24_conclusion.md