Complete list of ES2017 (ES8) Features!

1. Object.values() and Object.entries()

• Object.values() returns an array of enumerable property values. Works similar to for...in, except the fact that for...in iterates properties in prototype chain as well.

• Object.entries()  returns an array of object’s own enumerable property in [key, value] pairs. Properties are returned in the same order as for...in, except the fact that for...in iterates properties in prototype chain as well.

2. Object.getOwnPropertyDescriptors()

The Object.getOwnPropertyDescriptors() method in es8 returns all own property descriptors of an object. An own property means the one that is defined directly on the object and is not inherited from the object’s prototype. A property descriptor is a record of attributes like value, writable, get, set, configurable, enumerable. It has the following signature:

obj | Parameter

The object for which to get all own property descriptors.

Return Value| Object

An object containing all own property descriptors of obj. It can be empty an object, if there are no properties.

Code Snippets

3. String Padding – String.prototype.padStart() and String.prototype.padEnd()

There are two new methods added to String object, padStart() and padEnd() to pad a string with any given string.

The padEnd() method pads the current_string with a given_string (repeated, if needed) so that the resulting_string reaches a given length. The padding is applied from the end of the current_string.

The padStart() method pads the current_string with a given_string (repeated, if needed) until the resulting_string reaches the given length. The padding is applied from the start (left) of the current_string.

targetLength

The length to which current_string has been padded. If the value is less than the current string’s length, the current string is returned as it is.

padString | Optional

The string to pad the current_string with. If this padString is too long to stay within the targetLength, it will be truncated from the right. The default value is " " (‘space’).

Return value – String

The padded string.

Code Snippets

4. Async and await in ES2017 Functions

Async means asynchronous functions. Before we deep dive into async and await, we will spend some time in understanding asynchronous programming in js.

Execution in JavaScript is synchronous and single-threaded by default.

Single-threaded means one command is executed at a once, and synchronous means one line of code at a time is being executed. This is the reason why we need to employ little extra technique to implement asynchronous execution.

4.1 Using Callbacks for Async Programming

A callback is a function that is passed to another function invocation. Once the execution of the first function is completed, it invokes the second one.

Code Snippets:

Callbacks can be really messy, which is also known as callback hell.

Code Snippets

As you can see in the above example, a real complex workflow can be messy when written in callbacks.

4.2 Using Promise in JavaScript – ES2017

To overcome the callback hells, promise is used. A promise is used to handle the asynchronous result of an operation.
Using Promises, we can defer execution of code until an async operation is completed.

A Promise has one of these 3 states:
Pending

The promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.

Fulfilled

The asynchronous operation has completed, and the promise has a value.

Rejected

The asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a reason that indicates why the operation failed.

Code Snippets

4.3 Async in JavaScript

A very clean approach to invoke and implement the asynchronous programming in JS is async. Some call it a syntactical sugar way to write promises.It makes managing promise much easier.

async keyword is added to function declaration

Everything you return from that function will be wrapped in a resolved promise. If you throw in the function the promise will return in the rejected state.

Code Snippets

4.4 Await in JavaScript

await is a keyword added to the function invocation in ES2017 (es8).

• It only works inside an async function. It makes sure the promise is done before continuing the async function (all other functions that might run are continuing).
• If the function executes successfully, the result of await is the return value of the function that is called.
• If the function fails await throws the rejection value.

Code Snippets

4.5 Parallel and Sequential execution using async and await

Below is how a typical Parallel or Sequential execution looks like.

Code Snippets

5. Trailing commas in function parameter lists

Developer loves the trailing of commas in object literals and Array literals { name: 'Bikram', } and [100, 200, 300,], this feature is indeed inspired from here.
In ES8 (ES2017), trailing comma is legal in function declarations as well as in function invocations.