JavaScript Arrays findIndex


The findIndex() method returns the index of the first element in an array that passes a test (provided as a function). The findIndex() method executes the function once for each element present in the array:

  • If it finds an array element where the function returns a true value, findIndex() returns the index of that array element (and does not check the remaining values). You can see that explicitly in the second example in the console at the bottom of this post. Notice the two blue values shown: false true. Have a look at the line that produces that output: line 24.
  • Otherwise it returns -1

findIndex() does not execute the function for array elements without values. findIndex() does not change the original array.

Array of Numbers

Here is some code from w3schools.com.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to check get the index of the first element in the array that has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p><strong>Note:</strong> The findIndex() method is not supported in IE 11 (and earlier versions).</p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
</script>
</body>
</html>

The output is 2. This is the array index of the number 18.

jsfindindex1

Deleting from an Array of Objects

Here is another example of the findIndex() Array method in JavaScript. In this example two main things have been changed from the first example above. First, we are using an array of objects. Second, we are deleting an object from the array. Third, we are sending the output to the browser console (view it by pressing F12 in Chrome).

<!DOCTYPE html>
<html>
<body>
<script>
// DELETE from an array
// findindex() method
// output is sent to the browser console
//
// This code demonstrates an array of objects that
// needs to be reduced in size by one object
// by removing an object according to
// one of its property values.
var fruits = [
  { name: "apple", value: 7 },
  { name: "banana", value: 3 },
  { name: "cherry", value: 9 }
];
// provided by user
var itemName = 'banana';
fruits.forEach(function(item, index){
    console.log(index + ' => '+ item.name);
})
function checkObject(item) {
    console.log(item.name === itemName);
    return item.name === itemName;
}
foundIndex = fruits.findIndex(checkObject);
console.log("index is " + foundIndex);
console.log("fruits length is " + fruits.length);
if (foundIndex != -1) {  // if not not found then
    fruits.splice(foundIndex,1);
    console.log("new fruits length after removing " + itemName + " with splice() method is " + fruits.length);
}
console.log("Items are:");
fruits.forEach(function(item, index){
    console.log(index + ' => '+ item.name);
})
</script>
</body>
</html>

Here is what the console looks like in the Google Chrome browser. To prove it to yourself all you need to do is create a file with the extension html and copy the code above into it and then run that file in the browser and open the broswer’s console.

To learn more you can edit the file’s contents, save it, go back to the browser and press F5 to refresh it and observe the changes to the console output.

jsarrayfindindexsplice

Leave a comment

Your email address will not be published. Required fields are marked *