JavaScript Arrays
JavaScript
indexOfandincludestell you whether a value is in an array and where it sits.
indexOf gives a position, or -1 when the value is missing.
includes gives a simple true or false.
Example
javascript
const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.indexOf("Banana"));
console.log(fruits.includes("Cherry"));The output is 1 then false.
indexOf returns the first matching index, or -1 if there is no match.
includes returns true or false.
Both compare with strict equality, so types must match exactly.
Syntax
javascript
array.indexOf(value);
array.includes(value);Both take an optional second argument saying where to start.
Before includes existed, everyone compared against -1.
You will still see this pattern in older code.
Example
javascript
const list = ["a", "b"];
if (list.indexOf("c") === -1) {
console.log("not found");
}includes says the same thing far more clearly.
This searches from the end and returns the last match.
Example
javascript
const list = ["a", "b", "a"];
console.log(list.indexOf("a"));
console.log(list.lastIndexOf("a"));The first is 0 and the last is 2.
A string and a number are never equal here, even if they look alike.
Example
javascript
const list = [1, 2, 3];
console.log(list.includes(2));
console.log(list.includes("2"));The second is false, because the types differ.
Objects are compared by identity, not by their contents.
Two objects that look the same are still different objects.
Example
javascript
const a = { id: 1 };
const list = [a];
console.log(list.includes(a));
console.log(list.includes({ id: 1 }));Use find when you need to match on a property.
The second argument skips the beginning of the array.
Example
javascript
const list = ["a", "b", "a"];
console.log(list.indexOf("a", 1));Starting at index 1 finds the later match at index 2.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Search</title>
</head>
<body>
<h1>JavaScript Array Search</h1>
<p id="result"></p>
<script>
const fruits = ["Apple", "Banana", "Mango"];
document.getElementById("result").innerHTML =
"Banana at index " + fruits.indexOf("Banana") +
"<br>Has Cherry: " + fruits.includes("Cherry");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a missing value:
Search for a fruit that is not in the list and see the -1.
indexOf returns the first index, or -1 if not found.includes returns true or false.lastIndexOf searches from the end.Searching an array is usually a choice between a position and a yes-or-no answer.
includes is clearer whenever you only need to know if something is there.
For matching on a property, the find method is the right tool.