Find the First Array Element matching a Condition in JS

# Table of Contents

1. Find the First Array Element matching a Condition in JavaScript
2. Find the First Array Element matching a Condition using for...of
3. Find the First Array Element matching a Condition using for

# Find the First Array Element matching a Condition in JavaScript

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 meets 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.

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

All other values are truthy.

If the function we passed to the Array.find() method returns a truthy value at least once, the find() method short-circuits and returns the corresponding array element.

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.

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

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

console.log(result); // 👉️ 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 > 100;
});

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

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

You also have access to the index of the current iteration when using Array.find().

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

const result = arr.find((element, index) => {
  console.log(index); // 👉️ 0, 1, 2, 3, 4

  return element > 100;
});

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

The callback function gets called with the element, the current index and the array that's being iterated.

# Find the First Array Element matching a Condition using for...of

This is a three-step process:

1. Use a for...of loop to iterate over the array.
2. Check if each element meets the condition.
3. If the condition is met, assign the element to a variable and break out of the loop.

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

let result;

for (const element of arr) {
  if (element > 2) {
    result = element;
    break;
  }
}

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

Notice that we declared the result variable using let.

Variables declared using const cannot be reassigned.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we check if the current element meets a condition.

If the condition is met, we assign the element to a variable and exit the for...of loop.

The break statement enables us to break out of the loop to avoid iterating needlessly after we've found the matching element.

You can also use a basic for loop to find the first array element that meets a condition.

# Find the First Array Element matching a Condition using for

This is a three-step process:

1. Use a for loop to iterate over the array.
2. Check if each element meets the condition.
3. Assign the matching element to a variable.

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

let result;

for (let index = 0; index < arr.length; index++) {
  if (arr[index] > 2) {
    result = arr[index];
    break;
  }
}

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

Instead of using a for...of loop this solution uses a basic for loop to find the first matching element.

If no element meets the condition, the result variable remains set to undefined.

Which approach you pick is a matter of personal preference. I'd use the Array.find() method because I find it more direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Find the Even or Odd numbers in an Array in JavaScript
• Find the indexes of all Occurrences of Element in JS Array