ECMAScript 2017

JavaScript naming conventions 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 Async Functions
  • JavaScript Shared Memory

JavaScript String Padding

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

instance

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

Try It Yourself

instance

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

Try It Yourself

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
March 2017 April 2017 August 2016 September 2016 March 2017

JavaScript object entries

ECMAScript 2017 added new Object.entries method.

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

instance

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

Try It Yourself

Object.entries() simplifies looping with objects:

instance

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

Try It Yourself

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

instance

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

Try It Yourself

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
June 2016 August 2016 June 2016 March 2017 October 2016

JavaScript object values

Object.values Similar Object.entriesHowever, it returns a one-dimensional array of object values:

instance

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

Try It Yourself

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
October 2016 August 2016 June 2016 March 2017 October 2016

JavaScript Async Functions

Timeout Waiting

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Try It Yourself

Firefox and Chrome are the first browsers to support asynchronous JavaScript functions:

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