Follow me on Twitter
Follow me on Github
Since the big JS overhaul that came with ES6, we have been incrementally getting some new features every year. This is fantastic as we won’t get a big overhaul again, and the language is constantly improving.
In this short article, I will talk about some of the features that have been released in both ES2020, and ES2019. This list is not exhaustive, but it covers some of the features that I think are useful.
ES2020
BigInt
BigInt allows developers to safely use bigger integers than are currently available. The current “safest” integer to use is 9007199254740991. This is derived from Number.MAX_SAFE_INTEGER.
We can now safely go higher. A BigInt can be declared by appending n to the end of a number, or passing a number as a param to the function BigInt().
BigInts and Numbers are similar but they are technically different data types. You can’t use built in Math operations such as Math.round(), and Math.floor() unless they are coerced to a number type. However doing this may result in BigInt losing it’s precision.
Dynamic Imports
Dynamic imports give you the option to import files as modules on demand in you Javascript applications. You are not limited to importing them all at the top of your file.
The imported module returns a promise, which you can then use as normal. This is useful for code splitting. You can import a section of your application but only when it’s required. You don’t have to load any modules until they’re required. This is great for increasing web performance.
Module Namespace Export
In JavaScript we could already import named modules. However until now there was no option to export modules the same way. Until Now
Optional Chaining
Optional chaining allows us to access nested properties on objects without worrying if the property exists or not. If the property does exist, fantastic, it's returned. However if the property does not exist, undefined will be returned.
The benefit of optional changing is that we can attempt to access data from an object that we’re unsure that we have. If the data doesn’t exist, the application won’t break.
ES2019
Array.flat()
Array.flat returns a new array with any sub-arrays flattened. By default the sub-arrays are flattened up to one level deep, however you can specify how many levels deep you want to flatten. There's also the option to flatten every sub-array by passing the Infinity keyword.
Array.flatMap()
FlatMap combines two existing array methods. .flat(), and .map(). First, it maps over an array, then it flattens it. The limit of flatMap is 1 level deep. If you need to flatten an array more than 1 level, you will need to use .flat() and .map() separately.
Take the above example. We have 3 objects, each containing an array of transactions. To turn this into one array is simple with flatmap.
String.trimStart and String.trimEnd()
We have the .trim() method in JavaScript which removes white space from the start and end of a string. Now we have two new methods that allow us to remove white space from just the start, and just end of a string.
Top comments (0)