Final feature sets of ECMAScript 2018


In this article, I would like to share final features in ECMAScript by the awsome article.

🍣 Asynchronous Iteration

Sample code:

If you want to call asynchronously API multiple time, you could execute in parallel using Promise.all and execute as follows:

(async() => {
const dataList = await Promise.all([
fetch('http://example.com/api/hoge'),
fetch('http://example.com/api/fuga')
]);

for (const data of dataList) {
console.log(data);
}
})();

But if you use a lot of API, it is difficult to manage the code. You could rewrite this by using Asynchronous Iteration:

(async() => {
const promises = ['hoge', 'fuga'].map((path) => {
fetch(`http://example.com/api/${path}`);
})

for await (const data of promises) {
console.log(data);
}
})();

🍮 Rest/Spread Properties

// Rest Properties
const obj = {foo: 1, bar: 2, baz: 3};
const {foo, ...rest} = obj;
// Same as:
// const foo = 1;
// const rest = {bar: 2, baz: 3};

// Spread properties
x; // 1
y; // 2
z; // { a: 3, b: 4, x: 5 }
const n = { x, y, ...z }
console.log(n); // { x:5, y: 2, a: 3, b: 4 }

🎃 RegExp: named capture groups

It is about identifying capture groups via name in RegExp:

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

🏈 RegExp: Unicode property escapes

In the Unicode standard, each character has properties - metadata descripbing it.
We can use the Unicode properties in JavaScript RegExp:

const re = /^\p{General_Category=Decimal_Number}+$/u;

console.log(re.test('123')); // true
console.log(re.test('123foo456')); // false
console.log(re.test('12345𝟞𝟕')); // true

🎳 RegExp: lookbehind assetions

(?<= ...) indicates lookbehind assetions:

// Before ES2018
const result = '123$456 $789 $ 000'
.match(/\$\d+/g)
.map(x=> x.slice(1));
console.log(result); // ['456', '789']

// Using lookbehind assetions
const result = '123$456 $789 $ 000'.match(/(?<=\$)\d+/g);
console.log(result); // ['456', '789'] <= no $

😀 RegExp: s (dotAll) flag for regular expressions

If you add flag /s to a regular expression, . matches line terminator character:

/^.$/s.test('\n')
// true

🐹 Promise.prototype.finally()

Promise.prototype.finally() works as follows:

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally() callbac is always executed. Compare:

  • then() callback is only executed if promise if fulfilled
  • cathc() callback is only executed:
    • If promise is rejected
    • If then’s callback throws an exception
    • returns a rejected Promise.

🚕 Special Thanks

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!