Mozilla's New Array Methods

Mozilla's New Array Methods

By Nicholas C. Zakas.

When the next version of Firefox is released later this year, it will be sporting several updates to its JavaScript engine. Since JavaScript has mostly remained stagnant since the ECMA-262, 3rd edition was released several years ago, the introduction of new features is very exciting. Part of this JavaScript upgrade directly affects the Array object, which gains several new methods.

A Brief History

The Array object has had a rather sordid and controversial past. In Netscape's original JavaScript implementation, there was no Array object, and developers were forced to create their own. When the first edition of ECMA-262 was released, it formally described an Array object with some basic functionality. Both Netscape and Microsoft implemented the specification, but shortly thereafter, the third edition of ECMA-262 was finalized and introduced even more Array object methods. While Netscape rushed to implement these new methods, Microsoft lagged behind. It wasn't until Internet Explorer reached version 5.5 that the rest of the methods were added. Since that time, there have been no changes to the Array object in any browser.

The New Methods

There are seven new Array methods that can be separated into two categories, item location methods and iterative methods. The item location methods are:

indexOf() - returns the index of the given item's first occurrence. lastIndexOf() - returns the index of the given item's last occurrence.

The iterative methods are:

every() - runs a function on every item in the array and returns true if the function returns true for every item. filter() - runs a function on every item in the array and returns an array of all items for which the function returns true. forEach() - runs a function on every item in the array. map() - runs a function on every item in the array and returns the results in an array. some() - runs a function on every item in the array and returns true if the function returns true for any one item.

It makes sense to discuss these methods within the context of these two categories.

Item Location Methods

The item location methods, indexOf() and lastIndexOf(), should be familiar to Java and .NET programmers. These methods return the index of an item's first and last occurrence an array, respectively. For example:

var aColors = ["red", "blue", "green", "orange", "purple"];
alert(aColors.indexOf("green")); //outputs "2"
alert(aColors.lastIndexOf("green")); //outputs "2"

In this example, the indexOf() method looks for the string "green" in the array aColors. Since it is the third item in the array, the method returns 2. The lastIndexOf() method also looks for "green" and returns the same value because there's only one instance of "green" in the array. If there were two or more, the results would be different:

var aColors = ["red", "blue", "green", "orange", "purple", "green", "brown"];
alert(aColors.indexOf("green")); //outputs "2"
alert(aColors.lastIndexOf("green")); //outputs "5"

Here, the lastIndexOf() method returns 5 while indexOf() returns 2. This is because the lastIndexOf() method starts searching from the end of the array while indexOf() starts from the beginning.

If "green" didn't exist in the array, both methods would return -1. Using indexOf() or lastIndexOf() in this way, you can determine if the given item is in an array, such as:

if (aColors.indexOf("brown") > -1) {
    //brown is there, act accordingly
} else {
    //brown isn't there
}

There is also an optional second argument to the indexOf() and lastIndexOf() methods, which is the index at which to begin searching the array. This is useful since an array can have more than one instance of a given item. For example:

var aColors = ["red", "blue", "green", "orange", "purple", "green", "brown"];
alert(aColors.indexOf("green")); //outputs "2"
alert(aColors.indexOf("green", 3)); //outputs "5"

The first indexOf() call returns 2 as usual, while the second returns 5 because it is instructed to begin searching at position 3. From that position, the method continues to search forward and the next instance of "green" is in position 5. The same can be done with lastIndexOf():

var aColors = ["red", "blue", "green", "orange", "purple", "green", "brown"];
alert(aColors.lastIndexOf("green")); //outputs "5"
alert(aColors.indexOf("green", 4)); //outputs "2"

In this case, lastIndexOf() is called with a second argument, specifying to start searching from position 4 and work back towards the beginning of the array. Then, the next occurrence of "green" is at position 2.

Using these methods, you can easily get all occurrences of a given item in an array by doing this:

var aNumbers = [2, 5, 9, 2, 1, 9, 8, 9, 4, 9, 2, 9];
var aIndices = [];
var iPos = aNumbers.indexOf(9);

while(iPos != -1) {
    aIndices.push(iPos);
    iPos = aNumbers.indexOf(9, iPos+1);
}

alert("The number 9 was found in positions " + aIndices);

This example finds the first occurrence of the number 9 in an array, then continues to look for more by using the second argument of the indexOf() method. Each index of the number 9 is added to the aIndices array so in the end, you have an array of positions.

Created: March 27, 2003
Revised: August 12, 2005

URL: https://webreference.com/programming/javascript/ncz/column4/1