JavaScript Array find

We can use the JavaScript Array.find() method when we want to find only a single element from an array based on a condition. We can either pass this condition in a separate function or directly write the condition in the method call.

How array find method works in Javascript

• The array.find() method in JavaScript executes the function for every array element and returns the first element that matches the condition.
• When there are no elements that match the condition, this method returns an undefined value.
• It checks all the elements in the array until the condition satisfies and once found, it does not check the remaining elements.

How to use the Array Find method in JavaScript

The syntax for array find in JavaScript is described below.

Method 1

array.find(function(element[,index[,array]])[,thisArg])

function – Required. The function to check a condition and takes below 3 parameters

element – This is the element in the array which is the required parameter.

index –  The index position of the current element in the array which is an optional parameter.

array – Optional. The array on which we need to find the element

thisArg – Optional. The value which is passed to the function that considers as “this” value.

Return value – The first array element that passes the function

Method 2

array.find(function name)

We use this syntax when we write a separate function that has the required condition to retrieve the value from an array.

Method 3

array.find(element => element condition)

We can use => to specify the required condition to retrieve the elements.

Browser Compatibility

The below table shows you the browser support along with versions for the array find method in JavaScript.

A simple example of Array find in Javascript

This Javascript example provides output as the first number in the array which is greater than 20 using the Array find method.

var numbers = [4,7,10,25,30];
var result = numbers.find(function(num) {
    return num >=20
    });
console.log(result);

Output:
25

Example: To retrieve an odd number by creating a separate function

The below code shows how to find the first odd number in the array using the JavaScript Array find method. Here, the logic is written in a separate function so that we can reuse it for different input combinations. If you see, the first output returns the first odd number value “25”. The second output returns “undefined” since there is no odd number in that array.

var numbers = [4,8,10,25,30];
var values = [2,4,6,8,10,12];
function isOddnumber(num)
{
  return num%2 != 0;
}

var result = numbers.find(isOddnumber);
var output = values.find(isOddnumber);
console.log(result);
console.log(ouput);

Output:
25
undefined

Example: Retrieve an array of object values using array find

We can also retrieve an array of object values using the Array.find() method in JavaScript. Another method of using find is to use arrows with the element and mention the condition in it. For example, here we want to retrieve the object values from an array where the name starts with the letter “L”. Hence the output returns both the name and id based on the condition.

const student = [
  {name: "Amit", id: 100},
  {name: "Tushar", id: 101},
  {name: "Kiran", id: 102},
  {name: "Lalith", id: 103}];
  
var result = student.find(output=> output.name.startsWith("L"));
console.log(result);

Output:
{ name: 'Lalith', id: 103 }

Conclusion

In this tutorial, you have learned about how to retrieve a single element from an array using the Array.find() method in Javascript based on a specific condition.

Reference