V8 6.3 shipped New ECMAScript features
Tags: javascript, ecmascript, node, v8
Published: 2017-11-30 15:32:11

---
title: V8 6.3 shipped New ECMAScript features
published: true
description: V8 6.3 shipped New ECMAScript features
tags: javascript,ecmascript,node,v8
---


V8 released 6.3 on October 25, 2017 (see: [V8 JavaScript Engine](https://v8project.blogspot.jp/2017/10/v8-release-63.html)) 
It includes new features from [ECMAScript proposal stage-3](https://github.com/tc39/proposals#stage-3)
It seems likely that they will also soon be implemented in Node.js

Now, you can try them with `--hamony` options or 3rd party libraries.
I developed demo on [GitHub](https://github.com/shisama/v8-6.3-es-features)

# Dynamic import
[Specification](https://tc39.github.io/proposal-dynamic-import/)

It is possible to load parts of a JavaScript application dynamically at runtime with this feature.
If you want to use a function from moduleA or moduleB, you may write code like below.

```javascript
if (member.isLoggedIn()) {
  moduleA.func();
} else {
  moduleB.func();
}
```

Using static import, you have to import both modules.

```javascript
import moduleA from './moduleA';
import moduleB from './moduleB';

if (member.isLoggedIn()) {
  moduleA.func();
} else {
  moduleB.func();
}
```

However, you can now dynamically import only the module you want to use with the dynamic import feature.


```javascript
if (member.isLoggedIn()) {
  import('./moduleA.js') // load moduleA here
    .then(module => {
      module.func();
    });
} else {
  import('./moduleB.js') // load moduleB here
    .then(module => {
      module.func();
    });
}
```

Also, you can use dynamic import with loop or promise.

```javascript
for (let i = 0; i < MAX; i++) {
  import(`module${i}.js`)
    .then(module => {
      module.func();
    });
}
```

```javascript
promiseFunc()
  .then(res => {
    return import('./module.js');
  })
  .then(module => {
    module.func(data);
  });
```

function import() returns Promise object and you can use async/await.


```javascript
(async() => {
  if (member.isLoggedIn()) {
    const module = await import('./moduleA.js') // load moduleA
    module.func();
  } else {
    const module = await import('./moduleB.js') // load moduleB
    module.func();
  }
})()
```

[Demo](https://shisama.github.io/v8-6.3-es-features/demo/dynamic_import.html)
With Chrome 63 or later, check console or network panel and you can see the modules loaded dynamically at runtime.
Code is below.

```javascript
(async() => {
    let count = 0;
    // load hello1、hello2、hello3 in a random order at runtime
    let id = setInterval(async() => {
      const i = Math.floor(Math.random() * 3) + 1;
      const module = await import(`./import_modules/hello${i}.js`);
      module.hello();
      count++;
      if (count === 10) {
          clearInterval(id);
      }
     }, 1000);
})();
```

Using [node-es-module-loader](https://www.npmjs.com/package/node-es-module-loader), it is available to run in Node.js.

# Async Iteration
[Specification](https://tc39.github.io/proposal-async-iteration/)

a.k.a Async Iterators / Generators
This supports asynchronously iterating data from async functions.
If you don't know iterator and generator, read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)

Up to now, it's been possible to run async functions or APIs in parallel with Promise.all.
```javascript
(async() => {
  const dataList = await Promise.all([
    fetch('https://qiita.com/api/v2/tags/Node.js'),
    fetch('https://qiita.com/api/v2/tags/JavaScript'),
    fetch('https://qiita.com/api/v2/tags/npm'),
  ]);
  for (const data of dataList) {
    console.log(data);
  }
})();
```

However, calling many functions or APIs may make code too unwieldy.
Async Iterators make it easy to read.

```javascript
(async() => {
  const promises = [];
  for (const tag of ["Node.js", "JavaScript", "npm"]) {
    promises.push(fetch(`https://qiita.com/api/v2/tags/${tag}`));
  }
  
  for await (const data of promises) {
    console.log(data)
  }
})();
```

Async generators make it possible to customize iteration.
[Demo](https://shisama.github.io/v8-6.3-es-features/demo/async_iteration.html)
With Chrome 63 or later, check console or network panel and you can see api is called several times.
Code is below. Using [axios](https://github.com/axios/axios).

```javascript
/*
 * get random number
 */
async function* gen() {
  while (true) {
    const res = await axios.get('https://www.random.org/decimal-fractions/?num=1&dec=10&col=1&format=plain&rnd=new');
    const num = res.data;
    yield Number(num);
  }
}

(async() => {
  const BREAK = 0.8;
  for await (const num of gen()) {
    console.log(num);
    if (num > BREAK) {
      console.log("over", BREAK);
      break;
    }
  }
})();
```

In Node.js, it is necessary to use `--harmony_async_iteration` option.

# Promise.prototype.finally
[Specification](https://tc39.github.io/proposal-promise-finally/)

As you know, this is like finally of try-catch-finally.
Up to now, if you wanted to execute some code regardless of whether an error will occur or not, you had to write said code in both the then() and catch() blocks of a Promise.

```javascript
promiseFunc()
  .then(() => {
    someFunction();
    closeFunction(); // for successful
  })
  .catch(err => {
    console.log(err);
    closeFunction(); // for error
  });
```

However, now, Promise.prototype.finally allows you to write code like the try-catch-finally pattern.

```javascript
promiseFunc()
  .then(() => {
    someFunction();
  })
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    closeFunction();
  });
```

Now, you can use try-catch-finally with async/await pattern.

```javascript
(async() => {
  try {
    await promiseFunc();
    await someFunction();
  } catch (err) {
    console.log(err);
  } finally {
    closeFunction();
  }
})();
```

[Demo](https://shisama.github.io/v8-6.3-es-features/demo/promise_finally.html)
Code is below.

```javascript
Promise.resolve("resolve")
  .then(val => {console.log(val);return "then"})
  .then(val => {console.log(val);throw new Error("catch")})
  .catch(err => {console.log(err.message)})
  .finally(() => {console.log("finally")});
```

With Chrome 63 or later, check console panel and you can see resolve(), then(), catch() and finally() are called.

In Node.js, it is necessary to use `--harmony_promise_finally` option.

# Further reading
- [V8 JavaScript Engine: V8 Release 6.3](https://v8project.blogspot.jp/2017/10/v8-release-63.html)
- [tc39/proposal-dynamic-import](https://tc39.github.io/proposal-dynamic-import/)
- [tc39/proposal-async-iteration](https://tc39.github.io/proposal-async-iteration/)
- [tc39/proposal-promise-finally](https://tc39.github.io/proposal-promise-finally/)
- [Async iterators and generators - JakeArchibald.com](https://jakearchibald.com/2017/async-iterators-and-generators/)
- [Promise.prototype.finally | blog.jxck.io](https://blog.jxck.io/entries/2017-08-10/promise-finally-proposal.html)

# Thanks
[@shimataro999](https://twitter.com/shimataro999) and [@mackles93](https://twitter.com/mackles93) reviewed this post.

Thanks.