Array.prototype.includes vs. Array.prototype.indexOf

Beyond the improved readability, is there any advantage to includes over indexOf? They seem identical to me.

What is the difference between this

var x = [1,2,3].indexOf(1) > -1; //true

And this?

var y = [1,2,3].includes(1); //true

tl;dr: NaN is treated differently:

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

---

From the proposal:

> ### Motivation

> When using ECMAScript arrays, it is commonly desired to determine if the array includes an element. The prevailing pattern for this is > if (arr.indexOf(el) !== -1) { ... }

> with various other possibilities, e.g. arr.indexOf(el) >= 0, or even ~arr.indexOf(el).

> These patterns exhibit two problems: >

• They fail to "say what you mean": instead of asking about whether the array includes an element, you ask what the index of the first occurrence of that element in the array is, and then compare it or bit-twiddle it, to determine the answer to your actual question.
• They fail for NaN, as indexOf uses Strict Equality Comparison and thus [NaN].indexOf(NaN) === -1.

> ### Proposed Solution

> We propose the addition of an Array.prototype.includes method, such that the above patterns can be rewritten as > if (arr.includes(el)) { ... }

> This has almost the same semantics as the above, except that it uses the SameValueZero comparison algorithm instead of Strict Equality Comparison, thus making [NaN].includes(NaN) true.

> Thus, this proposal solves both problems seen in existing code.

> We additionally add a fromIndex parameter, similar to Array.prototype.indexOf and String.prototype.includes, for consistency.

---

Further information:

• SameValueZero algorithm

• Strict Equality Comparison algorithm

Technically

NaN will not be findable when using indexOf

[NaN].indexOf(NaN) // => -1 (not found)
[NaN].includes(NaN) // => true

includes also is of no use if you want to know at where index the element was found.

Readability

arr.indexOf('blah') !== -1 is less more readable and maintainable. On the other hand, arr.includes('blah') does what it says and it is obvious that it returns a boolean.

Performances

According to this article on the subject there are no noticeable difference although includes may be a very little bit slower.

History

indexOf was created way before includes.

.indexOf() and .includes() methods can be used to search for an element in an array or to search for a character/substring in a given string.

Usage in Array

(Link to ECMAScript Specification)

1. indexOf uses Strict Equality Comparison whereas includes uses the SameValueZero algorithm. Because of this reason, the following two points of differences arise.

2. As pointed out by Felix Kling, the behavior is different in case of NaN.

let arr = [NaN];

arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true

3. The behavior is also different in case of undefined.

let arr = [ , , ];

arr.indexOf(undefined); // returns -1; meaning undefined is not present
arr.includes(undefined); // returns true

Usage in String

(Link to ECMAScript Specification)

If you pass a RegExp to indexOf, it will treat the RegExp as a string and will return the index of the string, if found. However, if you pass a RegExp to includes, it will throw an exception.

let str = "javascript";

str.indexOf(/\w/); // returns -1 even though the elements match the regex because /\w/ is treated as string
str.includes(/\w/); // throws TypeError: First argument to String.prototype.includes must not be a regular expression

Performance

As GLAND_PROPRE pointed out, includes may be a little (very tiny) bit slower (for it needs to check for a regex as the first argument) than indexOf but in reality, this doesn't make much difference and is negligible.

History

String.prototype.includes() was introduced in ECMAScript 2015 whereas Array.prototype.includes() was introduced in ECMAScript 2016. With regards to browser support, use them wisely.

String.prototype.indexOf() and Array.prototype.indexOf() are present in ES5 edition of ECMAScript and hence supported by all browsers.

Conceptually you should use indexOf when you want to use the position indexOf just give you to extract the value or operate over the array, i.e using slice, shift or split after you got the position of the element. On the other hand, Use Array.includes only to know if the value is inside the array and not the position because you don't care about it.

indexOf() and includes() can both be used to find elements in an array, however each function yields different return values.

indexOf returns a number (-1 if element not present in the array, or array position if the element is present).

includes() returns a boolean value (true or false).

Internet explorer does not support includes, if that helps you decide.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Browser_compatibility

The answers and examples were all great. However (at first glance), it made me misunderstood that includes will always return true when using undefined.

Hence I am including the example to elaborate includes can be used to check for undefined and NaN values wherelse indexOf can't

//Array without undefined values and without NaN values. 
//includes will return false because there are no NaN and undefined values

const myarray = [1,2,3,4]

console.log(myarray.includes(undefined)) //returns false
console.log(myarray.includes(NaN)) //returns false


//Array with undefined values and Nan values.
//includes will find them and return true

const myarray2 = [1,NaN, ,4]

console.log(myarray2.includes(undefined)) //returns true
console.log(myarray2.includes(NaN)) //returns true


console.log(myarray2.indexOf(undefined) > -1) //returns false
console.log(myarray2.indexOf(NaN) > -1) //returns false

Summary

• includes can be used to check for undefined and NaN values in array
• indexOf cannot be used to check for undefined and NaN values in array

indexOf is the older way to check if something is in the array , the new method is better because you don't have to write a condition for being (-1) , so that's why for use the include() method that returns you a boolean.

array.indexOf('something')      // return index or -1
array.includes('something')     // return true of false

so for finding index the first one is better but for checking being or not the second method is more useful.

includes is using automatic type conversion i.e. between string and number. indexOf doesn't.

 
let allGroceries = ['tomato', 'baked bean',];
 
//returns true or false
console.log(allGroceries.includes("tomato")); //uses boolean value to check 

let fruits2 = ["apple", "banana", "orange"];
console.log(fruits2.includes("banana"));
// returns true because banana is in the array



//.indexOf returns the index of the value

console.log(allGroceries.indexOf("tomato"));//returns the index of the value
//returns -1 because tomato is not in the array
//fromIndex
console.log(allGroceries.indexOf("tomato", 2));

The includes() method is slightly different than the indexOf() method in one important way. indexOf() tests equality using the same algorithm that the === operator does, and that equality algorithm considers the not-a-number value to be different from every other value, including itself. includes() uses a slightly different version of equality that does consider NaN to be equal to itself. This means that indexOf() will not detect the NaN value in an array, but includes() will:

let a = [1,true,3,NaN];
a.includes(NaN) // => true
a.indexOf(NaN) // => -1; indexOf can't find NaN

From JavaScript: The Definitive Guide by David Flanagan