How to search an array in JavaScript?

As you know an array is a list of elements which can be numbers, text etc. You may have the situations when you need to search an element in your array list. To do that, JavaScript provides different methods to search elements in an array list.

  1. indexOf() and lastIndexOf() methods.
  2. includes() method.
  3. find() method.
  4. filter() method.

indexOf() method and lastIndexOf() method

The indexOf() method and lastIndexOf() method is used to search a specific value in an array list. These methods return an index number of the value found. If the value is not found then -1 will be returned. The indexOf() method returns the index number of first element found whereas the lastIndexOf() method returns index number of the last element found.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Searching an array list</title>
</head>
<body>
<script>
var fruits=["Banana", "Orange", "Kiwi", "Mango", "Papaya", "Kiwi", "Orange"];
document.write(fruits.indexOf("Orange"));  // Results as index 1
document.write(fruits.indexOf("Mango"));   // Results as index 3
document.write(fruits.indexOf("Papaya"));  // Results as index 4
document.write(fruits.lastIndexOf("Kiwi"));// Results as index 5
document.write(fruits.lastIndexOf("Orange")); //Results as index 6
</script>   
</body>
</html>

In above code, we have used an array list namely fruits which has contained Orange and Kiwi at two indexes. The lastIndexOf() method will provide the index numbers of Orange and Kiwi found last.

The include() method in JavaScript

The include() method is used to find out whether the searched element is present in an array list or not. This method returns true or false. If the searched element is present in array, the result will be true otherwise the result will be false.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Searching an array list</title>
</head>
<body>
    <script>
        var fruits=["Banana", "Orange", "Kiwi", "Mango", "Papaya", "Kiwi", "Orange"];
        document.write(fruits.includes("Orange")+ "</br>");  
        document.write(fruits.includes("Grapes")+ "</br>");   
        document.write(fruits.includes("Papaya")+ "</br>");  
        document.write(fruits.includes("Pear")+ "</br>");
        document.write(fruits.includes("Orange")); 
    </script>  
</body>
</html>

It will results as:

true
false
true
false
true

find() method to search an array in JavaScript

If you want to search an array with some condition, you can do that by simply using find() method of JavaScript. This method returns only the first element in an array that satisfies the condition otherwise an undefined value will be returned.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Searching an array list</title>
</head>
<body>
    <script>
        var numbers=[2, 4, 1, 5, 9, 8, 6, 10];
        var result=numbers.find(function(element)
        {
            return element > 9; 
        });
        document.write(result);
    </script>  
</body>
</html>

Will result as 10

filter() method to search array in JavaScript

The find() method returns only first element when the condition satisfies. But, there may be situations where you want to find all the elements which satisfies your predefined condition. This can be achieved by using filter() method of JavaScript. Let us write a small code to search all the elements as per our condition.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Searching an array list</title>
</head>
<body>
    <h3>Filter method in JavaScript</h3>
    <script>
    var numbers=[2, 4, 1, 5, 9, 8, 6, 10, 15, 45, 3, 25, 22, 7];
    var result=numbers.filter(function(element)
    {
       return element > 9;
    });
    document.write(result);
    </script>  
</body>
</html>

It will result as :

Filter method in JavaScript

10,15,45,25,22