ECMAScript 2017

The JavaScript naming convention started with ES1, ES2, ES3, ES5, and ES6.

However, ECMAScript 2016 and 2017 are not called ES7 and ES8.

Since 2016, new versions have been named by year (ECMAScript 2016/2017/2018).

New features in ECMAScript 2017

This chapter introduces the new features of ECMAScript 2017:

  • JavaScript string padding
  • JavaScript Object.entries
  • JavaScript Object.values
  • JavaScript asynchronous functions
  • JavaScript shared memory

JavaScript string padding

ECMAScript 2017 has added two new String methods:padStart and padEndTo support padding at the beginning and end of strings.

example

let str = "5";
str = str.padStart(4,0);
// Result is: 0005

Probeer het zelf

example

let str = "5";
str = str.padEnd(4,0);
// Result is: 5000

Probeer het zelf

Internet Explorer does not support string padding.

Firefox and Safari were among the first browsers to support JavaScript string padding:

Chrome IE Firefox Safari Opera
Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
Maart 2017 April 2017 2016 August 2016 September Maart 2017

JavaScript object entries

ECMAScript 2017 added new features to objects Object.entries method.

The Object.entries() method returns an array of key/value pairs from an object:

example

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);

Probeer het zelf

Object.entries() simplifies looping with objects:

example

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}

Probeer het zelf

Object.entries() also makes it easy to convert an object to a map:

example

const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));

Probeer het zelf

Chrome and Firefox were among the first to support Object.entries browser:

Chrome IE Firefox Safari Opera
Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016 June 2016 August 2016 June Maart 2017 Oktober 2016

JavaScript object values

Object.values similar Object.entriesbut returns a one-dimensional array of object values:

example

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);

Probeer het zelf

Firefox and Chrome were among the first to support Object.values browser:

Chrome IE Firefox Safari Opera
Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
Oktober 2016 2016 August 2016 June Maart 2017 Oktober 2016

JavaScript Asynchrone Functies

Wacht op time-out

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("Ik hou van je !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Probeer het zelf

Firefox en Chrome zijn de eerste browsers die asynchrone JavaScript functies ondersteunen:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
December 2016 April 2017 Maart 2017 September 2017 December 2016