5 Things You Should Know About ES8

ECMAScript 2017 8th edition (ES2017/ES8) has been officially released and published a few weeks ago, let’s figure it out some important changes. All of these are available with Node 8 and with the latest version of browsers without babel or any polyfills.

Here’s the specification in detail.

Object.values

Like Object.keys, but for values.

Such as Object.keys do, the Object.values method returns an array of a given object’s own enumerable property values instead of keys.

const translations = {
  en: {
    home: 'Home',
    greeting: 'Welcome',
  },
  fr: {
    home: 'Accueil',
    greeting: 'Bienvenue',
  },
};

Object.keys(translations).forEach((key) => {
  console.log(key); // "en"
  // "fr"
});

Object.values(translations).forEach((value) => {
  console.log(value); // "{ home: "Home", greeting: "Welcome" }"
  // "{ home: "Accueil, greeting: "Bienvenue" }"
});

Object.entries

If we merged Object.keys and Object.values, that would be Object.entries. It returns an array of [key, value].

The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs.

const translations = {
  en: {
    home: 'Home',
    greeting: 'Welcome',
  },
  fr: {
    home: 'Accueil',
    greeting: 'Bienvenue',
  },
};

// Before Object.entries
Object.keys(translations).forEach((key) => {
  console.log(key, translations[key]); // "en" "{ home: "Home", greeting: "Welcome" }"
  // "fr" "{ home: "Accueil, greeting: "Bienvenue" }"
});

Object.entries(translations).forEach(([key, value]) => {
  console.log(key, value); // "en" "{ home: "Home", greeting: "Welcome" }"
  // "fr" "{ home: "Accueil, greeting: "Bienvenue" }"
});

padStart

Pad a string from the start until the given length is reached.

The padStart() method pads the current string with another string (repeated, if needed) so that the resulting string reaches the given length. The padding is applied from the start (left) of the current string.

'abc'.padStart(10); // "       abc"
'abc'.padStart(10, 'foo'); // "foofoofabc"
'abc'.padStart(6, '123465'); // "123abc"
'abc'.padStart(8, '0'); // "00000abc"
'abc'.padStart(1); // "abc"

padEnd

Pad a string from the end until the given length is reached.

The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string.

'abc'.padEnd(10); // "abc       "
'abc'.padEnd(10, 'foo'); // "abcfoofoof"
'abc'.padEnd(6, '123456'); // "abc123"
'abc'.padEnd(1); // "abc"

padThai

Just a delicious pad thai.

Trailing commas in function parameter lists

function abc(a, b, c,) {} // <- OK
function abc(
  a,
  b,
  c, // <- OK
) {
  // some code
}

abc('', '', '',); // <- OK
abc(
  '',
  '',
  '', // <- OK
);

Enjoy ES2017!