• JavaScript Video Tutorials

JavaScript - Array find() Method

In JavaScript, the Array.find() method executes a callback function on each array element and retrieves the first element in the array that satisfies a specified condition of the callback function.

If the array elements does not satisfy the specific condition, this method returns “undefined”. It does not execute the function for empty array elements. This method does not change the original array.

The difference between findIndex() and find() method is; the findIndex() method returns the first index position of the element that satisfies the testing function (rather than the element value).

Syntax

Following is the syntax of JavaScript Array find() method −

array.find(callbackFn (element, index, array), thisArg);

Parameters

This method accepts two parameters. The same is described below −

  • callbackfn − This is a callback function that will be called once for each element in the array. It further takes three arguments:
    • element − The current element being processed in the array.
    • index − The index of the current element being processed.
    • array − The array of the current element.
  • thisArg (optional) − It specifies a value passed to the function to be used as its this value.

Return value

This method returns the first element in the array that satisfies the provided testing function; otherwise, 'undefined'.

Examples

Example 1

In the following example, we are using the JavaScript Array find() method to to locate the first element greater than 10 in the array elements −

<html>
<body>
   <script>
      const numbers = [10, 23, 12, 43, 68];

      const result = numbers.find(function(element) {
         return element > 10;
      });
      document.write(result);
   </script>
</body>
</html>

Output

The above program returns 23 as output because it is the first element greater than 10 in the array elements.5

23

Example 2

Here, we are finding the first element in the “animals” array whose length is greater than 5 −

<html>
<body>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.find(func => func.length > 5);
      document.write(result);
   </script>
</body>
</html>

Output

Cheetah

Example 3

Here, we are using the find() method with an array of objects to select the first item in the players (age is greater than 40) −

<html>
<body>
   <script>
      const players = [
         { name: 'Kohli', age: 35 },
         { name: 'Ponting', age: 48 },
         { name: 'Sachin', age: 50 }
      ];
      
      const result = players.find(item => item.age > 40);
      document.write(JSON.stringify(result));
   </script>
</body>
</html>

Output

{"name":"Ponting","age":48}
Advertisements