Six Upcoming Features in ES2018

Set to be released in July, ES2018 is full of helpful new features. Here are six of them.

1 – Regex Named Group Captors

Soon you will be able to name the various parts in your RegExp!

Example from TC39 Proposal:

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

// result[0] === '2015-01-02';
// result[1] === '2015';
// result[2] === '01';
// result[3] === '02';

2 – Rest Properties for Objects

This will allow you to extract (the important!) object properties with ease.

let {favoriteIceCream, ...restOfProps* } = {
    name: 'Elana Kopelevich',
    favoriteIceCream: 'So Delicious Cashew Milk Salted Caramel',
    job: 'Software Engineer'
    location: 'Denver'
}

This leaves you with two items: favoriteIceCream, a string, and restOfProps, an object.

* I still get rest and spread operators confused, but thinking of doing something with the rest of the properties in an object helps me remember what this one does. Also note that the rest operator is used on the left side of the equals sign, while the spread operator is used on the right side.

3- Spread Properties for Objects

Speaking of spread operators, ES2018 is going to let us use those in objects now too! Say you want to combine a couple objects into one. You could iterate over each of the objects and add them to a newly created object. Or… you can use the spread operator.

In this example, you might have two distinct objects that deal with a user. One object, the profile, contains info like age and role within the organization. Another object, the address, contains, well, the address. You might need the data from both of these in one object and very soon you will be able to get that done pretty easily, just like this…

userInfo = { ...profile, ...address }

4 – Regex Lookbehind Assertions

I have needed this so many times and like the optimistic goldfish that I am, I kept going back to docs and RexExp playgrounds with the assumptions that I’m just missing something… that I’m just doing something wrong, that it’s me, not JavaScript.

It turns out, it’s been JavaScript all along, but it looks the language had one of those ‘Don’t leave! I can change! I can change!’ moments and decided to give the people what we need… which is a way to look behind a captured character in Regular Expression.

Here is a positive lookbehind example:

const RE_ASTERISK = /(?<=\*)duck/g
'$duck duck *duck'.replace(RE_ASTERISK, 'goose') 
// $duck duck *goose

And here is a negative lookbehind example:

const RE_ASTERISK = /(?<!\*)duck/g
'$duck duck *duck'.replace(RE_ASTERISK, 'goose')
// $goose goose *duck

5 – promise.prototype.finally()

I must have just gotten used to promise libraries because I thought that this has existed for awhile. The finally callback is called without any value and is always executed no matter what. Just chain it to the end of your promise chain.

6 – Async iteration

Taking advantage of the nifty, newish feature, Async/Await, ES2018 brings Async/Await to loops!

async iter() {
    for await (p of promises){
        console.log(p);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.