Searching Through an Array

Searching Through an Array

Problem

You want to search an array for a specific value and get the array element index if found. 

Solution

Use the Array methods indexOf() and lastIndexOf():

var animals = new Array("dog","cat","seal","elephant","walrus","lion");
console.log(animals.indexOf("elephant")); // prints 3

EXPLAIN

Though support for both indexOf() and lastIndexOf() has existed in browsers for some time, their use wasn’t standardized until the release of ECMAScript 5. Both meth‐ ods take a search value that is then compared to every element in the array. If the value is found, both return an index representing the array element. If the value is not found, –1 is returned. The indexOf() method returns the first one found, the lastIndex Of() returns the last one found:

var animals = new Array("dog","cat","seal","walrus","lion", "cat");
console.log(animals.indexOf("cat")); // prints 1
console.log(animals.lastIndexOf("cat")); // prints 5

Both methods can take a starting index, setting where the search is going to start:

var animals = ["dog","cat","seal","walrus","lion", "cat"];
console.log(animals.indexOf("cat",2)); // prints 5
console.log(animals.lastIndexOf("cat",4)); // prints 1

If your interest goes beyond just finding an exact match, you can use the ECMAScript 6 (ES 6) Array method findIndex(), providing a function that tests each array value, returning the index of the array element when the test is successful. An example use of findIndex() is the following, using the new method to find an array element whose value equals or exceeds 100:

var nums = [2, 4, 19, 15, 183, 6, 7, 1, 1];
var over = nums.findIndex(function(element) {
 return (element >= 100);
});
console.log(nums[over]);

A comparable ES 6 Array method is find(), which does the same process but returns the value of the element that successfully passes the given test. Both methods take a callback function, and an optional second argument to act as this in the function. The callback function has three arguments, the array element, index, and array, itself, but only the first is required. Neither method mutates the original array.

Array Literal or Array Object Instance?

The solutions demonstrated in this recipe show two different ways of creating an array: creating an instance of an Array object, or assigning an array literal. So, which is better? As with most of JavaScript, the answer is, it depends. An array literal is simpler to create and takes less space in the file. Some JavaScript developers would say it looks more elegant, too. When you use the Array object con‐ structor, the JavaScript engine has to spend more time understanding exactly what it is that you want to do: you’re creating an object, OK, what kind of object, and so on. However, if you use an array literal in a function, JavaScript instantiates the array each time the function is called. And, if you need to create a specifically sized array, you should use the Array contructor. Tools such as JSLint will complain if you use the Array constructor, as will as most JavaScript developers. Based on this, I use array literals, but its use isn’t inherently wrong.