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:
|
thisArg optional | 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. |
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.