What is .find() Method in JavaScript Array and How to Use it?

Have you heard about the .find() method in JavaScript arrays?

How can the array.find() method be used to search for elements in JavaScript? To know it, keep on reading!

In this article, you’ll learn about its syntax, parameters, and usage examples for searching for elements in your arrays.

This article covers everything you need to know about the .find() method.

What is .find() Method in JavaScript Array

The array.find method in JavaScript is a built-in function that is used to get the 1st element in the array that satisfies a provided testing function.

It runs a function for each element of an array and it will return undefined if there are no elements found.

Syntax

array.find(function(currentValue, index, arr),thisValue) ✅

Parameter

function (Required)

A function executes on each value in the array until the function returns true, indicating that the satisfying element has been found.

currentValue (Required)

The value of the current element being processed in the array.

index (Optional)

The index of the current element being processed in the array.

array (Optional)

The array of the current element being processed.

thisValue(Optional)

An object to use as this when executing the function.

Return value

The array.find method return the value of the first element in the array that satisfies the provided testing function. Otherwise it returned undefined.

📌Please note that the find method doesn’t change the original array.

Supported Browser

✔ Chrome

✔ Edge

✔ Firefox

✔ Opera

✔ Safari

How to use the .find() method to search Arrays in JavaScript?

As we mentioned earlier, the .find() method is a built-in function of JavaScript arrays that returns the first element in the array that satisfies a provided testing function.

If no values satisfy the testing function, undefined is returned.

Here’s an example of how to use the .find() method:

const samplearray = [5, 10, 20, 30, 40];
const result = samplearray.find(element => element > 8); ✅
console.log(result);

In this example, the testing function checks if an element is greater than 8. The first element in the array that satisfies this condition is 10, so the output would be:

10

Different usage of .find method in JavaScript

Here are some common use cases for the .find() method in JavaScript:

Finding an object in an array by one of its properties

You can use the .find() method to search an array of objects for an object with a specific property value.

For example, suppose you have an array of subject objects, each with a name and average property.

Finding an object in an array by one of its properties

You can use the .find() method to find the first subject object with a specific name value.

const subjects = [
  { subjectname: "Math", average: 90 },
  { subjectname: "English", average: 92 },
  { subjectname: "Programming", average: 95 }
]; 
const result = subjects.find(subject => subject.subjectname === "Math"); ✅
console.log(result); 

Output:

{ subjectname: 'Math', average: 90 }

Finding a number in an array

You can use the .find() method to search an array of numbers for a specific number.

For instance, suppose you have an array of average and you want to find the first average that is greater than 93.

You can use the .find() method to do this:

const average= [80, 95, 91, 95];
const result = average.find(average=> average> 93); ✅
console.log(result);

Output:

95

Finding an element in an array using a custom function

You can use the .find() method to search an array using a custom function.

For example, suppose you have an array of numbers and you want to find the first number that is divisible by 20 and 30.

You can use the .find() method with a custom function to do this:

const numbers = [20, 30, 60, 90, 120];
const result = numbers.find(number => number % 20 === 0 && number % 30 === 0);
console.log(result); 

Output:

60

Conclusion

The .find() method is a powerful and versatile tool for searching arrays in JavaScript.

This article has covered the syntax, parameters, and usage examples of the .find() method, as well as some common use cases for it.

Whether you’re searching for an object in an array by one of its properties, finding a number in an array, or using a custom function to find an element in an array, the .find() method can help you achieve your goals.

We are hoping that this article provides you with enough information that help you understand the .find in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment