Skip to content

ECMAScript 2017 (ES8)

String padding

The purpose of string padding is to add characters to a string, so it reaches a specific length using padStart() and padEnd().

‘test’.padStart(4) // ‘test’
‘test’.padStart(5) // ’ test’
‘test’.padStart(8) // ’ test’
‘test’.padStart(8, ‘abcd’) // ‘abcdtest’
‘test’.padEnd(4)   // ‘test’
‘test’.padEnd(5)   // ‘test ‘
‘test’.padEnd(8)   // ‘test ‘
‘test’.padEnd(8, ‘abcd’)   // ‘testabcd’

Object.values()

This method returns an array containing all the object own property values.

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

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

Object.entries()

This method returns an array containing all the object own properties, as an array of [key, value] pairs.

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

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

getOwnPropertyDescriptors()

This method returns all own (non-inherited) properties descriptors of an object. A descriptor is a set of attributes of a property, and it’s composed by a subset of the following:

  • value: the value of the property
  • writable: true the property can be changed
  • get: a getter function for the property, called when the property is read
  • set: a setter function for the property, called when the property is set to a value
  • configurable: if false, the property cannot be removed nor any attribute can be changed, except its value
  • enumerable: true if the property is enumerable

If an object for example has just a setter, it’s not correctly copied to a new object, using Object.assign().

const person1 = {
  set name(newName) {
    console.log(newName);
  }
};

const person2 = {};
Object.assign(person2, person1);

This won’t work, but the following will work:

const person3 = {};
Object.defineProperties(person3, Object.getOwnPropertyDescriptors(person1));

Trailing commas

This feature allows to have trailing commas in function declarations, and in functions calls. It is only some formatting sugar to encourage developers to not use comma at the start of line:

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

Async functions

Async functions are a combination of promises and generators to reduce the boilerplate around promises, and the “don’t break the chain” limitation of chaining promises. It’s a higher level abstraction over promises.

Promises were introduced to solve the famous callback hell problem, but they introduced complexity on their own, and syntax complexity. They were good primitives around which a better syntax could be exposed to the developers: enter async functions.

Code making use of asynchronous functions can be written instead of

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

with async/await as

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

Shared Memory and Atomics

WebWorkers are used to create multi-threaded programs in the browser.

They offer a messaging protocol via events. You can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.

Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.