DEV Community

John Samuel Obinna
John Samuel Obinna

Posted on

Includes() vs indexOf() in JavaScript

ES2016 Specifications included the includes() method for Array data structure. The includes() method check if an array includes a certain element, returning true or false as appropriate.
But in ES5 we are used to performing operations like this with indexOf() method.

Using includes() method.

const array = [1,2,3,4,5,6];

if(array.includes(4) ){
console.log("true 4 was found in the array")// true 4 was found in the array
} 

Let's perform the same operation with indexOf() method.

const array = [1,2,3,4,5,6];

if(array.indexOf(4) > -1 ){
console.log("true 4 was found in the array")// true 4 was found in the array
}

Using includes() method to check for NaN

 const  array = [NaN];

if (array.includes(NaN)){
console.log("true. NAN was found in the array");// true. NAN was found in the array
}

This is where things begin to fall apart with indexOf() method.

const  array = [NaN];
if (array.indexOf(NaN) == -1){
    console.log("NaN not found in the array");//NaN not found in the array
}

Checking for undefined with the includes() method.

const array = [, , , ,];

if(array.includes(undefined)){
console.log("true array elements are undefined");// true array elements are undefined
} 

Let's see how indexOf() method will handle this operation.

const array = [, , , ,];

if(!array.indexOf(undefined) == -1 ){
console.log("true. array elements are undefined");
}else {
console.log("Sorry can't find undefined");// Sorry can't find undefined
}

The includes() method does not distinguish between -0 and +0

const a = [-0].includes(+0);
console.log(a);//true

Typed Arrays will also have a method includes()

let array = Uint8Array.of(2,6,4);
console.log(array.includes(4));//true

Summary

Top comments (9)

Collapse
 
misterwhat profile image
Jonas Winzen

Nice article.
I have one correction for you.

The line:
if(array.indexOf(4) >= -1 )

Needs to be:
if(array.indexOf(4) > -1 )

In order to check, whether an element is in the array. Otherwise the condition would always be true.

Collapse
 
johnsamuelob profile image
John Samuel Obinna

Yeah. indexOf() always return -1 if element is not found. Thanks Jonas

Collapse
 
redeemefy profile image
redeemefy • Edited

I'm wondering about performance. Meaning if includes or indexOf keep searching the array even though already found the element. MDN docs doesn't say if includes breaks the search once finds an element.
developer.mozilla.org/en-US/docs/W...

Collapse
 
nikhilnanjappa profile image
Nikhil Nanjappa • Edited

You forgot to mention one of the main differences between includes() and indexOf().

IE does not support includes() whereas it supports the other.

Collapse
 
debo07 profile image
Debajit Majumder

I think IE11 started supporting Array.prototype.includes. Exact version that I'm using is 11.904.16299.0

Collapse
 
johnsamuelob profile image
John Samuel Obinna

Yeah. Very true.

Thanks

Collapse
 
ericmcwinner profile image
Eric McWinNEr

Uhm in all honesty isn't +0 exactly the same as -0? So is there any real life need to distinguish between +0 and -0?

Collapse
 
isramv profile image
Israel M

includes looks interesting, thank you for your post.

Collapse
 
johnsamuelob profile image
John Samuel Obinna

I'm glad this helped!