Array searching

Working with an array often requires checking whether it contains a particular element or not. Another task might be to get the index of an element's position in the array. These problems could be solved by iterating over array elements with a loop, but that is where array searching methods come in handy. In this topic, we will look at them in more detail.

The includes() method

Let's start with the includes() method. It returns true if an array includes a certain value, otherwise it returns false. Take a look at this code example:

const array = ["Try", "to", "find", "me", "!"];

console.log(array.includes("find")); // true
console.log(array.includes(5)); // false

The method also accepts an optional argument that specifies an index from which to start searching the array:

console.log(array.includes("me", 2)); // true
console.log(array.includes("me", 4)); // false

If the second argument is negative, then its value is added to the array length, and its sum is considered the index from which to start searching. If this sum is less than or equal to zero, then the whole array will be searched:

console.log(array.includes("me", -10)); // true
console.log(array.includes("me", -1)); // false

The find() method

Sometimes we need more flexibility when searching for an element, especially with objects. In this case, it is appropriate to use the find() method, which returns the first element it finds in the array, that satisfies the provided callback function. If no element meets the condition, undefined is returned.

Consider the following example:

const projects = [{name: "To-Do App", lang: "JS"}, {name: "Website", lang: "HTML"}];

console.log(projects.find(e => e.lang === "JS")); // {name: "To-Do App", lang: "JS"}
console.log(projects.find(e => e.lang === "CSS")); // undefined

The findIndex() method

The findIndex() method is similar to the previous one: it also accepts a callback function, but instead it returns the index of the first element in the array that satisfies it. Otherwise, it returns -1. Let's look at the example with the same array:

console.log(projects.findIndex(e => e.lang === "HTML")); // 1
console.log(projects.findIndex(e => e.lang === "C")); // -1

The indexOf() method

The indexOf() method returns the first index of an element that equals a certain value. If the element does not exist in the array, the method returns -1. The following code demonstrates how to use the method:

const languages = ["HTML", "CSS", "JS", "Python", "JS"];

console.log(languages.indexOf("JS")); // 2
console.log(languages.indexOf("English")); // -1

As well as the includes() method, indexOf() accepts an optional argument that specifies the index from which to start searching the array:

console.log(languages.indexOf("JS", 3)); // 4
console.log(languages.indexOf("CSS", 2)); // -1

The lastIndexOf() method

There is a similar lastIndexOf() method, that searches the array in the opposite direction. It returns the last index of an element, that matches a particular value, as shown below:

console.log(languages.lastIndexOf("JS")); // 4
console.log(languages.lastIndexOf("JS", 3)); // 2
console.log(languages.lastIndexOf("JS", 1)); // -1

As you can see in the example above, this method also accepts the same optional argument and returns -1 if the element is not found.

Conclusion

To sum up, you have learned about various array searching methods in this topic:

• includes() checks if an array contains a certain element and returns a boolean value.
• find() returns the value of the first element it finds that satisfies a callback function, otherwise undefined is returned.
• findIndex() is similar to the find() method, but instead it returns the index of the element, or -1 if it doesn't exist.
• indexOf() returns the first index of the element it finds that matches a certain value, or -1 if it is not present.
• lastIndexOf() is similar to the indexOf() method, but it searches the array backward and returns the last index of the element instead.