ES2020 comes loaded with interesting features. Let’s review the most important ones.
BigInt 🔗
BigInt is a primitive numeric type for representing integers larger than Number.MAX_SAFE_INTEGER. To start working with BigInt, we can use the BigInt() function:
const atoms = BigInt(10000000000);
//10000000000n
And we can also use concatenated values with ’n':
const atoms = 10000000000n;
//10000000000n
It should be noted that strict comparisons between regular numbers and BigInt will be false, even when they represent the same value:
console.log(10000000000n === 10000000000);
// false
Nullish coalescing operator (??) 🔗
This new operator is used to evaluate expressions by searching for null or undefined and returning the value on the right side of the operator. In most cases, the operator is used to set default values when none are provided.
const selectedText = null;
const text = selectedText ?? "default";
// text = "default"
One of the fundamental differences from the existing || operator is that it strictly searches for null or undefined. The || operator returns the right-hand side for any falsy value, such as 0 or "".
const selectedText = "";
const text = selectedText ?? "default";
// text = ""
Optional chaining operator (?.) 🔗
The operator allows us to short-circuit for cases where we are evaluating object properties or making calls. If the object is null or undefined, the operator short-circuits and does not continue the evaluation, returning undefined.
const person = null;
console.log(person?.age);
// undefined
Promise.allSettled() 🔗
It is quite common to wait for multiple promises at once, such as when making parallel calls. Until ES2020, Promise.all() was the usual way to wait for the result. If one of the promises fails, it does not wait for the rest to resolve, throwing an exception instead.
Promise.allSettled() performs a similar job to Promise.all() without throwing an exception if one of the promises fails. It allows the rest to continue resolving and returns the status of each promise, along with any error.
const result = await Promise.allSettled(...);
// result = [
// {status: "fulfilled", value: "3"},
// {status: "rejected", reason: Error}
// ]
globalThis 🔗
Depending on the JavaScript execution environment, the global object is accessed differently: window in browsers, global in Node.js, and so on. globalThis appears as a solution, avoiding additional checks to detect the environment and access the global object.
In browsers:
console.log(globalThis === window);
// true
String.matchAll() 🔗
Returns an iterator when searching for matches with an expression in a string. This allows for more convenient manipulation at times.
import() dynamic 🔗
Facilitates the dynamic import of modules. It has a great impact on the generated bundles, which can be smaller and delay the import until needed, at runtime.
import("/path-module").then((m)=> ...)
import.meta 🔗
Allows access to the import context of a module. It is useful for obtaining, for example, the import URL. Sometimes configuration can be injected into the module through this functionality.
console.log(import.meta.url);
console.log(import.meta.env);