ES7 & ES8

An introduction to the small features that both ES7 & ES8 brings. If contributing please read the contributions section and check back from time to time for intermittent updates.

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"]

Array.prototype.includes

This one is a bit like indexOf and very useful to the language by relying on returinng true or false, not 0.

Syntax:

• arr.inlcudes(searchEl[, fromIndex])
• @searchElement: the element to search for
• @fromIndex: pos in array at which to begin searching
• returns: Boolean

Examples:

basic examples

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false

if fromIndex is greater than or equal to the len of array, false is automatically returned

let arr = ['x', 'y', 'z'];

arr.includes('x', 3)    // false
arr.includes('z', 100)  // false

String.prototype.padStart()

This method, padStart() pads the current string (applied from the left) with another string till the resulting string reaches the given optional length.

Syntax:

• str.padStart(targetLength [, padString])
• @targetLength: the length of resulting string once padding occurs
• @padString(Optional): the string to pad the current string with
• returns: String

Examples:

basic examples

'xyz'.padStart(5)                 // "  xyz"
'xyz'.padStart(10)                // "       xyz"
'xyz'.padStart(6, 'hij')          // "hijxyz"
'xyz'.padStart(8, '1')            // "11111xyz"

const myStr = 'xyz'.padStart(22)  // "                   xyz"
myStr.length                      // 22

String.prototype.padEnd()

This method, padEnd() pads the current string (applied from the right) with another string till the resulting string reaches the given optional length.

Syntax:

• str.padEnd(targetLength [, padString])
• @targetLength: the length of resulting string once padding occurs
• @padString(Optional): the string to pad the current string with
• returns: String

Examples:

basic examples

'abc'.padEnd(10)           // "abc       "
'abc'.padEnd(10, "foo")    // "abcfoofoof"
'abc'.padEnd(6, "123456")  // "abc123"
'abc'.padEnd(1)            // "abc"

Exponentiation

A shorthand method to exponetiation has been introduced in JavaScript:

Syntax:

• operand ** operand

basic examples

Math.pow(5, 2)

// ...is now
5 ** 2

Trailing Commas

Trailing commas are now allowed in JavaScript - they are now ignored

trailing commas in array

let arr = [
  10,
  20,
  30,
  40,
  50,  
]

arr // [10, 20, 30, 40,  50]
arr.length // 5 

trailing commas in object

const obj = {
  trailing: 'comma',
  is: 'allowed',
  in: 'JavaScript..', 
}

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)

/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
  property1: {value: "foo", writable: true, enumerable: true, configurable: true}
  property2: {value: "bar", writable: true, enumerable: true, configurable: true}
  property3: {value: 42, writable: true, enumerable: true, configurable: true}
  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
  __proto__: Object
*/

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

Contributions

Contributions in the form of code samples and syntax are welcome - if you spot errors in example code or feel you have a better use case for a given feature please issue a pull request. Typos and formatting requests are also considered.