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.

Conclusion

In addition to these features, some others have been included, you can see the complete set of changes on Ecma's official website.

I hope you enjoyed it and thank you for reading. I invite you to read my other articles and follow me here on dev.to.

Follow me on linkedin

Best Regards!! :)

Comments

[pentacular]

I think it's worth noting that your dynamic import example relies on top-level await.

let Dmodule;
if ("react") {
  Dmodule = await import('react')
} else {
  Dmodule = await import('vue')
}

I think this is still a proposal isn't it?

Anyhow, probably worth-while not complicating your example with it. :)

[Ary Barros]

Hy pentacular. Thanks for the reply and I agree with you. I've changed the example so it better fit the main explanation.

[David Dal Busco]

I love the dynamic import feature, I use it to dynamically import CSS 😃

Thank you for your blog post, a nice read and summary 👍

[Ary Barros]

Thanks for reading David :)

[Lakshya Singh]

Didn't we already have a Promise.all() what's the difference

[sirev]

Yes, we did. The difference is that Promise.all() didn't resolve the promises from array in then if it had at least one rejected.

Promise.all([Promise.resolve('resolved'), Promise.reject('rejected')]).then((r) => console.log(r)).catch(() => console.log('catch here!'));
Output
// catch here!

Promise.allSettled([Promise.resolve('resolved'), Promise.reject('rejected')]).then((r) => console.log(r)).catch(() => console.log('catch here!'));

Output
// [
// { status: "fulfilled", value: 'resolved' },
// { status: "rejected", reason: 'rejected' }
// ]

[Lakshya Singh]

Ohh cool thanks for clarifying :))

[Tony Brix]

The first example in Nullish Coalescing Operator the values should be switched around the ||s

You have 'value not falsey' || undefined which should actually be undefined || 'value not falsey', otherwise "value not falsey" will always show even for a truthy value.

('value not falsey' || true) === 'value not falsey'

[Ephraim Duncan]

I like the optional chaining feature.

[Ary Barros]

Thanks for reading Ephraim :)

[Andrew Baisden]

BigInt looks interesting.

[Rajika Imal]

Great article, there's a typo in Promise.AllSettled example, 2nd line: first "Promise.resolve"

[Ary Barros]

Thanks for the reply Rajika. I've fixed the typo.