|
| 1 | +# Chapter 22: What's coming in ES2020 |
| 2 | + |
| 3 | +The latest version of ECMAScript, ES2020, includes many new interesting changes and we are going to cover them in this chapter. |
| 4 | + |
| 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 | + |
| 7 | +## BigInt |
| 8 | + |
| 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 | + |
| 11 | +```javascript |
| 12 | +let num = Number.MAX_SAFE_INTEGER |
| 13 | +// 9007199254740991 |
| 14 | +num + 1; |
| 15 | +// 9007199254740992 |
| 16 | +num + 2; |
| 17 | +// 9007199254740992 |
| 18 | +num + 3; |
| 19 | +// 9007199254740994 |
| 20 | +num + 4; |
| 21 | +// 9007199254740996 |
| 22 | +``` |
| 23 | + |
| 24 | +As you can see, once we hit the max that `JavaScript` can handle, things stop working as we think they should. |
| 25 | + |
| 26 | +In order to start using `BigInt`, we can use the constructor `BigInt` or we can simply append an `n` at the end of your long integer and everything will continue working smoothly as it should. |
| 27 | + |
| 28 | +```javascript |
| 29 | +// let bigInt = BigInt(99999999999999999); |
| 30 | +let bigInt = 99999999999999999n; |
| 31 | +bigInt + 1n; |
| 32 | +// 100000000000000000n |
| 33 | +``` |
| 34 | + |
| 35 | +As you can see I did not add `1` but I added `1n`, that's because you can't add one integer to a `BigInt` if you want to do that you first need to parse that `BigInt` using `parseInt(bigInt,10)`. |
| 36 | + |
| 37 | + |
| 38 | + |
| 39 | +## Dynamic Import |
| 40 | + |
| 41 | +This will allow you to dynamically import your modules when you need them. Look at the following example: |
| 42 | + |
| 43 | +```javascript |
| 44 | +if(condition1 && condition2){ |
| 45 | + const module = await import('./path/to/module.js'); |
| 46 | + module.doSomething(); |
| 47 | +} |
| 48 | + |
| 49 | + |
| 50 | +``` |
| 51 | + |
| 52 | +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`. |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | +## Optional Chaining |
| 57 | + |
| 58 | +Let's take these simple `Object` that represent our Users. |
| 59 | + |
| 60 | +```js |
| 61 | +const user1 = { |
| 62 | + name: 'Alberto', |
| 63 | + age: 27, |
| 64 | + work: { |
| 65 | + title: 'software developer', |
| 66 | + location: 'Vietnam' |
| 67 | + } |
| 68 | +} |
| 69 | + |
| 70 | +const user2 = { |
| 71 | + name: 'Tom', |
| 72 | + age: 27 |
| 73 | +} |
| 74 | + |
| 75 | +``` |
| 76 | + |
| 77 | +Let's say we want to display the job title of our user. |
| 78 | +As we can see, `work` is an optional property of our `Object` so we would have to write something like this: |
| 79 | + |
| 80 | +```js |
| 81 | +let jobTitle; |
| 82 | +if (user.work){ |
| 83 | + jobTitle = user.work.title |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +or using a ternary operator: |
| 88 | + |
| 89 | +```js |
| 90 | +const jobTitle = user.work ? user.work.title : '' |
| 91 | +``` |
| 92 | + |
| 93 | +Before we access the property `title` of `work` we need to check that the user actually has a `work`. |
| 94 | + |
| 95 | +When we are dealing with simple objects it's not such a big deal but when the data we are trying to access is deeply nested, it can be a problem. |
| 96 | + |
| 97 | +This is where the Optional Chaining `?.` operator comes to the rescue. This is how we would rewrite our code with this new operator: |
| 98 | + |
| 99 | +```js |
| 100 | +const jobTitle = user.work?.title |
| 101 | +``` |
| 102 | +
|
| 103 | +Done! More concise and readable. |
| 104 | +
|
| 105 | +You can read the code above as `does the user have a work property? if yes, access the title property inside of it` |
| 106 | +
|
| 107 | +```js |
| 108 | +const user1JobTitle = user1.work?.title; |
| 109 | +// software developer |
| 110 | +const user2JobTtile = user2.work?.title; |
| 111 | +// undefined |
| 112 | +``` |
| 113 | +
|
| 114 | +As soon as we hit a property that is not available on the `Object`, the operator will return `undefined` |
| 115 | +
|
| 116 | +Imagine dealing with a deeply nested object with optional properties such as these two users and their school records. |
| 117 | +
|
| 118 | +```js |
| 119 | +const elon = { |
| 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 | +} |
| 133 | + |
| 134 | +const mark = { |
| 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 | +} |
| 145 | +``` |
| 146 | +
|
| 147 | +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. |
| 148 | +
|
| 149 | +Now imagine wanting to access the graduation year of our two users: |
| 150 | +
|
| 151 | +```js |
| 152 | +let graduationYear; |
| 153 | +if( |
| 154 | + user.education.university && user.education.university.graduation && user.education.university.graduation.year){ |
| 155 | + graduationYear = user.education.university.graduation.year; |
| 156 | +} |
| 157 | +``` |
| 158 | +
|
| 159 | +And with the Optional Chaining operator: |
| 160 | +
|
| 161 | +```js |
| 162 | +const elonGraduationYear = elon.education.university?.graduation?.year; |
| 163 | +// 1992 |
| 164 | +const markGraduationYear = mark.education.university?.graduation?.year; |
| 165 | +// undefined |
| 166 | +``` |
| 167 | +
|
| 168 | + |
| 169 | +
|
| 170 | +## Promise.allSettled |
| 171 | +
|
| 172 | +ES6 added `Promise.all` that let us await until all the promises given to it are passed. `Promise.allSettled` goes one step further and let us await until all the promises are completed, returning us an `Array` of objects describing the outcome of each of them. |
| 173 | +
|
| 174 | +This means that we will be able to tell easily which one of our promises is failing: |
| 175 | +
|
| 176 | +```javascript |
| 177 | + |
| 178 | +const arrayOfPromises = [ |
| 179 | + new Promise((res, rej) => setTimeout(res, 1000)), |
| 180 | + new Promise((res, rej) => setTimeout(rej, 1000)), |
| 181 | + new Promise((res, rej) => setTimeout(res, 1000)), |
| 182 | +] |
| 183 | + |
| 184 | +Promise.allSettled(arrayOfPromises).then(data => console.log(data)); |
| 185 | + |
| 186 | +// [ |
| 187 | +// Object { status: "fulfilled", value: undefined}, |
| 188 | +// Object { status: "rejected", reason: undefined}, |
| 189 | +// Object { status: "fulfilled", value: undefined}, |
| 190 | +// ] |
| 191 | +``` |
| 192 | +
|
| 193 | +As you can clearly see, the second promise rejected and `Promise.allSettled` returned us the status of each of them. |
| 194 | +
|
| 195 | + |
| 196 | +
|
| 197 | +## Nullish Coalescing |
| 198 | +
|
| 199 | +A falsey and a nullish value (`null` or `undefined`), may be similar sometimes, but they are two different values and this new operator allows us to check specifically for nullish values. |
| 200 | +
|
| 201 | +Look at this example for a refresher on falsey values: |
| 202 | +
|
| 203 | +```javascript |
| 204 | +// we use the !! to convert the value to boolean |
| 205 | +const str = ""; |
| 206 | +console.log(!!str); |
| 207 | +// false |
| 208 | +const num = 0; |
| 209 | +console.log(!!num); |
| 210 | +// false |
| 211 | +const n = null; |
| 212 | +console.log(!!n); |
| 213 | +// false |
| 214 | +const u = undefined; |
| 215 | +console.log(!!u); |
| 216 | +// false |
| 217 | +``` |
| 218 | +
|
| 219 | +As you can see, all of these values are falsey. Sometimes we want to distinguish between an empty string or an undefined and this is where the Nullish Coalescing operator (`??`) will come in handy. |
| 220 | +
|
| 221 | +The Nullish Coalescing operator (`??`) returns the right-hand side operand when the left-hand side is nullish. |
| 222 | +
|
| 223 | +```javascript |
| 224 | +const x = '' ?? 'empty string'; |
| 225 | +console.log(x); |
| 226 | +// '' |
| 227 | +const num = 0 ?? 'zero'; |
| 228 | +console.log(num); |
| 229 | +// 0 |
| 230 | +const n = null ?? "it's null"; |
| 231 | +console.log(n); |
| 232 | +// "it's null" |
| 233 | +const u = undefined ?? "it's undefined"; |
| 234 | +console.log(u); |
| 235 | +// "it's undefined" |
| 236 | +``` |
| 237 | +
|
| 238 | +As you can see, in the first two examples the value was not nullish but falsey, so the operator did **not** return the value on the right-hand side. |
| 239 | +
|
| 240 | + |
| 241 | +
|
| 242 | +## String.protype.matchAll |
| 243 | +
|
| 244 | +The `matchAll()` method is a new string method that returns an iterator of all the results matching a string against a specified regEx. |
| 245 | +
|
| 246 | +```javascript |
| 247 | +// regex that matches any character in the range from 'a' to 'd' |
| 248 | +const regEx = /[a-d]/g; |
| 249 | +const str = "Lorem ipsum dolor sit amet" |
| 250 | +const regExIterator = str.matchAll(regEx); |
| 251 | + |
| 252 | +console.log(Array.from(regExIterator)); |
| 253 | +// [ |
| 254 | +// ["d", index: 12, input: "Lorem ipsum dolor sit amet", groups: undefined] |
| 255 | +// ["a", index: 22, input: "Lorem ipsum dolor sit amet", groups: undefined] |
| 256 | +// ] |
| 257 | +``` |
| 258 | +
|
| 259 | +As you can see, we called the `matchAll` method against our string and since our regEx matches every character in the range from 'a' to 'd', we got two results from our example string. |
| 260 | +
|
| 261 | + |
| 262 | +
|
| 263 | +## Module Namespace Exports |
| 264 | +
|
| 265 | +We could already do something like this: |
| 266 | +
|
| 267 | +```javascript |
| 268 | +import * as stuff from './test.mjs'; |
| 269 | +``` |
| 270 | +
|
| 271 | +But now we can also do the same for **exports**: |
| 272 | +
|
| 273 | +```javascript |
| 274 | +export * as stuff from './test.mjs'; |
| 275 | +``` |
| 276 | +
|
| 277 | +which would be the same as doing: |
| 278 | +
|
| 279 | +```javascript |
| 280 | +export { stuff } |
| 281 | +``` |
| 282 | +
|
| 283 | +It's not a game-changer feature, but it adds a better symmetry between import and export statements and their syntax. |
| 284 | +
|
| 285 | + |
| 286 | +
|
| 287 | +## import.meta |
| 288 | +
|
| 289 | +The `import.meta` object exposes information about a module, such as its URL. |
| 290 | +
|
| 291 | +```javascript |
| 292 | +<script type="module" src="test.js"></script> |
| 293 | +console.log(import.meta); // { url: "file:///home/user/test.js" } |
| 294 | +``` |
| 295 | +
|
| 296 | +The URL contained in the object can either be the path of the document base for inline scrips or the URL where it was obtained for external scripts. |
| 297 | +
|
| 298 | + |
| 299 | +
|
| 300 | +## globalThis |
| 301 | +
|
| 302 | +Up until ES2020, there was no standardized global `this` in `JavaScript` meaning that it could either be the `window` when accessed in browsers, `global` for Node environments, and `self` for web workers. |
| 303 | +
|
| 304 | +You would have to manually detect the environment at runtime and bind the appropriate object to your global `this`. |
| 305 | +
|
| 306 | +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 | +
|
| 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. |
0 commit comments