JavaScript indexOf method: Explained with 5 examples to search in arrays

The indexOf method in JavaScript

If you are working with arrays in JavaScript, particularly with large arrays, there may be a scenario to find only the specific array element to accomplish a certain task.

The indexOf method, as the name shows, is used to search the index of an array element. It tells whether the array contains the given element or not. If the given element in JavaScript indexOf method is found, it will return the index number of that element.

Otherwise, the indexOf returns the -1 value.

This is how you may use the indexOf method in JavaScript:

1	var search_element = Array.indexOf(element, starting_index);

 

The indexOf method accepts two parameters. The first is the element to check if given array contains it or not. The other parameter, starting index, is optional.

This is particularly useful if searched element is expected to exists more than once. Because, if more than one occurrence of the searched element is found, the indexOf method will return only first element’s index. By using the starting_index parameter, you may specify where to start the search in the given array.

I will explain it further with an online demonstration, let me start with a simple example first.

A simple example to use indexOf JavaScript method

In this example, a simple array of five numeric elements is created. As you click the button, the indexOf method will execute where the index of element “2” will be searched and shown in an alert. See the example by clicking the image or link below:

See online demo and code

The alert shows “1” as the index number of the element. The following function of JS is executed on the click event of button:

An example if array does not contain searched element

In this example, an element is given in indexOf method that does not exist in the specified array. The same array is used as in above example.

See online demo and code

You see, I used element “6” to check whether given array contains it or not. As this element does not exist, it returned -1.

You may perform a certain action based on this value e.g. showing the user a message that given search term does not exist.

An example of specifying the starting index

To demonstrate the starting index parameter, an array is created with six elements. The element which is specified in the JavaScript indexOf method exists twice. First have a look at the output without using the start_index parameter. The array is:

var arr_indexof = [1,2,3,4,5,1,6];

See online demo and code

Now, have a look at the output as I specified the starting index 3 in the indexOf method.

See online demo and code

This is how the indexOf method is used in above example with start index:

1	var ele_index = arr_indexof.indexOf(1,3);

 

It started searching the element “1” from index 3. So the first occurrence at position 0 was ignored and alert is showing “5”, which is the second occurrence.

An example to search array of strings

In this example, an array of US States name is created. After selecting a State name from the dropdown, click on the button to see if that State name is contained in that array or not.

Upon clicking the button, the indexOf array method will execute that will search the user selected State name and return a value. If the State name is found, it will be index number, otherwise, it will return -1.

See online demo and code

You saw the alert is showing a more descriptive message if State exists or not. This is how the indexOf method is used in demo:

An example of using the lastIndexOf method

In above examples, the element search started from the 0 index i.e. start of an array by using the indexOf method. If you require starting search the element from the end of an array then you may use the lastIndexOf method of JavaScript.

See the following example, where I am using the same array as created in above example; with repeated elements. The occurrence of element “1” is twice, however, the lastIndexOf method is used. See the output and difference between the two methods:

See online demo and code

This is how the lastIndexOf method is used in the example:

You see, the element “1” is present at 0 and 5 indexes. However, the lastIndexOf searched from the last i.e. 5, unlike the indexOf method that returned 0.