The new features of Javascript in 2020 (ES11)

Javascript is a sensation, largely due to the explosion of web development today. Many are inserted in it and others, at one time or another, will have to learn it to integrate certain features into their projects. According to the StackOverflow Survey 2020 Javascript is the most used language today, and the number of its users grows very strong.

Despite this, it is known to a large part of its users that the beginning of Javascript was really troubled in its construction, generating even several jokes on the internet about its functionalities. Today everything has changed, and several versions of EcmaScript (European association for standardizing information and communication systems) have emerged to standardize these functionalities.

In 2020, a new version of EcmaScript appeared, and with it, several features were added natively to browsers. In this article, we will browse through each one and discover its uses. Are you ready?

BigInt

The number of integer representations was one of the features included in the new version of ES11. Before, the maximum representative number in javascript was the number 9007199254740991.

Now, with bigInt, we can go beyond that number.

Dynamic import

Now, with Javascript, we can import modules dynamically through variables. With that, the variables that receive the modules are able to encompass the namespaces of these modules in a global way.

let Dmodule;

if ("module 1") {
  Dmodule = await import('./module1.js')
} else {
  Dmodule = await import('./module2.js')
}

/* It is possible to use Dmodule. (Methods)
throughout the file globally */
Dmodule.useMyModuleMethod()

Exporting modules

A new syntax was added allowing the export of modules similar to import that already existed, see an example below:

// Existing in JS
import * as MyComponent from './Component.js'

// Added in ES11
export * as MyComponent from './Component.js'

Optional Chaining

Optional Chaining, known to babel users, is now supported natively by Javascript. This functionality removes the need for conditionals before calling a variable or method enclosed in it.

const user = {
  "name": "Aryclenio Barros",
  "age": 22,
  "alive": true,
  "address": {
    "street": "Hyrule street",
    "number": 24,
  }
}

// Without optional chaining
const number = user.address && user.address.number

// With optional chaining
const number = user.address?.number

Nullish Coalescing Operator

A new operator was added to Javascript. It came to cause a discrepancy between Javascript's falsey value. We use the falsey condition with the || operator. The falsey values are:

0
undefined
null
false
NaN

The new operator only allows undefined and null, allowing variables to encompass the rest of the values as true in a conditional. Note that, different from the case above, the values of 0, NaN and false are persisted even though a non-falsey value is passed.

Promise.AllSettled

The Promise.AllSettled attribute allows you to perform a conditional that observes whether all promises in an array have been resolved. See an example below:

const myArrayOfPromises = [
    Promise.resolve(myPromise),
    Promise.reject(0),
    Promise.resolve(anotherPromise)
]

Promise.AllSettled(myArrayOfPromises).then ((result) => {
   // Do your stuff
})

matchAll

The matchAll method is a feature that better details regex comparisons within a string. Its result is an array that indicates the positions, as well as the string group and the source of the search. See an example of a regex that allows values from 0 to 5 with the matchAll method.