How to Search Arrays in JavaScript

  • 5 min read
  • November 29, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

A JavaScript Array is a special kind of Object.

Each value in the array is called an item, and together they form an indexed list of values.

There are various Array methods which enable us to search arrays, each of which returns a different type of data:

  • We can search the array for a single value, returning that value to the caller
  • We can return a given value’s index in the array
  • We can return a Boolean value indicating presence in an array
  • We can return a new array with one or more values from the original

This article provides a short introduction to these methods.

Is an item included in an array?

If you want to know whether an array includes a certain item, you can use the includes() method:

const furniture = ['table', 'chair', 'cupboard', 'wardrobe', 'stool'];
console.log(furniture.includes('chair'));
// Expected output: true

This method returns a Booleantrue if the item is included in the array, and false if it is not.

Important: the comparisons performed by includes() are case sensitive!

For example, searching the above array for “Chair” (with a capital C) returns false, due to the difference in case:

console.log(furniture.includes('Chair'));
// Expected output: false

As a result, it is considered best practice to ensure String values in an Array are lower-case. Additionally, you should convert any strings used for searching to lower-case equivalents by using the toLowerCase() method when working with String-based search methods. This will ensure the data you are searching with is in lowercase as well.

Does an item satisfy a given condition?

What if you want to search the array for a value based upon a characteristic of the value, rather than something specific? For example, let’s say you are looking to search the array for a positive number – it does not matter which number is returned, so long as the value is positive. For this, you can use the find() method and provide the required search condition as an argument:

const numArray = [-7, -4, -2, 0, 5, 12];
const firstPosNum = numArray.find(item => item > 0);
console.log(firstPosNum); // Expected output: 5

The above example uses the find() method to locate the first element in the Array that is greater than zero – in this case, the value 5. If none of the items in the array meet the specified condition, the find() method returns undefined.

Note: The find() method returns the first item which satisfies the condition.

If you wish to retrieve all of the items in the array which satisfy the provided condition, use the filter() method instead:

const filtered = numArray.filter(item => item > 0);
console.log(filtered); // Expected output: [5, 12] 

The filter() method returns an array with all of the items that satisfy the provided condition.

If no matching elements of the array are found, filter() returns an empty array.

For more information about the filter() method follow this link.

If you wish to simply return a Boolean value based on the provided condition, there are two different approaches you can use:

1. Array.prototype.some()

The some() method returns true if one or more items in the array satisfy a condition:

console.log(numArray.some(item => item > 0));
// Expected output: true

In the above example, since two items are greater than zero, true is returned.

2. Array.prototype.every()

The every() method, on the other hand, returns true only if all of the items in the array satisfy a condition:

console.log(numArray.every(item => item > 0));
// Expected output: false

In the above example, since four items fail to meet the condition, false is returned.

Get the index of a certain item

To retrieve the index of a specific item in the array, use the indexOf() method:

const furniture = ['table', 'chair', 'cupboard', 'wardrobe', 'stool'];
console.log(furniture.indexOf('table'));
// Expected output: 0

The indexOf() method returns the index of a provided item if it exists in the array.

In the example above, the code uses indexOf to find the location of the value “table”. As table is the first on the list, indexOf() returns the first index of the array: zero.

Note: If indexOf cannot find an instance of the requested item, the method returns -1.

Important: just like the find() method, indexOf() is also case-sensitive:

console.log(furniture.indexOf('Table'));
// Expected output: -1

The indexOf() method can receive a second parameter, specifying the index from which the search should begin. This may prove useful if a given value appears in the array more than once. In addition to this optional parameter, JavaScript provides the lastIndexOf() method – this method returns the index of the last occurrence of a value in the array.

const furniture = ['table', 'chair', 'cupboard', 'table', 'wardrobe', 'stool'];
console.log(furniture.lastIndexOf('table'));
// Expected output: 3

The above example updates the furniture array to have another element named table at index 3. In the above array, the last occurrence of table in the furniture array is at index 3, resulting in lastIndexOf() returning the value 3.

 

Related Articles:

JavaScript – Arrays Explained

JavaScript – How to Use the Array length Property

JavaScript – How to Use Array reduce Method

 

Related Posts

How to Change CSS Using JavaScript

How to Change CSS Using JavaScript

Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in

How to Use the for…in Statement in JavaScript

How to Use the for…in Statement in JavaScript

The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement

How to use the for…of Statement in JavaScript

How to use the for…of Statement in JavaScript

The for…of statement was introduced in ECMAScript2015 (ES6) and adds a powerful new type of loop to JavaScript. JavaScript offers many different types of loops, each