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

Solution 1:

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

Solution 2:

Technically

NaN will not be findable when using indexOf

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

indexOf also is of no use if you want to know where the string is in the array.

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.