Learn ES7 features | Es2016 javascript tutorials

In this blog post, I will cover Es7 features tutorials with examples.

ECMAScript 2016 or ES2016 or Es7 introduction

In my previous posts, Posted lot articles on Es6/Es2015 features. Javascript is a popular scripting language for building software applications. ES7 is also called as ECMAScript 2016 or ES2016. Every release to javascript introduced many features. Previous version - ES6(ECMAScript 2015) released lot features including language and API changes. Es7 or ECMAScript 2016 is minor release which contains only two features

• Array.prototype.includes
• Exponentiation Operator

Array.prototype.includes() method 

Es7 introduced includes in the array object. includes() method check an element/object exists in an array of elements/objects.

if exists, returns true, else returns false.

includes() method is an replacement of indexOf() method of prior to es7 code.

Syntax

Array.prototype.includes(element) :boolean

Parameters are an element - Element to search in an array Return value - returns the Boolean value true -element contains in Array Includes checks element using the sameValueZero algorithm to find an element Includes checks element using the sameValueZero algorithm to find an element

var numericArray = [9, 21, 5];
console.log(numericArray.includes(21)); // outputs true
console.log(numericArray.includes(2)); // outputs false

Includes method is a like of indexOf() method of ES6 or prior versions. ES6 or Es5 - checking element in an array using index() method Prior to Es6 versions of javascript, We used indexOf() method to search element The same above code can be rewritten as follows

var numericArray = [9, 21, 5];
console.log(numericArray.indexOf(21)>=0); // outputs true
console.log(numericArray.indexOf(2)>=0); // outputs false

indexOf() method used to check the element in an array. It returns the position of a matched element in the array or -1 if element not found. The developer has to write a code to check position to return a boolean value

arr.includes(x)
arr.indexOf(x) >= 0

Both methods treat +0 and -0 is the same

console.log([-0].includes(+0)) // === true)
console.log([+0].includes(-0)) // === true)
console.log([-0].indexOf(+0)>=0) // === true)
console.log([+0].indexOf(-0)>=0) // === true)

Difference between Array.prototype.includes and Array.prototype.IndexOf method. 

Both have the same purpose for finding an element in an array. includes method checks undefined and NaN elements, Index method does not NaN is at a global object and its value is Not-a-Number. NaN and Undefined are valid values in javascript

Includes and IndexOf

Returns Boolean value - true of false

Return numeric value >=0 or -1

Handles NaN values correctly. it will be very useful for comparing NaN values

console.log([NaN].includes(NaN))// outputs true

Inconsistency in Nan Value handling

console.log([NaN].indexOf(NaN)) // outputs false

Undefined value checks return true and comparison works as expected

console.log( [, , ].includes(undefined)>=0) // === true)

Undefined checks retruns false

console.log( [, , , ,].indexOf(undefined)>=0) // === true)

Includes() makes the developer life easy for dealing with element comparison in array data structure.

Exponentiation Operator

 the name itself says it is an operator dealing with mathematical operations. The exponential operation multiplies the number by exponent times 4 exponential 2 or 4 power 2 is 4* 4=16.  In Es6 and prior versions, To do exponential operations, You have to use the Math.pow method.

 Es6 and Prior Version Exponentiona operator example

console.log(Math.pow(3,4)) // 81 console.log( Math.pow(5,2)) // 25

Infix  Operator Example

With Es7/Es2016, New operator introduced to handle exponential operator Infix operator ** is used for exponential The same syntax can be rewritten using new es7 syntax

console.log(3**4)) // 81
console.log( 5**2)) // 25

Exponential operator assignment example 

This can be also used as assignment expressions. Below is a code for usage of an assignment expression.

let value = 2
value **= 5
console.log(value === Math.pow(2,5)) // true