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:
- How to Empty an Array in JavaScript
- Create an array containing 1 to n numbers in javascript
- Remove the last 2 elements from an array in javascript
Hello. My name is Khanh Hai Ngo. I graduated in Information Technology at VinUni. My advanced programming languages include C, C++, Python, Java, JavaScript, TypeScript, and R, which I would like to share with you. You will benefit from my content.
Name of the university: VinUni
Major: EE
Programming Languages: C, C++, Python, Java, JavaScript, TypeScript, R