ES7 Javascript includes a method

ES7, also called ECMAScript2006 is the latest javascript language released in 2017.

es7 introduced one method to Array.prototype.includes, which includes a method in the array to check object or element exists in an array.

We already have the indexOf() method that checks the value that exists in an array and returns the position in an array if found, else returns -1.

It always returns an integer, not a Boolean value. so, have to add a validation check to make its truthy/falsy values.

  • includes syntax
array.includes(element[, fromIndex])

element is a value to check in the array fromIndex is optional starting from position to search and is useful for performance improvement.

It returns true if an element is found, or else not found.

  • Javascript array contains an element Using Es6 syntax

In ES6, using the indexOf() method always returns an integer or -1. The developer must write code to verify whether an integer value is greater than or less than -1. The functionality works, but the readability is poor.

Here is a code for javascript array contains example.

let ecmaScriptArray = ['es6', 'es7', 'es7']

// Valid
if (ecmaScriptArray.indexOf('es7') !== -1) {
  console.log('Found an element');
}
// invalid
if (ecmaScriptArray.indexOf('es71')) {
    console. log('Execution will not print this');
}
ecmaScriptArray.indexOf('es71') returns -1
ecmaScriptArray.indexOf('es7') returns 0

Javascript array includes method an example

This method is introduced in a native array and replaces the usage of the indexOf method.

This method returns a Boolean value that is used in a conditional expression. It avoids an extra step to check for the Boolean type.

let ecmaScriptArray = ['es6', 'es7', 'es7']
// Correct
if (ecmaScriptArray.includes('es7')) {
    console.log('Found an element');
}

Difference between Includes and IndexOf in javascript

The Includes method handles NAN( not a number) as expected compared with the indexOf method. Null is not allowed in both methods.

Here is an example for comparing indexes and includes a method

console.log(["one", "two", "three"].includes("one")); // true
console.log(["one", "two", "three"].includes("five")); // false
console.log([5, NaN, 4].includes(NaN)) //true
console.log([5, undefined, 4].includes(undefined)) // true
    //console.log([5, Null, 4].includes(Null)) // compilation error, null not allowed

console.log(["one", "two", "three"].indexOf("one")); // 0
console.log(["one", "two", "three"].indexOf("five")); //-1
console.log([5, undefined, 4].indexOf(undefined)) // 1
    //console.log([5, Null, 4].indexOf(Null)) // compilation error, null not allowed
console.log([5, NaN, 4].indexOf(NaN)) // -1

Points to remember

  • Both will behave the same for an array containing checking in javascript and work as expected
  • If the array contains NaN values It returns true in case of includes as expected. IndexOf returns -1 which is not expected.
  • Checking Null or undefined contains in javascript returns as expected in case of the indexOf and Includes method