Es2020 New features part1

2020 is not precisely a beautiful year, for Italy in particular but also for the rest of the world, we are quarantined because of the Coronavirus hoping it will end soon. But this 2020 did not bring us only bad news, Es2020 is out with new interesting features. Let’s see them together:

Dynamic import

For me this is the most important functionality of this series. With the old static import of the modules we were forced to include all the modules, even when not needed. Dynamic import allows us to import modules coditionally or after a API response.

 async myAwesomeApiCall (response) {
    if (response.success) {
       const file = '../file.js'
       const module = await import(file) // Here I imported the file
       module.method(response.data)
    }
  }

In this example, I imported a file after an API call only if the call was successful.

BigInt

BigInt is a new primitive used to represent greater than 9007199254740991. What? What’s that number? javascript has a constant that contains the largest value it can handle without going completely crazy, that constant is Number.MAX_SAFE_INTEGER. Let’s try on our console

crazyNumber = Number.MAX_SAFE_INTEGER // 9007199254740991
crazyNumber + 1   // 9007199254740992 Uhm okay but..
crazyNumber + 300 // 9007199254741292 ... What the fuck??

But if we use BigInt…

BigInt(crazyNumber) + 300

…we got a big bad error

VM2681:1 Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
    at <anonymous>:1:21 

Mathematical operations cannot be done by mixing the two primitives. After all, javascript is a language that cares a lot about types :D

So this is what we can do:

BigInt(crazyNumber) + BigInt(1)   //9007199254740992n
BigInt(crazyNumber) + BigInt(2)   //9007199254740993n
BigInt(crazyNumber) + BigInt(300) //9007199254741291n

Module namespace exports

In javascript we already have namespaces to import, now we also have them to export. Nothing more

import * as namespace from './file.js'
export * as namespace from './file.js'

Don’t miss the Part2 where we will talk about String.prototype.matchAll, globalThis, Optional chaining and Nullish coalescing

Irene Iaccio

Freelance web developer

Subscribe to the monthly digest!

I'll use your email only to send you the latest posts once a month.