What are the Differences Between JavaScript Array includes() and indexOf() Methods?

Array.prototype.includes() and Array.prototype.indexOf() methods have the following differences:

	includes()	indexOf()
Primary Use:	Check if array includes given element.	Get the position of the first match (of given element) in the array.
Return Type:	Boolean (true if match found, false otherwise).	Number (matching index if match found, or -1 otherwise).
Handling of Special Cases:	The following return true: [NaN].includes(NaN); [ , , ].includes(undefined);	The following return -1: [NaN].indexOf(NaN); [ , , ].indexOf(undefined);
Browser Compatibility:	ES7+	ES5+

Primary Use

Array.prototype.includes():

Array.prototype.includes() was created for the specific purpose of checking if the array includes the given element among its entries or not.

Array.prototype.indexOf():

Although Array.prototype.indexOf() is commonly used to determine if an array includes an element, its primary use is to actually get the index of the first match in an array.

Return Type

Array.prototype.includes():

It returns boolean true or false depending on whether an element was found in the array or not. For example:

['foo', 'bar'].includes('bar'); // true
['foobar'].includes('bar'); // false

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false

Array.prototype.indexOf():

It returns the first index at which a given element is found in the array, or -1 otherwise. For example:

['foo', 'bar'].indexOf('bar'); // 1
['foobar'].indexOf('bar'); // -1

[1, 2, 3].indexOf(2); // 1
[1, 2, 3].indexOf(4); // -1

Handling of Special Cases

Technically speaking, Array.prototype.includes() uses the SameValueZero comparison algorithm, while Array.prototype.indexOf() uses the Strict Equality Comparison algorithm. Therefore, they both differ in the handling of some special cases as demonstrated in the following examples:

Handling of NaN:

[NaN].includes(NaN); // true
[NaN].indexOf(NaN) > -1; // false

Handling of Array With Empty Slots:

A JavaScript array can have empty slots if the array way created with a fixed length but no values (note that this is not the same as slots with actual undefined values). In such cases, indexOf() will skip the empty slots while includes() won't. For example:

const emptyArr1 = [ , , ];
const emptyArr2 = new Array(3);

emptyArr1.includes(undefined); // true
emptyArr1.indexOf(undefined) > -1; // false

emptyArr2.includes(undefined); // true
emptyArr2.indexOf(undefined) > -1; // false

In contrast to this, checking for undefined in an array with explicitly defined undefined values would yield the same result for both methods. For example:

[1, 2, undefined].includes(undefined); // true
[1, 2, undefined].indexOf(undefined) > -1; // true

Browser Compatibility

Array.prototype.includes():

1. Introduced in ES7;
2. Widely supported in modern browsers.

Array.prototype.indexOf():

1. Introduced in ES5;
2. Good compatibility with older browsers.