How to Use the indexOf method in JavaScript

  • 3 min read
  • November 1, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

The indexOf() method is a part of the Array prototype and the String prototype, and therefore it applies to objects of both types. The method returns the first index at which a given element can be found in the Array or String, or -1 if the element being searched for was not found.

Tip: To find the last index of an element, see the lastIndexOf() method.

Array.indexOf() example

The below example shows how to use indexOf() with an array:

const fruits = ['apple', 'orange', 'banana', 'apple', 'pear'];
console.log(fruits.indexOf('apple'));
// Expected output: 0

In the example above, we scanned the fruits array for the value apple. While apple appears twice in the array, indexOf only returns the index of the first occurrence of the string. As array indices begin at zero, the value 0 is returned.

String.indexOf() example

The below example demonstrates how to use indexOf() with a string:

const str = 'How much wood would a woodchuck chuck';
console.log(str.indexOf('wood'));  // Expected output: 9

The code sample above searches the sentence stored in const str for the term wood. The first appearance of this term begins at index 9, despite there being two occurrences of the term “wood” in the string, and thus the value 9 is returned.

Syntax

The syntax for using indexOf() is as follows:

String or Array.indexOf(searchValue, fromIndex)

Let’s explore the components of this call below.

SearchValue

The searchValue parameter is the value that we wish to search for. This parameter is used somewhat differently between Strings and Arrays.

For Strings, searchValue can be any fraction of the string – even a single character.

console.log(str.indexOf('w')); //Expected output: 2

For Arrays, the comparison of the searchValue to each array element is performed using the strict equality operator (===). Thus, you must provide the exact value of the item you are searching for when searching Arrays.

console.log(fruits.indexOf('appl')); // Expected output: -1

As we see above, because we did not find an exact match the indexOf() call returned a value of -1, indicating no match was found.

fromIndex

The fromIndex parameter simply defines the index from which the search will begin.

Using this parameter enables us to locate other occurrences of a term or an item that appear after the first occurrence.

console.log(fruits.indexOf('apple', 1));  // Expected output: 3

In the example above, indexOf() will begin its search from index 1, skipping over the first “apple” in the array. As we began the search at index 1, the next occurrence of the word “apple” is returned – this occurs at index 3.

const str = 'How much wood would a woodchuck chuck';
console.log(str.indexOf('wood', 10));  // Expected output: 22

In the example above, even though the term wood does not appear independently for the second time, it is included as a part of the word woodchuck. If you add a blank space at the end of the searchValue parameter, you will limit your search to whole words, but words that are followed by a comma (or any other punctuation mark) will not be found.

Note: The indexOf() method is case sensitive.

Note: Do not confuse the indexOf() method with the findIndex() method.

Both are applicable for Arrays, but while indexOf() searches for a specific value in a given array, findIndex() uses a callback function to test whether or not an array item satisfies a condition.

 

Related Articles

JavaScript – How to Use the Array filter() method

JavaScript – How to Use the alert method

JavaScript – How to Use the slice 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