ES2020 comes loaded with interesting features. Let’s review the most important ones.
BigInt 🔗
BigInt is a new object that allows us to work with really large integers. It surpasses the previous limits with normal integers. To start working with BigInt, we can create objects through its constructor:
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, 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 with the existing || (or) operator is that it strictly searches for null or undefined, unlike the or operator which will return the right-hand side for any ‘falsy’ value (0, “”).
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. So far, to wait for the result, Promise.all() was used. However, if one of the promises fails, it does not wait to resolve the rest, throwing an exception.
Promise.allSettled() performs a similar job to Promise.all() but does not throw an exception if one of the promises fails. It allows the rest to continue resolving and returns the status of each promise, and the error if any.
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. In browsers window, global in node, etc. globalThis appears as a solution, to avoid having to perform additional checks, detect the environment and execute the statement that gives access to the global object in the current environment.
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);