JavaScript Array Search

Searching an array answers questions like: is this value in the list? Where is it? Which student scored over 90? Some methods search for an exact value; others take a function that describes what you are looking for.

// Is It There? includes()

const tags = ["js", "css", "html"];

tags.includes("css")    // true
tags.includes("CSS")    // false  (case-sensitive)
tags.includes("php")    // false

// Where Is It? indexOf() and lastIndexOf()

const rolls = [3, 6, 2, 6, 1];

rolls.indexOf(6)       // 1   first match
rolls.lastIndexOf(6)   // 3   last match
rolls.indexOf(5)       // -1  not found

Where to start looking

indexOf and lastIndexOf accept a second argument: the index to start from. A negative start counts back from the end:

const fruits = ["Apple", "Orange", "Apple", "Mango"];

console.log(fruits.indexOf("Apple", 1));       // search from index 1 onward
console.log(fruits.indexOf("Apple", -2));      // search the last 2 only
console.log(fruits.lastIndexOf("Apple", 1));   // search backward from index 1

includes() can find NaN; indexOf() cannot

const data = [1, NaN, 3];

console.log(data.indexOf(NaN));
console.log(data.includes(NaN));

indexOf compares with ===, and NaN === NaN is false (JS Numbers). includes has a special rule for NaN.

// Searching by a Rule: find() and findIndex()

When you are looking for "the first item that matches a condition" rather than an exact value, pass a function. It is called for each element until it returns true:

const scores = [72, 88, 95, 61, 99];

scores.find(s => s > 90)        // 95  the first value over 90
scores.findIndex(s => s > 90)   // 2   its position
scores.find(s => s > 100)       // undefined  nothing matched
scores.findIndex(s => s > 100)  // -1

The test function gets three arguments

Like every array method that takes a function, find passes three things: the value, its index, and the whole array. You can also pass a named function instead of an arrow:

function isAdult(value, index, array) {
  return value >= 18;
}

const ages = [4, 9, 16, 25, 29];
console.log(ages.find(isAdult));
console.log(ages.findIndex(isAdult));

Notice find(isAdult), not find(isAdult()). You are handing over the function for find to call, not calling it yourself.

// Searching the Other Way: findLast()

scores.findLast(s => s > 90)        // 99  last value over 90
scores.findLastIndex(s => s > 90)   // 4

// Searching Arrays of Objects

This is where find really earns its place. indexOf and includes cannot look inside objects, but a function can:

const students = [
  { id: 101, name: "Ava", grade: 10 },
  { id: 102, name: "Ben", grade: 11 },
  { id: 103, name: "Cal", grade: 10 }
];

const ben = students.find(s => s.name === "Ben");
console.log(ben.id);

const pos = students.findIndex(s => s.id === 103);
console.log(pos);

// Why indexOf fails here: it compares object identity, not contents
students.indexOf({ id: 101, name: "Ava", grade: 10 })   // -1

// Does Any / Every Element Match? some() and every()

const ages = [16, 17, 19, 15];

ages.some(a => a >= 18)    // true   at least one adult
ages.every(a => a >= 18)   // false  not all adults
ages.every(a => a > 10)    // true

Both stop early: some at the first match, every at the first failure.

// Case-Insensitive Search

const names = ["Ada", "Grace", "Alan"];
const query = "grace";

names.find(n => n.toLowerCase() === query.toLowerCase())   // "Grace"

// Which Method When?

To get all matching items, not just the first, use filter (in Array Iterations).

// Quick Check

const v = [1, NaN, 3];
console.log(v.indexOf(NaN), v.includes(NaN));

// Try It

▶ Open Playground

1. Click Open Playground and run it. Then check for something that is not on the list
2. Find the first negative number in [4, 8, -2, 7, -9] and its position
3. From an array of book objects, find the book with a given title
4. Use every to check that all quiz answers in an array are filled in (not empty strings)