JavaScript ES10/ES2019 Features

New features in ECMAScript 2019

Author

Thivagar Mahendran

Feb 04, 2019

Every year a new version of ECMAScript is released based on the proposals that the TC39 committee has accepted. Let’s have a look at the new features that were approved by the TC39 committee.

To test these out, you need to update your Chrome to v72

Object.fromEntries()

In earlier versions of ECMAScript, you can use Object.entries() to make key-value pair arrays from an object. But now you can simply reverse the process by using Object.fromEntries(). This will return a new object instantly with the key and values.

const person = { name: 'Thiva', age: 21, country: 'Sri Lanka' } const entry = Object.entries(Person); //Creates an entry const reverseEntry = Object.fromEntries(entry) // This will reverse the entry

String.prototype.trimStart() or trimEnd()

We already have a feature trim() which helps us to avoid the blank spaces in a string. With the all-new trimStart() and trimEnd(), you can choose which part of the string you must avoid.

const str = " Blank. "; console.log(JSON.stringify(str.trimStart())); // "Blank. " console.log(JSON.stringify(str.trimEnd())); // " Blank."

JSON.stringify() is being used to print and show the blank spaces in the logs.

Well-formed JSON.stringify

A new proposal has been submitted to prevent JSON.stringify from returning ill-formed Unicode strings. The proposed solution is to represent unpaired surrogate code points as JSON escape sequences rather than returning them as single UTF-16 code units.

JSON.stringify('\uDF06\uD834'); // → '"\\udf06\\ud834"' JSON.stringify('\uDEAD'); // → '"\\udead"'

You can check the TC39 repository for more information on this.

Array.prototype.flat()

The flat() method would flatten a nested array up to a given value. By default, that value would be 1 if you don’t specify a value. By passing Infinity as a parameter inside the flat() it will recursively run infinite times and flatten the array to one single array.

const array = [1,2,3,4,[5,6,7,[8,9]]]; console.log(array.flat()); // [1,2,3,4,5,6,7,[8,9]] console.log(array.flat(Infinity)); // [1,2,3,4,5,6,7,8,9]

Array.prototype.flatMap()

This is somewhat similar to Array.prototype.Map() but slightly different. However, Array.prototype.flatMap() would give you value pairs in one flattened array where Array.prototype.Map() would give value pairs in each different array.

const arrayMap = [1,2,3,4].map(x => [x, x+5]); console.log(array.flat()); // [[1,6],[2,7],[3,8],[4,9]] console.log(array.flat(Infinity)); // [1,6,2,7,3,8,4,9]

Try/Catch Binding

In this version of ECMAScript, we can have an optional binding for try/catch. In the earlier versions, we should implement the catch binding even if we don’t have to use it. With the new proposal, it allows us to remove the catch binding if we don’t have to use it.

try { throw new Error('I am an error!'); } catch(error) { console.log(error); }

This has been changed in the new proposal and we can use the try/catch like below:

try { throw new Error('I am an error!'); } catch { console.log("I know you are an Error!"); }

Function.prototype.toString() revised

Function.prototype.toString() has been revised in the new proposal. In earlier versions of ECMAScript, you could print the source code of the function using toString() but there was a drawback that it would remove all extra white spaces and comments. In the new proposal, it has been retained.

function /* Adds numbers */ addNumbers (x) { let y = x + 5; return y; } console.log(addNumbers.toString());

The output will be something like below:

function /* Adds numbers */ addNumbers (x) { let y = x + 5; return y; }

Symbol.description getter

When you create a Symbol you can specify a description for the symbol for debugging purposes. To console.log() out the symbol description, you may have to convert it to a string. But now with the new proposal, you can simply access the description by using Symbol.description.

const description = 'Symbol Description'; const symbol = Symbol(description); console.log(symbol.description == description); // true

References

TC39 Github Repo

Made with Next.js, Tailwind CSS and some ❤️ , deployed in Vercel