1. String padding

The purpose of string padding is to add characters to the string so that it can reach a certain length .

ES2017 brings two new methods for String : padStart() and padEnd() .

Example of usage:

2. Object.values ​​()

This method returns an array containing all the attribute values ​​of the object itself.

Use:

Object.values() can also be used with arrays:

3. Object.entries ()

This method returns an array containing the properties of the object as an array of [key, value] pairs.

Use:

Object.entries() can also be used with arrays:

4. Object.getOwnPropertyDescriptors ()

This method accepts an object and returns an object containing all descriptions of (non-inherited) properties of the object passed.

Any object in JavaScript has properties and each of these properties has a descriptor.

A descriptor is a set of “properties of an attribute” including:

• value: value of the attribute
• writable: indicates whether the value of the property can be changed or not
• get: a getter function for the property ( undefined if none)
• set: a setter function for the attribute ( undefined if none)
• configurable: shows whether or not the property descriptor can be changed, whether or not the property can be deleted from the object.
• enumerable: Indicates whether the attribute appears when listing the properties of the object

What is the application of this method?

In ES6 we have Object.assign() that can copy all enumerable properties from one or more objects and return a new object.

However, the problem is that because Object.assign() only reads the value of the attribute and then saves it to the object assigned as a simple data attribute, for example when an object has only a setter, it will not work. Copy to the new object if using Object.assign() .

For example with:

The result is:

And when person1 to a new object:

we will get: But if we do the following, we can copy the setter:

You can simply test it on the console as follows:

Because person2 not copy setter, there will be no log of name.

We will have the same problem when copying objects with Object.create() .

5. Last comma

This feature allows us to add the last comma when defining the function or when calling the function (previously only able to add the last comma to arrays and objects):

This feature is useful when we want to add new elements, parameters or attributes … You just need to add new lines without having to edit the old ones. This makes it easier to keep track of changes between versions of the code, as well as to eliminate the need to write code with commas at the beginning of a line.

6. Async function

Javascript has evolved very quickly from callbacks to promises (ES2015), and since ES2017, asynchronous JavaScript has become simpler with the async / await syntax.

The async function is a combination of promise and generator. It is basically a higher level of abstraction of promises and async / await is built from promises .

Why asynce / await was created

When promises were introduced in ES2015, the meaning was to solve asynchronous code problems and to solve them. However, during the two years from ES2015 to ES2017, it became clear that promises are not the last resort.

The Promise offered to solve the emerging problem is that there are too many nested callbacks, but it also leads to additional complications from itself as well as syntax complexity.

Promise is a primitive from which the programmer can see the syntax better. So finally we get the async function from the promise.

The Async function makes the code look like it is synchronous but actually behind it is asynchronous.

How to operate

For example, we have an async function that returns a promise like this:

When you call this function, add await to the front of the function and the code will stop until the promise is resolved or rejected . However, it should be noted that: the call must be defined with async . For example:

Result:

Async functions always promise

Adding keyword async in front of any function will cause that function to return a promise.

Although there is no need to declare a promise, actually inside the function will still return a promise.

So this code snippet:

would be similar to:

Async function in sequence

The async function can be joined together very easily and its syntax is much easier to read than using promises simply:

7. Shared Memory and Atomics

WebWorkers are used to create multithreaded programs in the browser.

It provides a messaging protocol through events. Since ES2017, you can create a shared memory array between web workers and their creators using SharedArrayBuffer .

Because it is unclear how much time it takes to write to shared memory, Atomics has appeared to be able to ensure that when reading a value, the writing operation has been completed.

More details on this feature you can read at all recommended spec this .

Above are the ES2017 features. You can read more about ES2018 features in the next article .