You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@
10
10
11
11
# [The Complete Guide to Modern JavaScript ](https://leanpub.com/completeguidetomodernjavascript2020)
12
12
13
-
## 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.
13
+
## 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.
-[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)
48
48
49
49
You get the ebook on Amazon, Leanpub and other stores, check the following link to find your local amazon store:
50
50
51
51
- Play Store [Ebook](https://play.google.com/store/books/details/Alberto_Montalesi_The_Complete_Guide_to_Modern_Jav?id=avqrDwAAQBAJ)
Copy file name to clipboardExpand all lines: ebook/22_what_new_es2020.md
+73-62
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Chapter 22: What's coming in ES2020
1
+
# Chapter 22: What's new in ES2020
2
2
3
-
The latest version of ECMAScript, ES2020, includes many new interesting changes and we are going to cover them in this chapter.
3
+
`ES2020` includes many new interesting changes and we are going to cover them in this chapter.
4
4
5
5
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.
6
6
@@ -9,7 +9,7 @@ Not all browsers currently support these features so, I recommend you use the la
9
9
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:
10
10
11
11
```javascript
12
-
let num =Number.MAX_SAFE_INTEGER
12
+
let num =Number.MAX_SAFE_INTEGER;
13
13
// 9007199254740991
14
14
num +1;
15
15
// 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
41
41
This will allow you to dynamically import your modules when you need them. Look at the following example:
42
42
43
43
```javascript
44
-
if(condition1 && condition2){
45
-
constmodule=awaitimport('./path/to/module.js');
46
-
module.doSomething();
44
+
if(condition1 && condition2){
45
+
constmodule=awaitimport("./path/to/module.js");
46
+
module.doSomething();
47
47
}
48
-
49
-
50
48
```
51
49
52
50
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.
59
57
60
58
```js
61
59
constuser1= {
62
-
name:'Alberto',
63
-
age:27,
64
-
work: {
65
-
title:'software developer',
66
-
location:'Vietnam'
67
-
}
68
-
}
60
+
name:"Alberto",
61
+
age:27,
62
+
work: {
63
+
title:"software developer",
64
+
location:"Vietnam",
65
+
},
66
+
};
69
67
70
68
constuser2= {
71
-
name:'Tom',
72
-
age:27
73
-
}
74
-
69
+
name:"Tom",
70
+
age:27,
71
+
};
75
72
```
76
73
77
74
Let's say we want to display the job title of our user.
78
75
As we can see, `work` is an optional property of our `Object` so we would have to write something like this:
79
76
80
77
```js
81
78
let jobTitle;
82
-
if (user.work){
83
-
jobTitle =user.work.title
79
+
if (user.work){
80
+
jobTitle =user.work.title;
84
81
}
85
82
```
86
83
87
84
or using a ternary operator:
88
85
89
86
```js
90
-
constjobTitle=user.work?user.work.title:''
87
+
constjobTitle=user.work?user.work.title:"";
91
88
```
92
89
93
90
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
97
94
This is where the Optional Chaining `?.` operator comes to the rescue. This is how we would rewrite our code with this new operator:
98
95
99
96
```js
100
-
constjobTitle=user.work?.title
97
+
constjobTitle=user.work?.title;
101
98
```
102
99
103
100
Done! More concise and readable.
@@ -117,31 +114,43 @@ Imagine dealing with a deeply nested object with optional properties such as the
117
114
118
115
```js
119
116
constelon= {
120
-
name:'Elon Musk',
121
-
education: {
122
-
primary_school: { /* primary school stuff */ },
123
-
middle_school: { /* middle school stuff */ },
124
-
high_school: {/* high school stuff here */},
125
-
university: {
126
-
name:'University of Pennsylvania',
127
-
graduation: {
128
-
year:1995
129
-
}
130
-
}
131
-
}
132
-
}
117
+
name:"Elon Musk",
118
+
education: {
119
+
primary_school: {
120
+
/* primary school stuff */
121
+
},
122
+
middle_school: {
123
+
/* middle school stuff */
124
+
},
125
+
high_school: {
126
+
/* high school stuff here */
127
+
},
128
+
university: {
129
+
name:"University of Pennsylvania",
130
+
graduation: {
131
+
year:1995,
132
+
},
133
+
},
134
+
},
135
+
};
133
136
134
137
constmark= {
135
-
name:'Mark Zuckerberg',
136
-
education: {
137
-
primary_school: { /* primary school stuff */ },
138
-
middle_school: { /* middle school stuff */ },
139
-
high_school: {/* high school stuff here */},
140
-
university: {
141
-
name:'Harvard University',
142
-
}
143
-
}
144
-
}
138
+
name:"Mark Zuckerberg",
139
+
education: {
140
+
primary_school: {
141
+
/* primary school stuff */
142
+
},
143
+
middle_school: {
144
+
/* middle school stuff */
145
+
},
146
+
high_school: {
147
+
/* high school stuff here */
148
+
},
149
+
university: {
150
+
name:"Harvard University",
151
+
},
152
+
},
153
+
};
145
154
```
146
155
147
156
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:
@@ -305,4 +316,4 @@ You would have to manually detect the environment at runtime and bind the approp
305
316
306
317
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.
307
318
308
-
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.
319
+
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.
0 commit comments