/

The ES2018 Guide: Features and Upgrades Explained

The ES2018 Guide: Features and Upgrades Explained

ECMAScript, often abbreviated as ES, serves as the standard on which JavaScript is based. The latest version of this standard is ES2018, also known as ES9. In this guide, we will explore the new features and upgrades introduced in ES2018.

Rest/Spread Properties

ES6 introduced the concept of the rest element for array destructuring and spread elements for spreading array elements. ES2018 extends this concept to objects.

Rest properties allow you to extract and assign the remaining properties of an object to a new object:

1
const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 };

Spread properties, on the other hand, enable you to create a new object by combining the properties of an existing object using the spread operator:

1
const items = { first, second, ...others };

Asynchronous Iteration

ES2018 introduces the for-await-of construct, which allows you to iterate over async iterable objects within a loop:

1
2
3
for await (const line of readLines(filePath)) {
    console.log(line);
}

Please note that for-await-of can only be used inside async functions, similar to the usage of await.

Promise.prototype.finally()

The finally() method is introduced in ES2018 to ensure a piece of code runs regardless of whether a promise is fulfilled or rejected. It is executed after the then() and catch() methods:

1
2
3
4
fetch('file.json')
    .then(data => data.json())
    .catch(error => console.error(error))
    .finally(() => console.log('finished'));

Regular Expression Improvements

ES2018 introduces several enhancements to regular expressions.

RegExp Lookbehind Assertions

Lookbehind assertions allow you to match a string based on what precedes it. Positive lookbehinds use ?<=, while negative lookbehinds use ?<!. For example:

1
2
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician'); // true
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician'); // false

Unicode Property Escapes

ES2018 introduces \p{...} and \P{...} to match Unicode character properties within regular expressions. These property escapes enable matching based on Unicode properties such as script, ASCII, digit, whitespace, emoji, and more. For example:

1
2
/^\p{Lowercase}$/u.test('h'); // true
/^\p{Uppercase}$/u.test('H'); // true

You can also match specific Unicode values by specifying the desired property. For instance:

1
2
/^\p{Emoji}+$/u.test('🙃🙃'); // true
/^\p{Script=Greek}+$/u.test('ΔλληΜÎčÎșÎŹ'); // true

For a complete list of available properties, refer to the official proposal.

Named Capturing Groups

ES2018 allows assigning names to capturing groups in regular expressions, providing a more structured way of accessing matched groups:

1
2
3
4
5
6
7
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = re.exec('2015-01-02');

// Access captured groups using named properties
result.groups.year; // '2015'
result.groups.month; // '01'
result.groups.day; // '02'

The s Flag for Regular Expressions

The s flag, short for “single line,” enables the dot (.) metacharacter in regular expressions to match newline characters as well. Without this flag, dot matches any character except newline:

1
2
/hi.welcome/.test('hi\nwelcome'); // false
/hi.welcome/s.test('hi\nwelcome'); // true

tags: [“ECMAScript”, “ES”, “ES2018”, “rest/spread properties”, “asynchronous iteration”, “Promise.prototype.finally()”, “regular expression improvements”, “lookbehind assertions”, “Unicode property escapes”, “named capturing groups”, “s flag for regular expressions”]