Merge projects seamlessly with our NEW GitLab integrationLearnmore
Software Development

What’s new in JavaScript  ES2019

Niall Maher

ES2019 (aka ES10) was shipped earlier this year - let’s dive into some of the new features that were shipped with ES2019 ❤️

Array.prototype.flat()

The new flat() method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const newArray = arr.flat([depth]);

The flat method is relatively simple it flattens arrays up to the given depth (or one level deep by default if no depth is passed).

The second thing the flat method does is removes empty slots in arrays too which can be good for cleaning arrays 😁

To understand it, let’s take a couple of simple arrays and we will show the outputs.

I think most JavaScript developers have had hell with nested arrays in the past and I think flat() is definitely something I will be reaching for a lot now that I know it.

Array.prototype.flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map followed by a flat(1), but flatMap is often quite useful, as merging both into one method is slightly more efficient.

Syntax:

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])

If you are familiar with the Arry Array.map() (which I guess you have if you are reading for even more new syntax 📚) you will notice the arguments are identical.

Let’s take a couple of samples to show you how simple it really is:

Optional Catch Binding

I have often run into the scenario where I am doing something if something errors from a try-catch without actually using the err parameter. ES2019 made it optional and the syntax is super simple:

Object.fromEntries()

We have had the Object.entries() for a while (ES2017) which transforms an object into a list of key-value pairs. The Object.fromEntries() method does the opposite, it transforms a list of key-value pairs into an object.

trimStart() and trimEnd()

trimStart() and trimEnd() have been in Chrome for over a year, and they have now both been standardized in ES2019. Something we won’t touch here, but is good to remember, is this works on languages that are written in reverse. This is great instead of some hacky string cleaning method that would be useless as soon as they meet Arabic.

String.prototype.trimStart()

trimStart() returns a new string with removed white space from the start of the original string. trimLeft()is an alias of this method.

String.prototype.trimEnd()

trimEnd() returns a new string with removed white space from the end of the original string. trimRight()is an alias of this method.

Symbol.prototype.description

The read-only description property is a string returning the optional description of Symbol objects instead of having to use the toString() method:

JSON improvements

JSON.parse()

Before this change, the line separator character and paragraph separator character were not allowed in strings parsed as JSON.

Using JSON.parse() on the line separator (\u2028) and paragraph separator (\u2029) symbols those characters resulted in a SyntaxError but now they parse correctly.

JSON.stringify()

Before this change calling JSON.stringify() on UTF-8 code points (U+D800 to U+DFFF) would return a broken and weird Unicode character (a “�”).

We can now convert safely represented as strings using JSON.stringify() and transformed back into their original representation using JSON.parse().

Function.prototype.toString()

ES2019 improved the toString() method a change to the return value to avoid stripping comments and other characters like whitespace which means it will exactly represent the function as it was defined.

I hope this guide helped you get started with the shiny new features brought to us with ES2019 👍