Left arrow Back to blog

#What's new in JavaScript language in 2017 (ES8)


Object.values()

The Object.values method returns an array of a given object's own enumerable property values.

const object_1 = {
  num1: "value",
  num2: 123,
  num3: true
};
Object.values(object_1); // ["value",123, true]

Object.values() can also coerce a string into an object so that it will turn into an array. This is the same as using .split(“”) on a string.

Object.values("test"); //["t","e","s","t"]

Object.entries()

The Object.entries() method returns an array that contains [ key,value ] pairs

const object_1 = {
  num1: "value",
  num2: 123,
  num3: true
};
Object.entries(object_1);
// [Array(2), Array(2), Array(2)]
// [["num1","value"],["num2",123],["num3",true]]

Object.getOwnPropertyDescriptors

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

const object_1 = {
  num1: "value",
  num2: 123,
  num3: true
};
Object.getOwnPropertyDescriptors(object_1);
// {num1: {…}, num2: {…}, num3: {…}}
// num1:
  // configurable: true
  // enumerable: true
  // value: "value"
  // writable: true
// num2:
  // configurable: true
  // enumerable: true
  // value: 123
  // writable: true
// num3:
  // configurable: true
  // enumerable: true
  // value: true
  // writable: true
  • value
    • The value associated with the property (data descriptors only).
  • writable
    • true if and only if the value associated with the property may be changed (data descriptors only).
  • get
    • A function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only).
  • set
    • A function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only).
  • configurable
    • true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
  • enumerable
    • true if and only if this property shows up during enumeration of the properties on the corresponding object.

String.padStart/padEnd

The padStart() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start (left) or the end (right) of the current string
str.padStart(targetLenght [, padString ])
str.padEnd(targetLenght [, padString ])
targetLenght is is the length of the result string. The second parameter is optional padString is the string to pad into the source string. The default is whitespace.

"hello".padStart(2); //  "hello"
"hello".padStart(6); //  " hello"
"hello".padStart(8, "es2017"); //  "es2hello"
"hello".padStart(20, "aloha"); //  "alohaalohaalohahello"
"hello".padStart(14, "0"); // "000000000hello"
"hello".padEnd(2); //  "hello"
"hello".padEnd(6); //  "hello "
"hello".padEnd(8, "es2017"); //  "helloes2"
"hello".padEnd(20, "aloha"); //  "helloalohaalohaaloha"
"hello".padEnd(14, "0"); //  "hello000000000"

Trailing commas in Literals

Trailing commas* (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

Alt Text

In the GitHub, if we use trailing commas, when we add an item to object_2. GitHub indicated that only one lline was added. Otherwise, It’s will indicate three line is changed – one was deleted and two line added. And the truth is we just added one line.

Async Function

Async/await is a new way to write asynchronous code in ES8. Firstly, let’s talk about previouse way to write asynchronous in E6 – Promise
We have a example of asynchronouse code using Promise

function resolveAfterSeconds(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`delay ${time} second`);
    },time);
  });
}

resolveAfterSeconds(2000).then((result) => {
  console.log(result); //delay 2 second
})

That code will return a value “delay 2 second” after 2 seconds. In a real work, we will use Promise to get a value - if and only we get that value, the code below will start. This ensures you are sure that you have obtained the value you want, then the code below will run, otherwise the code behind the code using the above value will not work as expected.
It's a good way to write asynchronous code. But, we have problem that if you want to get more different value in function resolveAfterSeconds()
Firstly, A mistake we often make when we first get to know Promise, is to create "promises" pyramid like this.

resolveAfterSeconds(5000).then(result => {
  console.log(result + " first time");
  resolveAfterSeconds(1000).then(resultSecond => {
    console.log(resultSecond + " second time");
    resolveAfterSeconds(3000).then(resultThird => {
      console.log(resultThird + " third time");
      resolveAfterSeconds(1000).then(resultFourth => {
        console.log(resultFourth + " fourth time");
      });
    });
  });
});

You can avoid coding like that :

resolveAfterSeconds(5000)
  .then(result => {
    console.log(result + " first time");
    return resolveAfterSeconds(1000);
  })
  .then(resultSecond => {
    console.log(resultSecond + " second time");
    return resolveAfterSeconds(3000);
  })
  .then(resutThird => {
    console.log(resultThird + " third time");
    return resolveAfterSeconds(1000);
  })
  .then(resultFourth => {
    console.log(resultFourth + " fourth time");
  });

This is more cleaner for you and who see your code. Moreover, we have another way to code by using ES8 – Async function

async function asyncFunction() {
  const first = await resolveAfterSeconds(5000);
  const second = await resolveAfterSeconds(1000);
  const third = await resolveAfterSeconds(3000);
  const fourth = await resolveAfterSeconds(1000);
}

The code if you use Async Function is more short and easily to understand. But, I think the appearance of Async Function doesn't make Promise unnecessary. That gives us a solution to solve Promise shortcomings and Promise also has advantages for us to continue using.
As you can see, Async Function makes code easily to read and understand. But there is one important issue, the time we have to wait for more. Imagine if the waiting time for each value is 2 seconds, waiting for multiple values at this time is time consuming.
Assuming that in the above example, only fourth is required to wait for the first second and the third to complete to start. So, waiting for the first to finish before second and third is unnecessary. Why don't we let first,second and third start at the same time?. The code will become faster if we take advantage of Promise

async function asyncFunction() {
  let result = await Promise.all([
    resolveAfterSeconds(5000), //first
    resolveAfterSeconds(1000), //second
    resolveAfterSeconds(3000) //third
  ]);
  const fourth = await resolveAfterSeconds(1000);
})