Lester Lambac

JavaScript Array .findIndex() and .findLastIndex() methods

These two array methods called .findIndex() and .findLastIndex() methods are just opposite functionality of each other, let's put this in one tutorial. Let's begin with .findIndex() method.

Array .findIndex() Method

The array .findIndex() method iterates the array from the starting index (index 0) and returns the index of the array item that matches a provided condition or test function.

Array .findIndex() Method Syntax

This is the syntax of array .findIndex() method. It accepts two params, the first is a callback function and a thisArgs.


  array.findIndex((item, index, arrayCopy) => {
    // your condition goes here and make sure to return it
  }, thisArgs)

Array .findIndex() Method Parameters and Return Value

Callback Function The fist parameter is a callback function which then contains three parameters:
  • item ⇢ The current iterated item in the array.
  • index ⇢ The current index of the current item.
  • arrayCopy ⇢ The copy of the reference array that you can use within the callback function.
thisArg optionalThe second param refers to the value of this when it is used or called inside the callback function. It only works if you are using the function keyword, using arrow function won't make it work.

The return value of .findIndex() is the index of the first item found. If it doesn't find anything based on the given condition or test, it will return -1.

Array .findIndex() Method Example

To be consistent on our examples, let's reuse the one on our .find() and .findLast() methods examples.

Say we have an array of objects called fruits and each object has name, emoji, price and available.

In this case, we want to get the index of the name "Pineapple" among the array of fruits. Looking at it, we can say right away that it's in index 1. However, to programatically do that, we can use the findIndex() method this way: 

  
    const fruits = [
      { name: "Watermelon", emoji: "🍉", price: 2, available: true },
      { name: "Pineapple", emoji: "🍍", price: 7, available: true },
      { name: "Banana", emoji: "🍌", price: 5, available: true },
    ]

    const pineapple = fruits.findIndex(( fruit ) => {
      return fruit.name === "Pineapple";
    });

    console.log(pineapple);

    // output would be:
    // 1

Array .findLastIndex() Method

The array .findLastIndex() method starts the iteration process in last item of the array then returns the first item from the last that matches a given condition or test. We'd like to simply think that way but what actually happens is JavaScript reverses the array and starts the iteration.

Array .findLastIndex() Method Example

Let's use the same example above to actually see their difference. So, in this example we have two objects with both have names of "Pineapple". Using the finaLastIndex() method, it will run the process starting from the last item of the array.

  
    const fruits = [
      { name: "Watermelon", emoji: "🍉", price: 2, available: true },
      { name: "Pineapple", emoji: "🍍", price: 7, available: true },
      { name: "Banana", emoji: "🍌", price: 5, available: true },
      { name: "Pineapple", emoji: "🍍", price: 100, available: false },
    ]

    const pineapple = fruits.findLastIndex(( fruit ) => {
      return fruit.name === "Pineapple";
    });

    console.log(pineapple);

    // output would be:
    // 3

On this example, the output is the last "Pineapple" index which is 3.

Watch: Array .findIndex() and .findLastIndex() Methods Tutorial

For a more clearer examples and details about Javascript array findIndex() and findLastIndex() methods, check out this video on YouTube.