How To Find The First Array Element Matching A Condition In JS?

Find The First Array Element Matching A Condition In JS

While working on JavaScript projects, there are many times that we need to work with arrays and have to find the first array element matching a condition in JS. If you are still confused and have not known how to do it, don’t worry because in this tutorial, we will show you how to get it done with two different methods. 

Find the First Array Element matching a Condition in JS

Method 1: Use array.find()

The array.find() method in JavaScript is used to find the first element of the array that passes our provided condition. It will scan through all elements of our array, and whenever an element satisfies our condition, it will return the value of that element. 

Syntax

array.find(function(currentValue, index, arr),thisValue);
  • Function: the function that goes through every element.
  • currentValue: the current element.
  • index (optional): the index of the current element.
  • arr (optional): the array which has the current element.
  • thisValue (optional): a value passed to the function to be used as ‘this‘ value, if not, it will be passed as undefined.  

Now let’s try to apply array.find() to 2 simple programs. 

Example 1: 

In this example, we will have an array of numbers and try to find the first element that is divisible by 2. 

Completed code: 

var numArr = [25, 70, 46, 97, 574, 128, 790];

var checkArr = numArr.find(function (subject) {
  return subject % 2 === 0
})

console.log(checkArr)

Output: 

70

Example 2:

In this example, we have an array called nameList that contains different names. And our mission is to find the name that contains the letter ‘a’ or ‘A’.

const nameList = ['Tom', 'Alex', 'Antony', 'Bob', 'Hazel', 'Peter', 'Jack', 'Emily', 'Norish']

var checkName = nameList.find(function (subject) {
  return subject.includes('A'||'a')
})

console.log(checkName)

Output: 

Alex

Method 2: Use a for loop 

For example 1, we can use a for loop instead of array.find() to find the first element that satisfies our condition. Normally, a for loop will run through all of the elements in the array and, thus, give us all of the elements that match the condition. But with a break, we can get only the first element.

Completed code, for example 1: 

var numArr = [25, 70, 46, 97, 574, 128, 790];
var number_check;

for (let i = 0; i<numArr.length; i++) {
  if (numArr[i] % 2 ===0) {
    number_check = numArr[i];
    break;   
  } else continue
}

console.log(number_check);

Output: 

70

Summary

While working with arrays in JavaScript, one of the important skills that every developer should know is how to find the first array element matching a condition in JS. Fortunately, the methods are pretty simple. We have shown two common ways to do this. The first one is using array.find() method, and the other uses a for loop.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *