Final feature sets of ECMAScript 2018

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

🐯 Asynchronous Iteration

Detail Description
- http://2ality.com/2016/10/asynchronous-iteration.html
Outline
- Support data that is delivered asynchronously
Use case
- Lines of text, read asynchronously from a file or an HTTP connection

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

Detail
- http://2ality.com/2016/10/rest-spread-properties.html
Outline
- The rest operator ... in object destructuring
- The spread operator (…) in object literals

// 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 = /(?[0-9]{4})-(?[0-9]{2})-(?[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('１２3４5𝟞𝟕')); // true

😀 RegExp: lookbehind assetions

(?<= ...)< code> 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< span>);
console.log(result); // ['456', '789'] <= no $< span>

🐝 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!!