JavaScript Finding Elements in Arrays— Find() Method ⭐️💥
As developers, we need to access and interact with elements in an array on a regular basis. Map() and Filter() methods are all good choices when we need to transform arrays elements based on some logic or find elements that meet a certain condition accordingly, plus both methods return a new array. Reduce() method reduces a list of arrays elements to one single value.
What about another and a very common task in the programming world, when we need to locate an individual element in the array and return that one element?
There are two different methods that we can use in JavaScript to locate data or individual elements in arrays — for simple and straightforward conditions we can use IndexOf() method and to find elements using more complex calculations we use Find() method. Let’s dive into and find out more about the Find() method at this time!
As a good starting point, let’s refer to the official documentation and definition of the Find() method at MDN Web Docs website:
The Find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
Return value. The value of the first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.
Pay your attention to the fact that this method returns the first element (value, not index) that meets the criterion. It means that if there are multiple repetitive data / same values in the array only the first one will be returned.
In the example below, I created a fruits array and populated it with various types of fruits. Say, I want to locate an element in this array whose length is 6 letters. Let’s see how this problem can be solved manually first and then solve the same problem one more time by applying the Find() method. Try it out!
function findMethodDemo(arrayOfFruits) {for (var i = 0; i < arrayOfFruits.length; i++) {
if (arrayOfFruits[i].length === 6) {
return arrayOfFruits[i];
}}}const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];const result = findMethodDemo(fruits);
console.log(result);// => Apples
How does it work? We iterate through the array fruits if the length of the current element in this array is equal to a condition we defined before arrayOfFruits[i].length === 6, then we return that element, otherwise undefined will be returned. Pay your attention to the fact that even though there are two values “Apples” and “Grapes” that have the same length 6, only the first one is returned, because a return keyword stops function execution once the first matching element is found so that JavaScript machine never reaches the second word “Grapes”.
The same logic is applicable and will be used when we invoke Find() method on the fruits array, check it out below!
const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];const result = fruits.find(element => element.length === 6);
console.log(result);// => Apples
The method automatically iterates over the array, calls a callback function on each value of this array, and returns the first element in the array that satisfies the condition defined by the function. If there is no matching element, undefined is returned.
⭐️💥 Syntax of Find() Method 💥⭐️
We have already learnt how this Find() method works, so let’s look into syntax and put our knowledge to the test and more practice! Here is what the official documentation tells us:
// Arrow functionfind((element) => { ... } )
find((element, index) => { ... } )
find((element, index, array) => { ... } )// Callback functionfind(callbackFn)
find(callbackFn, thisArg)// Inline callback functionfind(function callbackFn(element) { ... })
find(function callbackFn(element, index) { ... })
find(function callbackFn(element, index, array){ ... })
find(function callbackFn(element, index, array) { ... }, thisArg)
We can use an arrow functions expression, callback function, or inline callback function to define and use the Find() method. We have already written the arrow function expression, now let’s re-write the same code to demonstrate the callback function and inline callback function. No matter which syntax you select, the output will be the same; here are a couple of examples.
Inline Callback Function.
const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];const result = fruits.find(function (element) {return element.length === 6});
console.log(result);// => Apples
Callback Function.
const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];function callBack(fruits) {
return fruits.length === 6;}const result = fruits.find(callBack);
console.log(result);// => Apples
⭐️💥 What About Objects? 💥⭐️
Now, let’s convert our original array into an array of objects and see how we can apply the Find() method to more complex data structures. Also, let’s add repetitive data / same values in this modified array to demonstrate that only the first matching value is returned:
const fruits =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];Try this code out and see what the output is:
const fruits =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];const result = fruits.find(findfruit => findfruit.fruit === "Apples");console.log(result);// => { fruit: 'Apples', count: 5 }
⭐️💥 How to Use Index. 💥⭐️
Another optional parameter of this method is an index, the index option/parameter allows you to locate and get a value of an element based on its index. For example, we want the Find() method to locate an element at index 0 and return its value. The example below returns “Fig” because as your know arrays are 0 index-based.
const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];const result = fruits.find((element, index) => {return index === 0});console.log(result);// => Fig
Or we want to locate another element whose length is 6 symbols and starting at index 1 and till the first match, we can do that by writing a code like this. The piece of code below returns “Grapes” because JavaScript starts iterating over this array at index 1 that is “Apples” until the first match “Grapes”, and that first match then will be returned.
const fruits =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];const result = fruits.find((element, index) => {if (element.length === 6 && index > 1) return true});console.log(result);// => Grapes
Index Parameter for Objects.
The same logic is applicable to an array of objects; here is a code to return an object at index 2:
const fruits =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];const result = fruits.find((element, index) => {return index === 2});console.log(result);// => { fruit: 'Apples', count: 50 }
⭐️💥 What are our takeaways? 💥⭐️
The Find () method is simple and useful at the same time for more complex searches in arrays. The method automatically goes over a given array, calls a callback function on each value of this array, and returns the first element in the array that meets the condition defined by the callback function. If none of the elements matches the condition, undefined is returned.
- Find() method is called on an array.
- Find() method takes a function as an argument. This enables us to define the condition an element should meet, allowing searches that are more complex.
- Find() method returns the first element in an array that meets the condition.
- Find() method returns a value of an element that meets the condition.
- Find() method returns undefined if nothing is found / if there is no matching element.
If you find this information useful, please feel free to follow me! Hope you enjoyed this short guidance on Find() method in JavaScript, be strong and stay tuned.
