Different Ways to Search an Array in JavaScript

An array is a collection of items that stores different kinds of data types. We can find specific elements from the array by utilizing many methods. There are various ways that we can utilize to search for an element in an array which are as follows:

• ✅ find method
• ✅ findIndex method
• ✅ some method
• ✅ includes method
• ✅ indexOf method
• ✅ every method
• ✅ filter method
• ✅ forEach method
• ✅ set.has method

We will understand each approach through the use of examples.

find method

The find function is employed to retrieve the initial element from an array that meets the specified criterion. It evaluates each item within the array and subsequently outputs the first element that aligns with the condition. In cases where the array is devoid of elements, the find function will not be operational.

Syntax:

array_name.find(function(currentValue, index, array_name), thisValue);

Following is the description of the above syntax:

function(currentValue, index, array_name): It is the function that is executed on each array's element. It accepts three arguments which are as follows:

• ✅ currentValue: It is the value of the current element.
• ✅ index: It is the number of index.
• ✅ array_name: It is the name of the array on which you are executing the function.

thisValue: This parameter is optional. It represents a value that will be utilized as the context for 'this' when the function is invoked.

Demo:

We will establish an array named "numbers" and employ the find method to identify the first element within the array that exceeds 70.

Code:

const numbers = [6,  50, 62, 45, 18, 12, 81, 90];
const greaterItem = numbers.find(item => item > 60);
console.log(greaterItem);

Output:

The first item greater than 60 is given below.

findIndex method

The findIndex method is employed to return the initial index of an element within an array that satisfies a specified condition.

Syntax:

array_name.findIndex(function(currentValue, index, array_name), thisValue);

A description of the above syntax is given below:

function(currentValue, index, array_name): It is the function executed on each element of the array. It accepts three arguments which are given below:

• ✅ currentValue: It is the value of the current element.
• ✅ index: It is the index number.
• ✅ array_name: It is the array name on which you are executing the function.

thisValue: This parameter is optional. It signifies a value that is employed as the context of "this" during the execution of the function.

Example:

In this demonstration, we will employ the findIndex method to determine the index of the initial element within an array.

Code:

const numbers = [6,  50, 62, 45, 18, 12, 81, 90];
const greaterItem = numbers.findIndex(item => item > 60);
console.log(greaterItem);

Output:

The position of the initial element that exceeds 60 is provided below.

some method

The some function is employed to ascertain whether at least one element within the array satisfies the specified condition.

Syntax:

array_name.some(callback(element, index, array_name), thisArg);

A description of the above syntax is given below:

callback(element, index, array_name): It is the callback function implemented on each element of the array. It accepts three arguments which are given below:

• ✅ element: It is the value of the current element.
• ✅ index: It is the index number.
• ✅ array_name: It is the array name on which you are executing the function.

thisArg: This parameter is optional. It represents a value that is used as the context (this) when the function runs.

Example:

In this demonstration, we will employ the some method to identify an element that meets the specified criteria.

Code:

const numbers = [24, 80, 52, 74, 12, 19, 56];
console.log(numbers.some((element) => element > 40));
console.log(numbers.some((element) => element < 75));
console.log(numbers.some((element) => element > 90));

Output:

true
true
false

includes method

The includes function serves the purpose of verifying the presence of a specific element within an array. When the element is found, it yields a return value of true; if it is not found, it returns false.

Syntax:

array.includes(searchIndex, start);

A description of the above syntax is given below:

includes(searchIndex, start): This function is applied to each item within the array. It takes two parameters, which are outlined as follows:

• ✅ searchIndex: This parameter represents the value that is intended to be located.
• ✅ start: This parameter signifies the starting position and is an optional argument.

Example:

In this demonstration, we will employ the includes method to ascertain whether a specific item exists within an array. The method returns true if the item is found; otherwise, it returns false.

Code:

const arr = ['JTP', 'an', 'online', 'learning', 'platform']
console.log(arr.includes('JTP'));
console.log(arr.includes('and'));
console.log(arr.includes('on'));
console.log(arr.includes('learning'));

Output:

true
false
false
true

indexOf method

The indexOf function serves the purpose of locating the index of the initial instance of a designated search element within an array. It returns the index of the first element that matches the search; if no such element is found, it returns -1.

Syntax:

array.indexOf(element, start);

A description of the above syntax is given below:

indexOf(element, start): This function operates on every item within the array. It takes two parameters, which are described as follows:

