JavaScript

Methods to Search through Arrays in JavaScript

JavaScript offers numerous searching methods that are used to search an element in the array. The most commonly used searching methods include the filter() method, includes() method, find() method and indexOf() method. Each method has its own properties and performs different functionalities. Anyone can use these methods according to his needs.

Implementation of filter() method in JavaScript

The filter() function filters the data depending upon some specific condition and returns a new array of only those elements that satisfy the applied condition.

Suppose we have an array of ten elements and we want only those values that are divisible by 2:

const Original_Array = [12, 25, 33, 20, 75, 2, 16, 77, 87, 100];

const Filtered_Elements = Original_Array.filter(element => element%2 ==0);

console.log("Array of elements divisible by 2 :", Filtered_Elements);

In this example, we pass a condition to the filter function that checks whether the element’s remainder is equal to zero or not:

If the remainder is equal to zero then the filter method will pick that element and put it into the filtered array. As a result, we will get a resultant array of elements that are divisible by 2:

In the output, we can observe that the resultant array is reduced to 5 elements since there are only 5 elements that are divisible by 2.

Implementation of includes() method in JavaScript

JavaScript offers another well-known searching method named “includes()” that takes a parameter and compares it with all the array elements consequently and if it finds the targeted value then it returns true else false. In addition to this, we can also pass another parameter to the “includes()” method that specifies from which index to start the comparison.

Suppose we want to search a value ‘75’ in the array:

const originalArray = [12, 25, 33, 20, 75, 2, 16, 77, 87, 100];

const searchedElement = originalArray.includes(75);

console.log("The searched element found in the array : ", searchedElement);

In this example, we passed only one parameter to the “includes()” method:

The includes() function searched for ‘75’ and it found ‘75’ at index 4, so the output will be “true” as shown below:

Now let’s assume an example where we searched for the element that is present in the array. However, we restrict the includes() function to start comparison from the index 3:

const originalArray = [12, 25, 33, 20, 75, 2, 16, 77, 87, 100];

const searchedElement = originalArray.includes(25, 3);

console.log("The searched element found in the array : ", searchedElement);

So in this example, the “includes()” function starts comparing ‘25’ with other values from index 3:

Although 25 is present in the array still the output will return false because we restrict the includes() function to start searching from index 3 and 25 was present at index 1:

Implementation of find() method in JavaScript

The find() method is used in JavaScript to find an element in an array, it takes a parameter and compares it with other elements of the array. If the compared value is found in the array then it returns that value and if the compared condition satisfies more than once then it will return only the first value. This find() function will return “undefined” when the compared value isn’t found in the array.

The below given example will help to understand how the find method works in JavaScript:

const originalArray = [12, 25, 33, 20, 75, 2, 16, 77, 87, 100];

const searchedElement = originalArray.find(element => element < 75);

console.log("Element less than 75 : ", searchedElement);

Now in this example, we searched for the elements that are less than 75.

Although we searched for all those elements that are less than 75 and we can note that there are many numbers that are less than 75, the find() function doesn’t return the whole list of those elements, instead it will return only the first element.

Implementation of indexOf() method in JavaScript

In JavaScript “indexOf()” function search an element in the array and returns the index of the searched element if found and if the searched element appears more than once then it returns the initial index of that element while if the searched value doesn’t found anywhere in the array then it will return -1:

The below-given example will be beneficial to understand the concept of “IndexOf()” function:

const originalArray = [12, 25, 33, 20, 75, 2, 16, 75, 87, 100];

const searchedElement = originalArray.indexOf(75);

console.log("The searched element found at index : ", searchedElement);

In the above example, we searched for ‘75’ which appears twice in the array:

The output will only return the first index of ‘75’.

Conclusion


This article provides a detailed overview of searching methods in JavaScript. We discuss four search methods: find(), filter(), includes() and indexOf(). All these searching methods perform different functions: for example find() returns a value, includes() returns a boolean value, filter() returns a filtered list and indexOf() returns the first index of searched elements. This article helps the users to choose any of these methods according to their needs.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.