Find() An Element From JavaScript Array Explained!

• What is find() in JavaScript?
• How Does Find() Method Work?
• Find() Method In Action
• Find An Element From Array of Objects
• Find() returns Undefined
• Find A Specific Array Index Using findIndex()

What is find() Method?

The find() method can only be invoked on a Javascript array.

const ages = [3, 10, 18, 20, 25];
ages.find();

It’s one of the higher order functions similar to map, reduce, filter etc.

Any function that accepts or return another function called higher-order functions.

Apparently find() will only take a function as an argument which is required.

How Does Find() Method Work?

The find() method will search the very first element from a given javascript array

Until the condition we specify is met or satisfied.

Then..

It will exit & ignore everything else

Including the second element that meets the condition.

Find() Method In Action

First, invoke the find() method in the ages javascript array.

Which will loop though the the array.

const ages = [3, 10, 18, 20, 25];
ages.find();

To capture each element on each iteration

We need to pass an arrow function as an argument with the parameter called age to the find() method

const ages = [3, 10, 18, 20, 25];
ages.find(age => {
});

The parameter age will have an element from an array on each iteration.

Finally, add the condition inside the arrow function

Let’s say I want to find the first element which is over 18 in the ages array.

const ages = [3, 10, 18, 20, 25];
ages.find(age => {
  return age > 18;
});

This will get the very first element of the ages array as soon as it finds any number that is above 18.

In this case, there is 20 which is 4th index.

And exit the loop and it won’t go any further.

You can assign the value that the find() method returns into a variable called found like below.

const ages = [3, 10, 18, 20, 25];
const found = ages.find(age => {
  return age > 18;
});

console.log(found); // 20

You can make it short like this

const ages = [3, 10, 18, 20, 25];
const found = ages.find(age => age > 18);

console.log(found); // 20

Find An Element From Array of Objects

If you’ve array of objects, you can literally find any object by the value of one of its properties.

Let’s say you want find the very first object that has an age is over 18, you can do something like the code below.

const users = [
  {name: "Pagalavan", age: 3},
  {name: "Ellalan", age: 10},
  {name: "Vanagamudi", age: 18},
  {name: "kittu", age: 20},
  {name: "amuthan", age: 25}
];

const found = users.find((user) => {
     return user.age > 18;
});

console.log(found); // { age: 20, name: "kittu" 

Similarly, you can also search for a specific user object by its name property value.

const found = users.find((user) => {
     return user.name === "amuthan";
});

console.log(found); // { age: 25, name: "amuthan" }

Find() returns Undefined

If the find() method is unable to find an element that meets the provided condition, it’ll return undefined.

As you can see, I’m trying to find an age which is above 35

Apparently, none of the elements in the ages array matches that.

const ages = [3, 10, 18, 20, 25];

const found = ages.find(age => 
    age > 35
); // undefined

if(found) {
  //do something
}

Which obviously return undefined.

Undefined often seen as bad or error by novice developers but it’s not.

In fact, undefined is one of the data types similar to Number, Boolean, Null etc.

This will be a great scenario if you want to check if a specific value or element exists in a JavaScript array.

Find A Specific Array Index Using findIndex()

If you want to get an index of an element that satisfies the provided condition, you might want to consider using findIndex().

The findIndex() is very similar to find() method but it will return the index value of the element that meets the provided condition instead of the actual element.

You can do something like this.

const ages = [3, 10, 18, 20, 25];

const foundIndex = ages.findIndex((age) => 
    age > 18
);

console.log(foundIndex); // 3

If you want to get the element using its index value from array, you can easily do something like this.

const ages = [3, 10, 18, 20, 25];

const foundIndex = ages.findIndex((age) => 
    age > 18
);

console.log(foundIndex); // 3
console.log(ages[foundIndex]);// 20

There you’ve it!

If you’ve have any suggestions or want to add anything to this tutorial, please send me a quick message by commenting below.

Recommended

• JavaScript Filter() vs Find() Explained
• JavaScript For Loop Click Event Issues & Solutions
• JavaScript Dynamic Radio Buttons
• JavaScript Dynamic Select Drop Down List
• JavaScript Working With Images
• JavaScript Image Carousel
• JavaScript Accordion Menu