How to find elements in Array in JavaScript

There are 6 different ways to find elements or their positions in an Array. Let’s explore them one by one.

The find() method

This method returns the first matched element in the array that satisfies a provided condition. It takes a callback function as an argument that returns true or false based on the test condition. The find() method executes this callback function once for each element in the array. If the callback function returns true for any element, then that element will be returned by the find() method, and it stops checking further for the rest of the elements. If no element passes the condition, the find() method returns undefined.

const score = [55, 73, 82, 66, 48];

const value = score.find(val => val > 60);
// returns the first element that passed the condition

console.log(value); // 73

The findIndex() method

This method returns the index of the first matched element in the array that satisfies a provided condition. It works similarly to the find() method, but instead of returning the first matched element, it returns the index of the first matched element. If no matches are found, then it returns -1.

const score = [55, 73, 82, 66, 48];

const index = score.findIndex(val => val > 60);
// returns the index of first element that passed the condition 

console.log(index); // 1

The includes() method

This method checks whether a specified element is present in an array and returns a boolean value indicating the same. If the element is present, it returns true otherwise false. This method is case-sensitive.

const teams = ['CSK', 'KKR', 'MI', 'RCB'];

console.log(teams.includes('KKR')); // true

console.log(teams.includes('rcb')); // false

This method accepts an optional parameter that specifies the position to start the search for the element. If we specify the start position, it will look for the element from that position until the end of the array. The default value is 0.

const teams = ['CSK', 'KKR', 'MI', 'RCB'];

console.log(teams.includes('KKR', 2)); // false

The indexOf() method

This method returns the index of the first occurrence of matched element in the array. If no element matches, then it returns -1. This method is case-sensitive.

const shop = ['Amazon', 'Flipkart', 'Wallmart', 'Myntra', 'Flipkart'];

console.log(shop.indexOf('Myntra')); // 3

console.log(shop.indexOf('Flipkart')); // 1

console.log(shop.indexOf('amazon')); // -1

This method also accepts an optional parameter to specify the start position for the search. The default value is 0.

const shop = ['Amazon', 'Flipkart', 'Wallmart', 'Myntra'];

console.log(shop.indexOf('Amazon', 1)); // -1

To check if any element is present in the array, we can find the index of that element and check if index >= 0, then the element exists, else it doesn’t.

The lastIndexOf method

This method returns the index of the last occurrence of matched element in the array. This method searches the elements from the end toward the beginning of the array. If no element matches, then it returns -1. This method is case-sensitive.

const items = ['car', 'phone', 'watch', 'car', 'bike'];

console.log(items.lastIndexOf('car')); // 3

console.log(items.lastIndexOf('watch')); // 2

console.log(items.lastIndexOf('BIKE')); // -1

This method also accepts an optional parameter to specify the start position at which it starts the searching toward the beginning. The default value is array length minus one.

const items = ['car', 'phone', 'watch', 'car', 'bike'];

//start searching from index 2 to 0
console.log(items.lastIndexOf('car', 2)); // 0

Looping through Array elements and find

We can loop through each array element and find any element or its position based on any condition.

Using for loop

const arr = ['Gold', 'Silver', 'Platinum', 'Iron'];

let isPresent = false;

for (let item of arr) {
    if(item === 'Silver') isPresent = true;
}

if (isPresent) console.log('Silver Exists !');
else console.log('Silver Not found !');

Using forEach() method

Let’s see one example to find numbers that are greater than 30.

const marks = [53, 29, 65, 22, 71];

const pass = [];

marks.forEach(val => {
    if(val >= 30) pass.push(val);
})

console.log(pass); // [53, 65, 71]

Using filter() method

This method finds and filters out elements that do not pass a test condition. It takes a callback function as an argument that executes once for each element in the array and returns true or false. Only the elements for which the callback function returns true will be included in a new array and returned by the filter() method.

const marks = [53, 29, 65, 22, 71];

const pass = marks.filter(val => val >= 30);

console.log(pass); // [53, 65, 71]

References

Amitav Mishra

JS Curious