JavaScript methods for finding elements

Hey guys,

Welcome back to a new article !

In this article, we will learn about different JavaScript methods that we can make use of for finding elements in an array. Arrays, as we know, is a data structure that is one of the key building blocks that we make use of for building data-based intensive web applications. With an array, we can easily store and manipulate elements within the array as and how we want to. Let us see the 4 methods that you can make use of for finding an element in an array.

find

The find() method returns the first element in the provided array that satisfies the provided testing function. So we specify a testing function as the callback and the find method will return the first item that returns true for the condition that we test within the specified callback. If no elements satisfy the testing function, then undefined gets returned. Let us see an example for the find method.

const numbers = [5, 12, 8, 130, 44];

const firstNumberGreaterThan10 = numbers.find(element => element > 10);

console.log(firstNumberGreaterThan10 );
// expected output: 12

findIndex

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. So as a testing function, we pass a callback to the findIndex method and there we explicitly mention a condition and based on the truthiness of that condition, we get an element that satisfies that specified condition. In case, no element passes the testing condition then it returns -1.

const numbers = [1, 3, 4, 6, 10];

const greaterIndex = numbers.findIndex(element => element > 6); 
console.log(greaterIndex); // 4

const smallerIndex = numbers.findIndex(element => element > 10); 
console.log(smallerIndex); // -1 

Consider the above example in which we have a list of numbers that is given to us, let us say we want to find the index of the first occurrence of an element which is greater than 6. So for this case, we can make use of the findIndex method with the testing condition as element > 6. Next, let us say we want to find the index of the first occurrence of an element which is greater than 10. So we again make use of the findIndex method with the testing condition as element > 10. Now since there is no element that satisfies the above condition, hence we get a -1 for this.

indexOf

The indexOf() method returns the index of the first occurrence of the substring or element that we specify as the argument.

Let us see an example for the indexOf method, let us say we are given an array of elements and we want to find the index of some elements within that array. So see the below code :

const numbers = [1, 3, 4, 6, 10];

const indexOf10 = numbers.indexOf(10); // 4

const indexOf16 = numbers.indexOf(16); // -1

So if we try to search the index of the number 10 in the given array of numbers, then we get 4 because 10 is sitting at index 4 of the given array. Next, for the number 16 we get -1 because the number 16 is not present anywhere within the given array.

lastIndexOf

The lastIndexOf() method returns the index of the last occurrence of the specified substring or element that we specify as argument. The lastIndexOf method is similar to the indexOf method that we just discussed but the only difference being that it starts to look up from the trailing end of the array instead of the start of the array like we do in indexOf. So in essence, if you know for sure that the element that you are looking for lies in the latter half of the array, then using the lastIndexOf method makes more sense.

const numbers = [1, 3, 4, 6, 10];

const indexOf10FromLast = numbers.lastIndexOf(10); 

console.log(indexOf10FromLast); // 4

const indexOf16FromLast = numbers.lastIndexOf(16); 

console.log(indexOf16FromLast); // -1

So in above example, if we try to find the index of the last occurrence of a particular element, say 10, then we get 4. Since, 10 is present at index 4 and we only have one occurrence of 10 in the numbers array. Next, 16 is not present anywhere in the array so for that if we try to find the last occurrence of it using the lastIndexOf method, we get -1.

So this is it for this article. Thanks for reading.