JavaScript 2017 - New Features

async/await Keywords

It simplifies working with asynchronous code.When a function is defined as async it returns a promise i.e the return value is wrapped as a promise.

The await keyword can only be used within a async function.The control waits until the promise is settled.

// async/await
function fx() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('resolved');
      }, 1000);
    });
  }

  async function asyncFx() {
    console.log('calling');
    const result = await fx();
    console.log(result); // resolved    
  }

  asyncFx();

In the above code the control waits inside asyncFx() function until fx() function is completed. When the fx() function returns a promise the value is captured and processed inside the asyncFx() function.

async function getData() {
    try {
        let response = await  fetch("http://echo.jsontest.com/key/value/one/two");
        let data = await response.json();
        console.log("data", data);
    }catch (err) {
            console.log("error ", err);
     }
}

getData();

In the above code control waits inside getData() function until fetch is completed.

Object.entries() function

It converts an object into an 2D array with key - value as pairs within the array.

  let city = {
    "delhi":1000,
    "mumbai":2000,
    "bangalore":1500
  };
  console.log(Object.entries(city));
  for (let [k,v] of Object.entries(city))
    console.log(k,v);

In the above code the city object is converted to 2D array. The array can be iterated using the for..of loop.

Object.values() function

It extracts values from an object and returns an array composed of those values.

let city = {
    "delhi":1000,
    "mumbai":2000,
    "bangalore":1500
  };

console.log(Object.values(city));

In the above code the object is converted to an array containing only values i.e the array does not have any keys.

Object.getOwnPropertyDescriptors()

It returns all the details of a property. The details that are returned for a property are

• value

• enumerable

• writable

• configurable

let city = {
    "delhi":1000,
    "mumbai":2000,
    "bangalore":1500
  };
// Object.getOwnPropertyDescriptors
console.log(Object.getOwnPropertyDescriptors(city));

In the above code all the property details are returns with their status.

padStart() and padEnd() functions

These functions are used for padding a value at the start and at the end.

// padStart, padEnd
console.log("ram".padStart(7,0)); // 7 character total , padded with 0
console.log("ram".padEnd(7,0)); // 7 chars, padded with 0

In the above code is padded at the start and end 7 times with 0.

Complete Code Listing

// async/await
function fx() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('resolved');
      }, 1000);
    });
  }

  async function asyncFx() {
    console.log('calling');
    const result = await fx();
    console.log(result); // resolved    
  }

  asyncFx();

  async function getData() {
    try {
        let response = await  fetch("http://echo.jsontest.com/key/value/one/two");
        let data = await response.json();
        console.log("data", data);
    }catch (err) {
            console.log("error ", err);
     }
}

getData();

// Object.entries and Object.values
  let city = {
    "delhi":1000,
    "mumbai":2000,
    "bangalore":1500
  };
  console.log(Object.entries(city));
  for (let [k,v] of Object.entries(city))
    console.log(k,v);

console.log(Object.values(city));    

// Object.getOwnPropertyDescriptors
console.log(Object.getOwnPropertyDescriptors(city));