The ES2017 Guide: Discovering the Features of ECMAScript 2017 (ES8)

ECMAScript (ES) serves as the basis for JavaScript, and the latest version, ECMAScript 2017 (also known as ES8), was finalized in June 2017. Although ES8 is a relatively small release compared to ES6, it introduces several useful features. In this guide, we will explore the new additions in ES2017 and learn how they can enhance your JavaScript development.

String Padding

The string padding feature allows you to add characters to a string until it reaches a specific length. ES2017 introduces two string methods for this purpose: padStart() and padEnd().

padStart(targetLength [, padString])

The padStart() method pads the starting of a string with characters until it reaches the specified target length. You can optionally provide a padString parameter to specify the characters used for padding.

Sample usage:

padStart()	Output
'test'.padStart(4)	'test'
'test'.padStart(5)	'test'
'test'.padStart(8)	'    test'
'test'.padStart(8, 'abcd')	'abcdtest'

padEnd(targetLength [, padString])

The padEnd() method pads the ending of a string with characters until it reaches the specified target length. Like padStart(), you can provide a padString parameter to specify the characters used for padding.

Sample usage:

padEnd()	Output
'test'.padEnd(4)	'test'
'test'.padEnd(5)	'test '
'test'.padEnd(8)	'test    '
'test'.padEnd(8, 'abcd')	'testabcd'

Object.values()

The Object.values() method returns an array containing all the values of the object’s own properties.

Usage:

const person = { name: 'Fred', age: 87 };
Object.values(person); // ['Fred', 87]

Object.values() also works with arrays:

const people = ['Fred', 'Tony'];
Object.values(people); // ['Fred', 'Tony']

Object.entries()

The Object.entries() method returns an array containing all the own properties of the object as [key, value] pairs.

Usage:

const person = { name: 'Fred', age: 87 };
Object.entries(person); // [['name', 'Fred'], ['age', 87]]

Object.entries() also works with arrays:

const people = ['Fred', 'Tony'];
Object.entries(people); // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors()

The getOwnPropertyDescriptors() method returns all the own (non-inherited) property descriptors of an object. Each property descriptor contains attributes like value, writable, get, set, configurable, and enumerable.

Usage:

const person = { name: 'Fred', age: 87 };
Object.getOwnPropertyDescriptors(person);
// { name: { value: 'Fred', writable: true, enumerable: true, configurable: true }, 
//   age: { value: 87, writable: true, enumerable: true, configurable: true } }

This method is particularly useful when copying object properties accurately using Object.assign() or shallow cloning objects using Object.create().

Trailing Commas

ES2017 allows trailing commas in function parameter lists and function calls. This feature eliminates the need for the “comma at the start of the line” convention.

Example:

const doSomething = (var1, var2,) => {
  //...
}

doSomething('test2', 'test2',)

Async Functions

Async functions are a significant addition introduced in ES2017. They combine promises and generators to provide a higher-level abstraction over promises, eliminating the complexities associated with chaining promises.

Why They Are Useful

While promises solved the callback hell problem, they introduced their own complexities and syntax intricacies. Async functions offer a more intuitive and straightforward syntax for handling asynchronous code.

A Quick Example

The following example demonstrates the usage of async functions:

function doSomethingAsync() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('I did something'), 3000);
  });
}

async function doSomething() {
  console.log(await doSomethingAsync());
}

console.log('Before');
doSomething();
console.log('After');

The output will be:

Before
After
I did something //after 3s

Multiple Async Functions in Series

Async functions can be easily chained together, providing a more readable syntax compared to plain promises.

Example:

function promiseToDoSomething() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('I did something'), 10000);
  });
}

async function watchOverSomeoneDoingSomething() {
  const something = await promiseToDoSomething();
  return something + ' and I watched';
}

async function watchOverSomeoneWatchingSomeoneDoingSomething() {
  const something = await watchOverSomeoneDoingSomething();
  return something + ' and I watched as well';
}

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
  console.log(res);
});

Shared Memory and Atomics

Since ES2017, you can create a shared memory array between web workers and their creator using SharedArrayBuffer. To ensure that writing operations are completed before reading a value, the Atomics API is introduced. It enforces synchronicity when reading shared memory.

For detailed information, refer to the spec proposal.

Tags: ECMAScript, ES2017, ES8, JavaScript, String Padding, Object.values(), Object.entries(), getOwnPropertyDescriptors(), Trailing Commas, Async Functions, Shared Memory, Atomics