Lester Lambac

JavaScript Array .find() and .findLast() methods

Since these two array methods called .find() and .findLast() methods have closely related functionalities, let's wrap this inside one tutorial. Let's begin with .find() method.

Array .find() Method

The array .find() method checks each item of the array starting from the first index then returns the first item that matches a given condition or test.

Array .find() Method Syntax

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

  
    array.find((item, index, arrayCopy) => {
      // your condition goes here and make sure to return it
    }, thisArgs)
Callback Function Inside the callback function, it 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 optionalRefers 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.

Array .find() Method Example

To elaborate more how the .find() works, let's run this example.

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

So, if we want to programatically check and get the object which has a name of "Banana" inside the array of fruits, we can use the .find() method to accomplish that. Once it found the item starting from zero index, it will terminate the process and return the value.

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

    const banana = fruits.find(( fruit ) => {
      return fruit.name === "Banana";
    });

    console.log(banana);

    // output would be:
    // { name: 'Banana', emoji: '🍌', price: 5, available: true }

Array .findLast() Method

The array .findLast() 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.

Array .find() 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 "Banana". Using the finaLast() method, it will run the process starting from the last item of the array.

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

    const banana = fruits.findLast(( fruit ) => {
      return fruit.name === "Banana";
    });

    console.log(banana);

    // output would be:
    // { name: "Banana", emoji: "🍌", price: 100, available: false }

On this example, the output is the last "Banana" object.

Watch: Array .find() and .findLast() Methods Tutorial

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