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:
1 2 3 4 5 6 7 8 9 |
function elementexists(){ var ele_index = arr_indexof.indexOf(2); alert (ele_index); } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function elementexists(){ var selectedState = document.getElementById("selectstate").value; var USStates = ["New York", "Texas", "Florida","Alaska"]; var arrsearch; arrsearch = USStates.indexOf(selectedState); if (arrsearch != -1){ alert ("The State exist in Array and its index is: " +arrsearch); } else{ alert("The State does not exist in array!"); } } |
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:
1 2 3 4 5 |
function elementexists(){ var ele_index = arr_indexof.lastIndexOf(1); alert ("Index of element 1 = " + ele_index); } |
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.