ES8 Features, TIME to update your JavaScript/ES7

See the ES2017 standard for full specification of the ECMAScript 2017 language.

ES2017 / ES8 features

ES2017 / ES8 includes the following new features:

• Async functions
• Object.entries
• Object.values
• Object.getOwnPropertyDescriptors
• Trailing commas

async function

The asynchronous function returns an AsyncFunction object and operates asynchronously via the event loop. The syntax is very similar to synchronous functions

Syntax:

• async function name([param[, param[, … param]]]) { statements }
• @name: the function name
• @param: param of the function
• statements: body of the function
• returns: Promise

const resolveAfter3Seconds = function() {
  console.log('starting 3 second promsise')
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(3)
      console.log('done in 3 seconds')  
    }, 3000)  
  })  
}

const resolveAfter1Second = function() {
  console.log('starting 1 second promise')
  return new Promise(resolve => {
      setTimeout(function() {
        resolve(1) 
        console.log('done, in 1 second') 
      }, 1000)
  })  
}

const sequentialStart = async function() {
  console.log('***SEQUENTIAL START***')
  const one = await resolveAfter1Second()
  const three = await resolveAfter3Seconds()

  console.log(one)
  console.log(three)
}

sequentialStart() // invoke async function

Object.entries()

Object.entries gives us the ability to get an object’s enurmerable property pairs by returning an array of any given object’s own eumberable properties. /ie: [key, value] pairs. Note that the order is the same as provided by the for...in loop.

Syntax:

• Object.entries(obj)
• @params: obj
• returns: Array

Examples:

basic example

const obj = { self: 'that', norf: 'quux' }
console.log(Object.entries(obj))

// => [ ['self', 'that'], ['norf', 'quux'] ]

array like object with random key ordering

const obj = { 50: 'a', 1: 'b', 5: 'c' }
console.log(Object.entries(obj)) 

// => [ ['1', 'b'], ['5', 'c'], ['50', 'a'] ]

Object.values()

Object.values lets us return an array of a given object’s own enumerable property values. Note that the order is the same as provided by the for...in loop.

Syntax:

• Object.values(obj)
• @params: obj
• returns: Array

Examples:

basic example

const obj = { a: 100, b: 200 }
console.log(Object.values(obj))

// => [100, 200]

mixed

const obj = { foo: 'foo', bar: [100, 200], baz: 55 }
console.log(Object.values(obj)) 

// => ['foo', [100, 200], 55 ]

string

const myStr = 'Lufthansa'
console.log(Object.values(myStr))

// => ["L", "u", "f", "t", "h", "a", "n", "s", "a"]

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() returns all own property descriptors of a given object. A property descriptor is a record with one of the following attributes:

• value
• writable
• get
• set
• configurable
• enumerable

let myObj = {
  property1: 'foo',
  property2: 'bar',
  property3: 42,
  property4: () => console.log('prop4')  
}

Object.getOwnPropertyDescriptors(myObj)

Trailing Commas

Trailing commas in function declarations and calls are now allowed in JavaScript. When splitting the list of arguments over several lines, this results in better VCS diffs as only one line will be modified when adding a new parameter (instead of two).

trailing commas in function declaration and call

function foo(
	bar,
	baz,
) {
	console.log(
		bar,
		baz,
	)
}

trailing commas in arguments

const func = (a,b,c,) => {
  // no error occurs
};

Author: Dietmar Aumann