Good news – the new ES2020 features are now finalised! This means we now have a complete idea of the changes happening in ES2020, the new and improved specification of JavaScript. So let’s see what those changes are.
BigInt is one of the most anticipated features in JavaScript which is now finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.
At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1
. But BigInt actually allows you to go even beyond that.
However, you need to have an n
appended at the very end of the number, as you can see above. This n
denotes that this is a BigInt and should be treated specially by the JavaScript engine (by the v8 engine or whatever engine it is using).
This improvement is not backwards compatible because the traditional number system is IEEE754 (which just cannot support numbers of this size).
Dynamic imports in JavaScript natively give you the option to import JS files dynamically as modules in your application. This is just like how you do it with Webpack and Babel at the moment.
This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.
The good thing is that you actually import a module, and so it never pollutes the global namespace.
Nullish coalescing adds the ability to truly check nullish
values instead of falsey
values. What is the difference between nullish
and falsey
values, you might ask?
In JavaScript, a lot of values are falsey
, like: empty strings, the number 0, undefined, null, false, NaN, etc.
However, a lot of times you might want to check if a variable is nullish, that is if it is either undefined
or null
, like when it’s okay for a variable to have an empty string, or even a false value.
In that case, you’ll use the new nullish coalescing operator -> ??
You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nulllish value.
Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, you’ll get undefined
returned.
This not only works on object properties, but also on function calls and arrays. Super convenient! Here’s an example:
The Promise.allSettled
method accepts an array of Promises and only resolves when all of them are settled - either resolved or rejected.
This was not available natively earlier, even though some close implementations like race
and all
were available. This brings “just run all promises - I don’t care about the results” natively to JavaScript.
matchAll
is a new method added to the String
prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another. Let’s have a look at a quick example:
If you wrote some cross-platform JS code which could run on Node as well as in the browser environment as well as inside web-workers, you’d have a hard time getting hold of the global object.
This is because it is window
for browsers, global
for Node, and self
for web workers. If there are more runtimes, they’ll be different for them as well.
So you would have had to have your own implementation of detecting runtime and then using the correct global – that is, until now.
ES2020 brings us globalThis
which always refers to the global object, no matter where you are executing your code:
In JavaScript modules, it was already possible to use the following syntax:
import * as utils from './utils.mjs'
However, no symmetric export
syntax existed… until now:
export * as utils from './utils.mjs'
This is equivalent to the following:
import * as utils from './utils.mjs'
export { utils }
The ECMA specification did not specify in which order for (x in y)
should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.
The import.meta
object was created by the ECMAScript implementation, with a null
prototype.
Consider a module module.js
<script type="module" src="module.js"></script>
you can access meta information about the module using the import.meta
object.
console.log(import.meta); // { url: "file:///home/user/module.js" }
It returns an object with a url
property indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts), or the document base URL of the containing document (for inline scripts).
I love the consistency and speed with which the JavaScript community has evolved and is evolving. It is amazing and truly wonderful to see how JavaScript came from a language which was boo-ed on, 10 years go, to one of the strongest, most flexible and versatile language of all time today.
#javascript #web-development #angular #node-js #reactjs