JavaScript Array find() Method with Example

In this tutorial, we will learn about the JavaScript Array find() method with the help of example programs.

The find() method works similarly to the filter() method, but it returns the value of first array element that meets the certain criteria defined in the callback function.

In other words, the find() method of array returns the value of first array element that satisfies provided testing function (i.e. callback function). Otherwise, it returns undefined.

For example, the following snippet code returns the first number that’s greater than 2.

<script>
  let numbers = [1, 2, 3, 4, 5, 6, 7];
// Callback function to check greater number than 2.
   function isGreater(element) {
      return element > 2;
   }
// Find the first greater number than 2.
   let greaterNumber = numbers.find(isGreater);
   document.write("First greater number than 2: " +greaterNumber);
</script>
Output:
      First greater number than 2: 3

JavaScript Array find() Syntax


The general syntax of the find() method in JavaScript is:

// Arrow function
arr.find((element) => { /* ... */ } )
arr.find((element, index) => { /* ... */ } )
arr.find((element, index, array) => { /* ... */ } )

// Callback function
arr.find(callbackFn)
arr.find(callbackFn, thisArg)

// Inline callback function
arr.find(function(element) { /* ... */ })
arr.find(function(element, index) { /* ... */ })
arr.find(function(element, index, array){ /* ... */ })
arr.find(function(element, index, array) { /* ... */ }, thisArg)

Here, arr is the name of an array.

find() Parameters


The Array.find() method can take three parameters that are:

  • callbackFn – The callback function to execute on each array element; The callbackFn needs to return true to satisfy a value. If so, JavaScript find() method immediately returns the value of that element. Else, find() returns undefined. The function can take the following arguments:
    • element – The current element to be passed in the array.
    • index – The index of the current element being passed in the array.
    • array – The array on which the find() method is called.
  • thisArg – Object to use as this inside the callback function callback. It is optional.

find() Return Value


This method returns the value of the first element in the array that satisfies the provided callback function. Otherwise, returns undefined if no elements satisfy the function.

The find() method executes the callback function once for each element in the array until it finds a truthy value.

If there is more than one element in the array that will return a truthy value, then find returns only the value of the first element in the array.

Array find() Method Example Programs


Let’s create a JavaScript program in which we will create an array of numbers and find the first even number in the array using find() method of array.

Program code 1:

<script>
  let numArr = [1, 35, 8, 78, 6];
  function isEven(element) {
      return element % 2 == 0;
   }
  let firstEven = numArr.find(isEven);
  document.write("First even number: " +firstEven);
</script>
Output:
       First even number: 8

Let us create the preceding program using arrow function.

Program code 2:

<script>
  let numArr = [1, 35, 8, 78, 6];
  let firstEven = numArr.find((element) => element % 2 == 0);
  document.write("First even number: " +firstEven);
</script>

Let us create a JavaScript program to find the first programming language that begins with the letter “J”.

Program code 3:

 <script>
  const languages = ["C", "C++", "Python", "JavaScript", "Swift", "Java"];
  const result = languages.find(word => word.startsWith("J"));
  document.write(result);
  </script>
Output:
     JavaScript

Thus, we can find easily the first matching element based on the specified criteria using find() method of array.

Find an object in an array by one of its properties using Array.find()


Let’s create a JavaScript program to find an object in an array by one of its properties using find() method of array.

Program code 4:

<script>
   const students = [
    {name: 'Tripti', rollNo: 2},
    {name: 'Ivaan', rollNo: 4},
    {name: 'John', rollNo: 5},
    {name: 'Bob', rollNo: 7}
   ];
  function isFind(st) {
      return st.name === 'Tripti';
  }
  document.write(students.find(isFind));
</script>
Output:
      name: 'Tripti', rollNo: 2

Program code 5: Using arrow function and deconstructing

<script>
   const students = [
      {name: 'Tripti', rollNo: 2},
      {name: 'Ivaan', rollNo: 4},
      {name: 'John', rollNo: 5},
      {name: 'Bob', rollNo: 7}
   ];
  const result = students.find( ({ name }) => name === 'Ivaan' );
  document.write(result);
</script>
Output:
     name: 'Ivaan', rollNo: 4

Try It Yourself

Program code 6:

<script>
   const members = [
       { name: "John", age: 13 },
       { name: "Bob", age: 17 },
       { name: "Alan", age: 22 },
       { name: "Steve", age: 30 },
   ];
   let adultMember = members.find(({ age }) => age >= 18);
   document.write(adultMember);
</script>

Program code 7:

<script>
  const members = [
       { name: "John", age: 13 },
       { name: "Bob", age: 17 },
       { name: "Alan", age: 22 },
       { name: "Steve", age: 30 },
   ];
   let adultMember = members.find(({ name }) => name === 'Betty');
   document.write(adultMember);
</script>

In this tutorial, you have learned array find() method in JavaScript with the help of example programs. Hope that you will have understood how to find the first matching element in an array based on specific test condition using find() method.
Thanks for reading!!!
Next ⇒ JavaScript array findIndex() method⇐ Prev Next ⇒