TypeScript / JavaScript – How to Find Element in Array

JavaScript provides various methods to find elements in the array. We can use these methods in TypeScript as well. In this tutorial, we will go through each method separately and understand its usage with an example.

const marks = [90, 44, 76, 12, 0, 34];

function checkPass(mark){
    return mark > 35
}

console.log( marks.filter(checkPass) )   //[ 90, 44, 76 ]  

console.log( marks.find(checkPass) );		//90

console.log( marks.findIndex(checkPass) );	//0

console.log( marks.indexOf(0) );	//4

console.log( marks.includes(0) );		//true

console.log( marks.some(checkPass) );  //true

marks.forEach(checkPassAndPrint);		//Print 90 44 76

1. Methods to Find Elements in an Array

At a high level, we can use one of the following methods to find an element or element index in the array.

• filter() – returns an array of elements that satisfies the given filter expression/function.
• find() – returns the first element that satisfies the specified boolean function. It returns undefined if no elements are found.
• findLast() – is similar to find() except it returns the last element that satisfies the specified function.
• findIndex() – returns the index of the first element that satisfies the specified boolean function. It returns -1 if no match is found.
• findLastIndex() – is similar to findIndex() except it returns the last element that satisfies the specified function.
• indexOf() – returns the first index for a given element. It returns -1 if the value is not found.
• lastIndexOf() – is similar to indexOf() except it returns the last element.
• includes() – returns true if it contains the given value else returns false.
• some() – returns true if satisfies the given boolean function for at least one element else returns false.
• forEach() – executes each element with the given function.

2. filter() – Get All Elements matching a Condition

The filter() method executes a given function against each element in the array and returns a new array containing elements that satisfy the given function.

In the following example, we are:

• declaring an array of student marks in different subjects.
• defining a boolean-valued function checkPass() that takes marks as a parameter and returns if marks are greater than pass marks 35.
• applying checkPass() for each element in the marks array using the filter() method.

// array of student marks in different subjects
const marks = [90, 44, 76, 12, 0, 34]

// function to check if student passed or not for a subject
function checkPass(mark){
    return mark > 35
}

// usage of filter method
console.log( marks.filter(checkPass) )   //[ 90, 44, 76 ]

3. find() – Find an Element matching a Condition

The find() method executes a function for each element in the array and returns the first element that satisfies the function, while findLast() method returns the last element that satisfies the function.

The find() and findLast() returns undefined if no elements are found.

In the following example, we are:

• declaring an array of student marks in different subjects.
• declaring and defining a function checkPass() that takes marks as a parameter and returns if marks are greater than pass marks(35).
• finding the first element/marks that satisfy the given function using the method find().
• finding the last element/marks that satisfy the given function using the method findLast().

// array of student marks in different subjects
const marks = [90, 44, 76, 12, 0, 34]

// function to check if student passed or not for a subject
function checkPass(mark){
    return mark > 35
}

// usage of find method
console.log( marks.find(checkPass) )  //90

// usage of findLast method
console.log( marks.findLast(checkPass) )  //76

4. findIndex() – Find Index of Element matching a Condition

The findIndex() executes a given function against each element in the given array and returns the index of the first element that satisfies the given function, while findLastIndex() returns the index of the last element that satisfies the given function.

The findIndex() and findLastIndex() methods return -1 if no match is found.

In the following example, we are:

• declaring an array of student marks in different subjects.
• declaring and defining a function checkPass() that takes marks as a parameter and returns if marks are greater than pass marks(35).
• finding the index first element/marks that satisfy the given function using the method findIndex().
• finding the index last element/marks that satisfy the given function using the method findLastIndex().

// array of student marks in different subjects
const marks = [90, 44, 76, 12, 0, 34]

// function to check if student passed or not for a subject
function checkPass(mark){
    return mark > 35
}

// usage of findIndex method
console.log( marks.findIndex(checkPass) )  //0

// usage of findLastIndex method
console.log( marks.findLastIndex(checkPass) )  //2

Here 0 is the index of the element 90 and 2 is the index of the element 76.

5. indexOf() – Find Element Index by Element Value

The indexOf() starts the search from left to right and returns the index of the first element that matches the specified element, while lastIndexOf() returns the index of the last element that matches the given element.

The indexOf() and lastIndexOf() methods return -1 if no match is found.

In the following example, we are:

• declaring an array of student marks in different subjects.
• finding the index of the first element that matches the given element using the indexOf() method.
• finding the index of the last element that matches the given element using the lastIndexOf() method.

// array of student marks in different subjects
const marks = [90, 44, 0, 12, 0, 34]

// usage of indexOf method
console.log( marks.indexOf(0) )  //2

// usage of lastIndexOf method
console.log( marks.lastIndexOf(0) )   //4

where 2 is the index of the first occurrence of the element 0, and 4 is the index of the last occurrence of the element 0.

6. includes() – Check if Element exists by Element Value

The includes() starts the search from left to right of an array and returns true if an element matches the given value else returns false.

In the following example, we are:

• declaring an array of student marks in different subjects.
• checking if the given element exists or not in the given array using the includes() method.

// array of student marks in different subjects
const marks = [90, 44, 0, 12, 0, 34]  

// usage of includes method
console.log( marks.includes(0) )        //true
console.log( marks.includes(100) )   //false

7. some() – Check if an Element exists matching a Condition

The some() function executes a function against each element in the given array and returns true if at least one element satisfies the given function else returns false if no elements satisfy the given function.

In the following example, we are:

• declaring an array of student marks in different subjects.
• declaring and defining the function match() which returns a boolean value based on the input and condition. Here we check if the given mark value is equal to 0 or not.
• checking if the given element exists in the array marks using the method some() which accepts match as a callback function.

The some() executes the match() against each mark in the array marks and returns true if at least one element/mark matches 0.

// array of student marks in different subjects
const marks = [90, 44, 0, 12, 0, 34]

// function to check for a match
function match(mark){
    return mark == 0
}

// usage of some method
console.log( marks.some(match) )  //true

8. forEach() – Custom Logic

The forEach() executes the given function against each element. We can write custom logic to perform on the elements that match the given element.

In the following example, we are:

• declaring an array of student marks in different subjects.
• declaring and defining the function match that prints the element which matches the given condition. Here we check if the given mark is equal to 0 then print the current mark.
• executing the match() function against each element in the array marks using the method forEach().

// array of student marks in different subjects
const marks = [90, 44, 0, 12, 0, 34]

// function to check for a match
function match(mark){
    if(mark == 0)
        console.log(mark)
}

// usage of forEach method
marks.forEach(match)

9. Conclusion

In this tutorial, we have learned different ways of finding an element in the given array using an inbuilt method or writing our own custom logic using examples. Apply a method according to the use case and find the element that we need in the given array.

Happy Learning !!