Find an element in a JavaScript array

This post will discuss some of the ways to find an element in an array in JavaScript.

Finding an element in an array in JavaScript is a common task that can be done in various ways. Here are a few commonly used functions:

1. Using `indexOf()` or `lastIndexOf()` function

We can use the indexOf() function to search for the first occurrence of the element in the array, starting from a given index. This function returns the index of the element if found, or -1 if not found. It compares the elements using strict equality (===). We can use this function to check if an element exists in the array, or to find its position. Here’s an example:

let arr = [1, 2, 3, 4, 5];

// find the index of 3 in the array

let index = arr.indexOf(3);

console.log(index); // 2

Download Run Code

In this example, arr.indexOf(3) returns the index of the first occurrence of number 3 in the array arr, which is 2. We can also use the lastIndexOf() function to search for the last occurrence of the element in the array, starting from a given index. This function works similarly to the indexOf() function, but it searches from the end of the array instead of from the beginning. Here’s an example:

let arr = [1, 2, 3, 4, 3, 5];

// find the last index of 3 in the array

let index = arr.lastIndexOf(3);

console.log(index); // 4

Download Run Code

Both these functions are compatible with older browsers and can also be used to check if an element exists in the array by comparing the result with -1. However, it may not work well with complex or nested objects, as it does not compare their properties.

2. Using `find()` function

Another option is to use the find() function to search for the first element in the array that satisfies a given condition. This function takes a callback function as an argument and returns the value of the element if found. If no values satisfy the testing function, undefined is returned. Here’s an example:

let arr = [1, 2, 3, 4, 5];

// find the first element that is greater than 3

let element = arr.find(element => element > 3);

console.log(element); // 4

Download Run Code

In this example, arr.find(element => element > 3) returns the first element in the array that is greater than 3, which is 4. Note that the callback function is executed for each element in the array, and receives three parameters: the current element, its index, and the array itself. We can use this function to find an element based on its properties or values. Here’s an example:

let fruits = [

{ name: "apple", color: "red" },

{ name: "banana", color: "yellow" },

{ name: "cherry", color: "red" },

{ name: "durian", color: "green" },

];

let fruit = fruits.find((element) => element.color === "red");

console.log(fruit); // { name: 'apple', color: 'red' }

fruit = fruits.find((element) => element.name === "mango");

console.log(fruit); // undefined

Download Run Code

This function is simple and elegant, but it requires ES6 support or a polyfill for older browsers. It is also useful when we want to find an element based on a specific condition or property.

3. Using `filter()` function

The filter() function creates a new array with all elements that pass a certain condition. We can use it to find an element in an array by passing a function that returns true for the element we want to find and false for others. For example, we can use it to filter out all elements that don’t match a certain value:

let arr = [1, 2, 3, 4, 3, 5];

// filter out all elements that is not equal to 3

let element = arr.filter(element => element !== 3);

console.log(element); // [ 1, 2, 4, 5 ]

Download Run Code

In this example, arr.filter(element => element !== 3) creates a new array with all elements that are not equal to 3. This function is more functional and expressive than loops, but it may have some performance overhead and compatibility issues. It does not change the original array and is also useful when we want to find multiple elements that meet a certain condition.

That’s all about finding an element in an array in JavaScript.

Find an element in a JavaScript array

1. Using indexOf() or lastIndexOf() function

2. Using find() function

3. Using filter() function

Share this:

1. Using `indexOf()` or `lastIndexOf()` function

2. Using `find()` function

3. Using `filter()` function