• ✅ element: This represents the value that you intend to find.
• ✅ start: This is an optional parameter that indicates the position from which the search will commence.

Example:

In this demonstration, we will employ the indexOf method to determine the position of the initial element within the array.

Code:

const arr = ['JTP', 'an', 'online', 'learning', 'platform']
console.log(arr.indexOf('JTP'));
console.log(arr.indexOf('and'));
console.log(arr.indexOf('on'));
console.log(arr.indexOf('learning'));

Output:

0
-1
-1
3

every method

The every function is utilized to evaluate the inverse of a specified condition. If every single element within the array satisfies this inverse condition, the method returns true; if not, it returns false.

Syntax:

array_name.every(callback(element, index, array_name), thisArg);

Following is the description of the above syntax:

callback(element, index, array_name): It is the callback function that is executed on each array's element. It accepts three arguments which are as follows:

• ✅ element: It is the value of the current element.
• ✅ index: It is the index number. It is an optional argument.
• ✅ array_name: It is the name of the array on which you are executing the function. It is an optional argument.

thisArg: This parameter is optional. It represents a value that is used as the context of 'this' when the function is called.

Example:

In this demonstration, we will employ the every method to perform the inverse of the given condition.

Code:

const arr = [9, 15, 70, 21, 59, 62, 101];
console.log(!arr.every((element) => element < 30));
console.log(!arr.every((element) => element > 100));
console.log(!arr.every((element) => element < 250));
console.log(!arr.every((element) => element > 0));

Output:

true
true
false
false

filter method

The filter function serves the purpose of generating a new array that includes only those elements from a given array that meet the specified criteria. This method leaves the original array unaltered and will not perform any operations when applied to an empty array.

Syntax:

array_name.filter(callback(element, index, array_name), thisValue);

Description of the above-given syntax:

callback(element, index, array_name): It is the callback function that is executed on each array's element. It accepts three arguments which are as follows:

• ✅ element: It is the value of the current element.
• ✅ index: It is the index number.
• ✅ array_name: It is the name of the array on which you are executing the function.

thisValue: This parameter is optional. It represents the value that will be used as the context for this when the function is invoked.

Example:

We will employ the filter method to generate a new array derived from the existing array. In the event that no elements in the array meet the specified criteria, the resulting new array will be devoid of any elements.

Code:

const numbers = [45, 32, 56, 101, 75, 36, 105];
const greaterItem = numbers.filter(item => item > 70);

console.log(greaterItem);

Output:

We can observe a new array that consists of values exceeding 70.

[ 101, 75, 105 ]

forEach method

The forEach method will iterate over every element in the array. It verifies whether a specified element exists within the array. If the element is found, it outputs true; if not, it returns false.

Syntax:

array_name.forEach(function(currentValue, index, array_name), thisValue)

Description of syntax:

function(currentValue, index, array_name): It is the callback function that is executed on each array's element. It accepts three arguments which are as follows:

• ✅ currentValue: It is the value of the current element.
• ✅ index: It is the index number of the current element.
• ✅ array_name: It is the name of the array on which you are executing the function.

thisValue: This parameter is optional. It represents a value that is used as the context for this when the function runs.

Example:

We will employ the forEach function to iterate over each element present in the given array.

Code:

let num = [2, 6, 18, 21, 39];
let searched = false;

num.forEach(item => {
  if (item === 18) {
    searched = true;
  }
});
console.log(searched);

Output:

Set.has methods

These techniques are employed to locate an item within an array. Initially, an array is transformed into a Set, after which the set.has method is applied to identify the element.

Syntax:

const set = new Set(array_name);
set.has(value);

A description of the above-given syntax:

Set(array_name): This function is utilized to transform an array into a Set. The argument for this function is the name of the array.

set.has(value): This method is employed to check for the existence of a specific element within the set. It takes as an argument the value that we wish to locate.

Example:

We will employ the set.has method to locate an element within the specified array.

Code:

const cars_company = ['BMW', 'Audi', 'Mercedes-Benz', 'Ferrari'];
const carsSet = new Set(cars_company);

console.log(carsSet.has('Mercedes-Benz'));
console.log(carsSet.has('Porsche'));

Output:

true
false

Conclusion:

In this article, we have explored numerous techniques for searching through an array in JavaScript. We have examined a variety of methods to locate elements within an array, supported by practical examples. The techniques discussed include the find method, findIndex method, some method, includes method, indexOf method, every method, filter method, forEach method, and set.has methods.