13 JavaScript features from ES7–10 you might not know about

The JavaScript development community has become quite comfortable with the new language constructs introduced with ECMAScript 2015 (aka ES6). Classes, arrow syntax, template strings, let & const, map, modules and plenty more have become commonplace and browser support is very good, apart from IE11. But work on ECMAScript didn’t stop there. Here are some highlights from ES7, 8, 9 and 10, which you might not be as aware of.

ECMAScript 2016 (ES7)

Array.prototype.includes

So we can now say if(numbers.includes(2)) rather than if(numbers.indexOf(2) !== -1).

Exponentiation operator

We can now do base**exponent instead of Math.pow(base, exponent).

ECMAScript 2017 (ES8)

Async/Await

Yes, this one is a biggie and essentially brings the same functionality to JavaScript as was available in C#. Bear in mind that client-side JavaScript is inherently single-threaded (at the moment) so promises will still be executed one by one.

Object.values

We’ve had Object.keys() for a while, to return an array of the Object’s property names. Object.values(foo) returns an array of the foo’s property values.

Object.entries

In a similar vein, Object.entries(foo) returns both the property keys and values, for example, [[“a”,1],[“b”,2],…]. This might make it easier to use the object in a loop or map.

String padding

We can now use padStart and padEnd to pad a string to a certain length. For example, ‘foo’.padEnd(6, ‘1234’) gives us ‘foo123’. If we replaced the 6 with a 9 we’d get ‘foo123412’.

Trailing commas

You can now have a trailing comma after the last parameter to your function. If that’s your thing.

ECMAScript 2018 (ES9)

Regex

You can now use named group captures by adding ?) to the front of a block in your regex. For example, if you ran the regex /(?\d{4})-(?\d{2})-(?\d{2})/u>) against the string ‘2019-01-02’ then the groups property of the result would give you access to year, month and day properties with those values.You can also now use lookbehind assertions (?<= … ) and (?<! … ), which let you check that some string exists or does not exist (respectively) immediately before another.

Rest

The rest operator … (3 dots) lets us extract all the properties of an object that are not already extracted. Let’s say we have a person object with properties firstName, lastName, dob, address, niNumber. We could say let { firstName, lastName, …otherDetails } and the otherDetails property would be set to an object containing the other three properties.

Spread

Spread uses the same … operator but uses it to take an object’s properties and create them as properties in a new object. Carrying on from the example above, we could say let personDetails = { …otherDetails } and our personDetails object would be created with properties dob, address and niNumber.

Finally for promises

A finally() instance method is now available for promises, which will run as a callback after either resolve or reject has completed.

ECMAScript 2019 (ES10)

Array.Flat

The flat() method creates a new array with any sub-arrays concatenated into it. For example, if we had an array of [1,2,3,[4,5],[6,7]] and we called .flat() on it we would get a new array of [1,2,3,4,5,6,7]. If we had an array of [1,2,3,[4,5,[6,7]]] and called .flat() on it we could get a new array of [1,2,3,4,5,[6,7]]. If we had called .flat().flat() then we’d have had the same result as the first example.

Object.fromEntries

If we have an array of key-value pairs, we can call .fromEntries() on it and get an object where those pairs are now properties of our object.