Skip to content
Related Articles

Related Articles

Improve Article
Difference Between indexOf and findIndex function of array
  • Last Updated : 18 Jul, 2019

The task is differentiate between the indexOf() and findIndex() function of JavaScript. we’re going to discuss both approaches.

  • indexOf() function:
    This function is used to find the index of the first occurrence of the element provided for search as the argument to the function.

    Syntax:

    arr.indexOf(element[, index])
    

    Arguments:

    • element:
      This parameter specifies the element to be searched.
    • index:
      This parameter specifies the from which index search to be start.
  • findIndex() function:
    This function returns index of the first element of the given array which satisfies the testing function.



    Syntax:

    array.findIndex(fun(curValue, index, arr), thisValue)
    

    Arguments:

    • fun: This parameter specifies a function to be run for every element of the array.
    • curValue: This parameter specifies the value of the current element.
    • index: This parameter specifies the array index of the current element.
    • arr: This parameter specifies the array object with current element belongs to.
    • thisValue: This parameter specifies a value to be passed to the function to be used as its “this” value.
      If this is empty, the value “undefined” will be used.

Example 1: In this example, indexOf() function is used.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Difference Between indexOf and findIndex function of array.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks
        </h1>
    <p id="GFG_UP"
       style="font-size: 19px;
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN"
       style="color: green; 
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        var el_up = 
            document.getElementById("GFG_UP");
        var el_down = 
            document.getElementById("GFG_DOWN");
        var array = ["Geeks", "GFG", "geeks", "Geeks"];
        
        el_up.innerHTML = "ARRAY - [" + array + "]";
  
        function GFG_Fun() {
            el_down.innerHTML = 
              "First index of 'Geeks' is " + array.indexOf('Geeks');
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: In this example, findIndex() function is used.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Difference Between indexOf and findIndex function of array.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks
        </h1>
    <p id="GFG_UP" 
       style="font-size: 19px; 
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN"
       style="color: green; 
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        var el_up = 
            document.getElementById("GFG_UP");
        var el_down = 
            document.getElementById("GFG_DOWN");
        var array = [1, 3, 4, 5, 6, 7, 8, 9];
        
        el_up.innerHTML = "ARRAY - [" + array + "]";
  
        function getEven(n) {
            if (n % 2 == 0) {
                return 1;
            }
            return 0;
        }
  
        function GFG_Fun() {
            el_down.innerHTML = 
              "First even number in array is at index "
            + array.findIndex(getEven);
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :