loading...
Cover image for The new features of Javascript in 2020 (ES11)

The new features of Javascript in 2020 (ES11)

aryclenio profile image Aryclenio Xavier Barros Updated on ・3 min read

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.

Alt Text

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.

Alt Text

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

Alt Text

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

Alt Text

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.

Alt Text

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.

Alt Text

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!! :)

Posted on by:

aryclenio profile

Aryclenio Xavier Barros

@aryclenio

I'm just a random Brazilian guy with a passion for development and learning things.

Discussion

pic
Editor guide
 

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. :)

 

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

 

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

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

 

Thanks for reading David :)

 

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'

 

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

 

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' }
// ]

 

Ohh cool thanks for clarifying :))

 

I like the optional chaining feature.

 

Thanks for reading Ephraim :)

 

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

 

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

 

BigInt looks interesting.