How to use the findIndex() method in JavaScript.

Simplified Array Searching with the findIndex() method

The findIndex() method is commonly used in JavaScript for array searching. When applied to an array, it returns the index of the first element that satisfies the condition specified in the provided callback function.

If no such element is found, it returns -1.

The syntax for the findIndex() looks like this:

findIndex(callbackFn,thisArg)

The callback function takes the following parameters:

• element : the current element being iterated

• index : the index of the current element being iterated

• array : this is the current array which the findIndex() was called upon.

thisArg is an optional parameter which specifies the value to be used as this when the callback function is being executed.

Let’s look at an example: suppose we have an array of numbers and want to find the first index for a number greater than 18.

 numbers = [16,15,12,23,34,24,19]

    const index = numbers.findIndex(function(number,index,array){
    
        return number>18

    })
 console.log(index) //output //3

In the code above, we apply the findIndex() to the numbers array, then return the index of the first element in the array that satisfies the condition number > 18. The result has been assigned to the variable called index.

The output will be 3, which represents the number 12. Since we are not using the index and array parameters, they can be omitted.

Let’s look at another example. Suppose we have this array of task objects. Each task has an id, name, and a boolean value representing whether the task has been completed or not.

const tasks = [
  { id: 1710514270317, name: "Grocery shopping", completed: false },
  { id: 1710514299305, name: "Wash dishes", completed: false },
  { id: 1710514316900, name: "Sort laundry", completed: false }
];

If we want to retrieve a task and update or delete it, we can use the findIndex() method to get the index of the task and either update or delete it.

Create a function called deleteTask(), which takes the id of the task as the parameter.

function deleteTask(id) {

}

Inside the function, we want to get the index of the task and remove it from the array.

function deleteTask(id) {
  const taskIdIndex = tasks.findIndex((task) => task.id === id);
  if (taskIdIndex !== -1) {
    tasks.splice(taskIdIndex, 1);
  }
}

Inside the deleteTask() function, we are comparing the task id passed as an argument and comparing it with the id of each task object. The result is then assigned to the variable taskIdIndex.

If taskIdIndex is not equal to -1, (a task with the specified id was found in the array). In this case, we call the splice() method on the tasks array. tasks.splice(taskIdIndex, 1) will remove one element starting at the specified index.

Now, let’s invoke the deleteTask() function and pass the id of one of the tasks, like this,

deleteTask(1710514270317);
console.log(tasks)

The output will be:

[
  {
    id: 1710514299305,
    name: "Wash dishes",
    completed: false
  },
  {
    id: 1710514316900,
    name: "Sort laundry",
    completed: false
  }
];

As you can see, the task with the name Grocery shopping has been deleted.

Conclusion

We have seen how to use the findIndex() method to find items in an array. The findIndex() method is useful when filtering data, implementing search functionalities, or managing array-based operations.

This tutorial is based on concepts i used when creating this to-do application. You can find the full tutorial on dev.to

Know someone who'd love this tutorial? Share the knowledge, and let's master JavaScript together! 🎓