JavaScript - findIndex() method

revision:


Category : array

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

The findIndex() method executes a function for each array element and returns the index (position) of the first element that passes a test. The method returns -1 if no match is found. It does not execute the function for empty array elements and does not change the original array.

Syntax :

        array.findIndex(callbackFn)
        array.findIndex(callbackFn, thisArg)
        array.findIndex(function(currentValue, index, arr), thisValue)
    

Parameters:

callbackFn, function : required; a function to execute for each element in the array. It should return a truthy value to indicate a matching element has been found, and a falsy value otherwise. The function is called with the following arguments:

element, currentValue : the (value of the) current element being processed in the array.
index : optional; the index of the current element being processed in the array.
array : optional; the array "findIndex()" was called upon.

thisArg, thisValue : optional. A value to use as "this" when executing callbackFn. Default "undefined".

Examples:

            const array1 = [5, 12, 8, 130, 44];
            const isLargeNumber = (element) => element > 13;
            console.log(array1.findIndex(isLargeNumber));
            // Expected output: 3
        

Practical examples

example: find the index of a prime number in an array.

code:
                    <div>
                        <p id="find-1"></p>
                        <p id="find-2"></p>
                        
                    </div>
                    <script>
                        function isPrime(element) {
                            if (element % 2 === 0 || element < 2) {
                                return false;
                        }
                        for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
                            if (element % factor === 0) {
                            return false;
                            }
                        }
                        return true;
                        }
                        console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found
                        console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)
                        document.getElementById("find-1").innerHTML = "is there a Prime in the array? " + [4, 6, 8, 9, 12].findIndex(isPrime);
                        document.getElementById("find-2").innerHTML = "is there a Prime in the array? " + [4, 6, 7, 9, 12].findIndex(isPrime);
                    </script>
                

example: find the first element with a value over 18.

code:
                    <div>
                        <p id="find-3"></p>
                        <p id="find-4"></p>
                    </div>
                    <script>
                        const ages = [3, 10, 18, 20];
                        document.getElementById("find-3").innerHTML = "original array : " + ages; 
                        document.getElementById("find-4").innerHTML = "index of first element with value over 18 : " + ages.findIndex(checkAge);
            
                        function checkAge(age) {
                        return age > 18;
                        }
                    </script>
                

example: find the first element with a value above an input value.

code:
                    <div>
                        <p><input type="number" id="toCheck" value="18"></p>
                        <button onclick="findFunction()">Test</button>
                    
                    <p id="find-5"></p>
                    <p id="find-6"></p>
                    </div>
                    <script>
                        const numbers = [4, 12, 16, 20];
                        function checkValue(x) {
                            return x > document.getElementById("toCheck").value;
                        }
                        function findFunction() {
                        document.getElementById("find-5").innerHTML = "value of first element  above this input: " + numbers.findIndex(checkValue);
                        }
                    
                    </script>