The new JavaScript standard ECMAScript 2016 is now officially approved!

Every year each new proposal to ECMAScript which reaches Stage 4 will be added to the standard.
Stage 4 basically means, that the specification text is written down and has at least two major implementations (or browsers in this case).

In the new standard, two new features have been added.

Array.prototype.includes
The Exponentiation Operator

Let's take a look at those two features.

Array.prototype.includes

Array.prototype.includes is a convenience method for Array, if you want to know if a certain value is in an Array you can now use it in favor of Array.prototype.indexOf. One main difference to Array.prototype.indexOf is, Array.prototype.includes can find the value NaN and Array.prototype.indexOf does not. The includes method has also been added to all TypedArray objects.

Examples:

> [ 1, 2, 3, 4].includes(3)
true  
> [ 1, 2, 3, 4].includes(0)
false

This makes constructs like the following a bit more readable:

if (myArray.indexOf(5) > -1) {  
  // has 5
}
// or
if (myArray.indexOf(5) !== -1) {  
  // has 5
}

versus:

if (myArray.includes(5)) {  
  // has 5
}

Example of difference between indexOf and includes with NaN:

> [ NaN ].indexOf(NaN)
-1
> [ NaN ].includes(NaN)
true

The Exponentiation Operator

Exponentiation is commonly used in mathematics and physics and can now be expressed with the operator ** in ECMAScript 2016. Very similar to Pythons **.

So instead of

Math.pow(3, 4)

we can now write

3 ** 4

Additionally we can use the assignment form too, similar to += for numbers or strings.

> let n = 3
> n **= 4
> n
81

The ** operator has higher precedence than * which means:

> 2 * 2 ** 3
16  
> 2 * (2 ** 3)
16  
> (2 * 2) ** 3
64

Currently, negative number literals cannot be the base of the exponentiation and will throw a syntax error.

> -5 ** 2
Uncaught SyntaxError: Unexpected token **

A look into the future

With ECMAScript 2016 finalized, there has already been progress on ECMAScript 2017 and several futures have already been finalized:

Object.values/Object.entries
String padding
Object.getOwnPropertyDescriptors

Object.values/Object.entries

Two new functions have been added to Object both will aid you in iterating over object properties.

Similar to Object.keys which gives you own enumerable keys, Object.values will give you own enumerable object values.
Example:

> Object.values({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ 'a', 'b', 'c' ]

Easy object value iteration:

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }  
for (let value of Object.values(obj)) {  
  console.log(value)
}
// logs 'a', 'b' and 'c'

Object.entries gives you an Array of key/value pairs.

> Object.entries({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ [ 'keyA', 'a' ], [ 'keyB', 'b' ], [ 'keyC', 'c' ] ]

This may look rather weird but makes it very easy to iterate over an object with key and value using destructuring like this:

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }  
for (let [ key, value ] of Object.entries(obj)) {  
  console.log(key, value)
}
// logs 'keyA a', 'keyB b' and 'keyC c'

String padding

A very common problem is string padding, especially in command line interfaces and number formating. ECMAScript 2017 will provide two new String methods to help you.

String.prototype.padStart
String.prototype.padEnd

The methods are called padStart and padEnd because it will recognize left-to-right and right-to-left languages and pad the string accordingly.

> '1'.padStart(5)
"    1"
> '1'.padStart(5, '0')
"00005"
> '1'.padEnd(5)
"1    "
> '1'.padEnd(5, '0')
"50000"

Object.getOwnPropertyDescriptors

Object.getOwnPropertyDescriptors will get all property descriptors of an object, very similar to Object.getOwnPropertyDescriptor which gets a single property descriptor. This means, we can get all property definitions of an object and can copy these over to another object (you wouldn't be able to "get" a getter or setter property using the dot or bracket notation).

Example of making a shallow copy of an object:

let objectCopy = Object.create(  
  Object.getPrototypeOf(object),
  Object.getOwnPropertyDescriptors(object)
)

That's it for now, I hope you are as excited as me about all the new ECMAScript features which make the language better and more powerful every year! :)

Latest blog post

Find me on