JS 2017

New Features in JavaScript 2017

Browser Support

JavaScript 2017 is supported in all modern browsers since September 2017:

JavaScript String Padding

ECMAScript 2017 added two string methods to JavaScript: padStart() and padEnd() to support padding at the beginning and at the end of a string.

Examples

let text = "5";

text = text.padStart(4,0);

JavaScript Object Entries

ECMAScript 2017 added the Object.entries() method to objects.

Object.entries() returns an array of the key/value pairs in an object:

Example

const person = {

  firstName : "John",

  lastName : "Doe",

  age : 50,

  eyeColor : "blue"

};

let text = Object.entries(person);

Object.entries() makes it simple to use objects in loops:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";

for (let [fruit, value] of Object.entries(fruits)) {

  text += fruit + ": " + value + "<br>";

}

Object.entries() also makes it simple to convert objects to maps:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};

const myMap = new Map(Object.entries(fruits));

JavaScript Object Values

Object.values() is similar to Object.entries(), but returns a single dimension array of the object values:

Example

const person = {

  firstName : "John",

  lastName : "Doe",

  age : 50,

  eyeColor : "blue"

};

let text = Object.values(person);

JavaScript Async Functions

Waiting for a Timeout

async function myDisplay() {

  let myPromise = new Promise(function(myResolve,  myReject) {

    setTimeout(function() { myResolve("I love You !!"); }, 3000);

  });

  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

JavaScript Trailing Commas

JavaScript allows trailing commas wherever a comma-separated list of values is accepted.

In Array and Object Literals, Function Calls, Parameters, Imports and Exports.

Example

function myFunc(x,,,) {};

const myArr = [1,2,3,4,,,];

const myObj = {fname: John, age:50,,,};

The Object.getOwnPropertyDescriptor() Method

Object.getOwnPropertyDescriptors() returns all own property descriptors of a given object.

Example

const myProp = Object.getOwnPropertyNames(person);

Example

const myProp = Object.getOwnPropertyDescriptors(person);

A property descriptor is an object that describes all attributes of a property:

• value: The property's value
• writable: true if the property value can be changed
• enumerable: true if the property will show up in loops (for...in, Object.keys())
• configurable: true if the property descriptor can be changed or deleted
• get: Function to get the property value (for accessor properties)
• set: Function to set the property value (for accessor properties)

Object Cloning

The Object.getOwnPropertyDescriptors() is often used to clone objects while preserving getters, setters, and property attributes:

Example

const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(person));