Find the First Array Element matching a Condition in JS

Find the First Array Element matching a Condition #

To find the first array element that matches a condition:

1. Use the Array.find() method to iterate over the array.
2. Check if each value matches the condition.
3. The find method returns the first array element that satisfies the condition.

Copied!
const arr = [1, 2, 3, 4, 5];

const result = arr.find(element => {
  return element > 2;
});

console.log(result); // 👉️ 3

The function we passed to the Array.find method gets called with each element in the array until it returns a truthy value or iterates over the entire array.

Truthy values are all values that are not falsy.

The falsy values in JavaScript are: false, null, undefined, 0, "" (empty string), NaN (not a number).

In the example, we check if the current array element is greater than 2. The first element in the array that is greater than 2 is 3.

As soon as the condition is met, the find method short-circuits and returns the value.

If the function never returns a truthy value, the find method will have to iterate over the entire array and will return undefined.

Copied!
const arr = [1, 2, 3, 4, 5];

const result = arr.find(element => {
  return element > 20000000;
});

console.log(result); // 👉️ undefined

The implemented condition is never satisfied, so the find() method iterated over the entire array and ended up returning undefined.

Further Reading #

• Convert an Array of Objects to Array of Values in JS
• Reverse an Array without Modifying the Original in JS