Array methods for searching elements

Today I’m going to look at the methods that make searching arrays much easier and without writing loops. What are the differences between these methods and what do they do exactly?

The methods I cover in this post are: Array.find(), Array.filter(), Array.findIndex(), Array.indexOf(), Array.includes().

Array.find()

You provide a testing function as an argument to this method. The testing function is called for each element in the array until the result is found. The function call should return a truthy value in order to pass the test. Finally, the value of the first element that satisfies the testing function is returned. If no element satisfies the testing function, then the undefined is returned.

Example with a simple array containing just numbers:

const myArray = [3, 13, 8, 9, 123, 21];

const foundValue1 = myArray.find((element) => element > 10);
console.log(foundValue1); // output: 13

const foundValue2 = myArray.find((element) => element > 200);
console.log(foundValue2); // output: undefined

Example with an array containing objects:

const users = [
  { id: 1, name: "Karolina" },
  { id: 2, name: "Alina" },
  { id: 3, name: "Jeremy" },
];

const foundUser1 = users.find((user) => user.id === 2);
console.log(foundUser1); // output: { id: 2, name: "Alina" }

const foundUser2 = users.find(({ id }) => id === 3);
console.log(foundUser2); // output: { id: 3, name: "Jeremy" }

Example with a separately defined function passed as an argument:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Michael" },
  { id: 3, name: "John" },
];

// function that will test each user in the users array
function isAlex(user) {
  return user.name === "Alex";
}

const foundUser = users.find(isAlex);
console.log(foundUser); // output: { id: 1, name: "Alex" }

If more than one value would pass the testing function, remember that only the first value is returned, the rest is ignored. If you would like to have them all, you can use another array method Array.filter(), which returns a new array with all the elements that pass the test.

You can read more about the Array.find() method in the MDN docs.

Array.filter()

The Array.filter() method returns a new array with all the values in an array that satisfies the testing function. If there is no match, the method returns an empty array [].

const users = [
  { id: 1, name: "Elena" },
  { id: 2, name: "Alina" },
  { id: 3, name: "Jeremy" },
  { id: 4, name: "Ola" },
];

const selectedUsers = users.filter((user) => user.id >= 3);
console.log(selectedUsers);
// output: [{"id":3,"name":"Jeremy"},{"id":4,"name":"Ola"}]

You can read more about the Array.filter() method in the MDN docs.

Array.findIndex()

This method is very similar to the Array.find() method. It also uses the testing function, but the difference is that it returns the index of the found element and not a value. If no element passes the testing function, it returns -1.

const myArray = [1, 7, 5, 18, 9, 128];

const foundValue1 = myArray.findIndex((elem) => elem > 10);
console.log(foundValue1); // output: 3 (4th element)

const foundValue2 = myArray.findIndex((elem) => elem > 200);
console.log(foundValue2); // output: -1

You can read more about the Array.findIndex() method in the MDN docs.

Array.indexOf()

This is quite a different method than the previous one and a much simpler one. It does not use a testing function to find the element. It uses the direct value that we want to find, and checks each element in the array for a strict equality with that value (triple-equals operator ===). Only the first index of the element is returned. If no element is found, it returns -1.

const languages = ["javascript", "html", "css", "php"];

console.log(languages.indexOf("css")); // output: 2 (3rd element)

console.log(languages.indexOf("java")); // output: -1

If you would like to start searching from the end of the array, you can use an Array.lastIndexOf() method.

You can read more about the Array.indexOf() method in the MDN docs.

Array.includes()

The Array.includes() method returns either a true, or a false if a value exists in an array or not. So it is just a simple check. It uses strict comparison. String "100" is not equal to number 100.

const ourArray = ["100", 85, true, "something"];

console.log(ourArray.includes(100)); // output: false

You can read more about the Array.includes() method in the MDN docs.

Summary

Depending on what you need, you can decide which method is best suited for your use case:

• find - to find the value of the first item that meets a specific condition.
• filter - to find all items in an array that meet a specific condition.
• findIndex - to find the index of the first item that meets a specific condition
• indexOf - to find the index of a particular item in an array.
• includes - to check if an array contains a particular value.