ES2017 guide

ECMAScript is the standard on which JavaScript is based, and is often abbreviated as ES. Discover all the information about ECMAScript and the features added in ES2017 (also known as ES8)

ECMAScript 2017, the 8th edition of the ECMA-262 standard (also commonly referred to asES2017orES8), was finalized in June 2017.

Compared with ES6, ES8 is a very small JavaScript version, but still introduces very useful features:

  • String padding
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()
  • Function parameter lists and trailing commas in calls
  • Asynchronous function
  • Shared memory and atoms

String padding

The purpose of string padding is toAdd characters to the string, and soReach a certain length.

ES2017 introduced twoStringmethod:padStart()withpadEnd().

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

Example usage:

padStart()
'test'.padStart(4) 'test'
'test'.padStart(5) 'Test'
'test'.padStart(8) 'Test'
'test'.padStart(8,'abcd') 'abcdtest'
padEnd()
'test'.padEnd(4) 'test'
'test'.padEnd(5) 'test'
'test'.padEnd(8) 'test'
'test'.padEnd(8,'abcd') 'testabcd'

Object.values()

This method returns an array containing all the object's own property values.

usage:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()Also applies to arrays:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries()

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

usage:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()Also applies to arrays:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors()

This method returns all of the object's own (non-inherited) property descriptors.

Any object in JavaScript has a set of properties, and each property has a descriptor.

A descriptor is a set of attributes of attributes, consisting of the following subsets:

  • value: The value of the property
  • Writable: True can change the attribute
  • get: The getter function of the property, which is called when the property is read
  • put: The setter function of the property, which is called when the property is set to the value
  • Configurable: If it is false, the attribute cannot be deleted, nor can any attribute be changed, except for its value
  • Countless: True if the attribute is enumerable

Object.getOwnPropertyDescriptors(obj)Accepts an object and returns an object with a descriptor set.

What's the use of this?

ES6 gave usObject.assign(), It copies all enumerable properties from one or more objects and returns a new object.

However, this has a problem because it cannot copy properties with non-default properties correctly.

For example, if an object has only one setter, it cannot be usedObject.assign().

For example with

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

this will not work:

const person2 = {}
Object.assign(person2, person1)

But this will work:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

You can see through a simple console test:

person1.name = 'x'
"x"

person2.name = ‘x’

person3.name = ‘x’ “x”

person2Missed the setter, it was not copied.

The same restriction applies to shallow cloned objects with the following characteristics:Object.create().

Trailing comma

This feature allows comma endings in function declarations and function calls:

const doSomething = (var1, var2,) => {
  //...
}

doSomething(‘test2’, ‘test2’,)

This change will encourage developers to stop the ugly "beginning with a comma" habit.

Asynchronous function

View related dedicated postsAsync/await

ES2017 introducedAsynchronous function, This is the most important change introduced in this ECMAScript version.

Asynchronous function is a combination of promise and generator, which can reduce the boilerplate of promise and the "don't break the chain" restriction of linking promises.

Why they are useful

This is a higher level of abstraction of the promise.

When Promises were introduced in ES6, they were designed to solve the problem of asynchronous code, and they did, but in the 2 years separating ES6 and ES2017, it became clearPromises cannot be the final solution. Introduced the resolution of the famous promiseCallback hellProblem, but they themselves introduced complexity and grammatical complexity. They are good primitives and can provide developers with better syntax around these primitives:Asynchronous function.

A simple example

The code that utilizes asynchronous functions can be written as

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}

async function doSomething() { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

The above code will print the following to the browser console:

Before
After
I did something //after 3s

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}

async function watchOverSomeoneDoingSomething() { const something = await promiseToDoSomething() return something + ’ and I watched’ }

async function watchOverSomeoneWatchingSomeoneDoingSomething() { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => { console.log(res) })

Shared Memory and Atomics

WebWorkers are used to create multithreaded programs in the browser.

They offer a messaging protocol via events. Since ES2017, you can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.

Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.

Any more detail on this can be found in the spec proposal, which has since been implemented.


More js tutorials: