What are the differences between JavaScript's Array.indexOf() and Array.includes() methods?
Rashid D
JavaScript'sArray.indexOf() andArray.includes() are both array methods used to search for a specific element within an array, but they have some differences in their functionality. Here are the differences between the two methods:
1. Return Value:
-Array.indexOf(): Returns the index of the first occurrence of the element in the array. If the element is not found, it returns -1.
-Array.includes(): Returns a boolean value indicating whether the element is present in the array or not.
2. Usage:
-Array.indexOf(): Typically used when you need to find the index of an element in the array or determine if it exists in the array.
-Array.includes(): Used to check if an element exists in the array, without needing its index.
3. Strict Equality:
-Array.indexOf(): Uses strict equality (===) to compare the elements. It requires the searched element to have the same type and value as the one being searched for.
-Array.includes(): Also uses strict equality (===) to compare the elements. It checks if the element exists in the array, regardless of its position or type.
4. Searching Arrays of Objects:
-Array.indexOf(): When searching for objects in an array,Array.indexOf() won't work as expected, as it performs a reference comparison. It will only match if the exact object instance is found in the array.
-Array.includes(): When searching for objects in an array,Array.includes() works as expected. It checks if any object in the array has the same reference or value.
5. Available in:
-Array.indexOf(): Available in all modern JavaScript environments, including older browsers.
-Array.includes(): Introduced in ECMAScript 2016 (ES7) and may not be available in older browsers or environments without polyfills.
Here are some examples that demonstrate the differences:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const numbers = [1, 2, 3, 4, 5];
const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
console.log(numbers.indexOf(3)); // Output: 2 (index of 3)
console.log(numbers.includes(3)); // Output: true (3 exists in the array)
console.log(numbers.indexOf(6)); // Output: -1 (6 does not exist in the array)
console.log(numbers.includes(6)); // Output: false (6 does not exist in the array)
console.log(objects.indexOf({ id: 2 })); // Output: -1 (reference comparison)
console.log(objects.includes({ id: 2 })); // Output: false (reference comparison)
console.log(objects.find(obj => obj.id === 2)); // Output: { id: 2 } (using Array.find)
In the examples above,Array.indexOf() returns the index of the element if found, or -1 if not found. On the other hand,Array.includes() directly returns a boolean value indicating whether the element exists in the array or not.
Remember to consider the differences mentioned above and choose the method that suits your specific use case.
