Core JavaScript 1.5 Guide:Working with Arrays

From MDC

An array is an ordered sequence of values. Unlike other languages, JavaScript does not have an explicit array data type. Instead, it provides an Array object which can be instantiated directly or using array literal notation.

The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the length of the array. JavaScript also provides useful array literal syntax for creating these objects.

[edit] Creating an array

Arrays can be created using either literal syntax (generally preferred) or the Array constructor (which may also be called as a function, with exactly the same behavior):

var colors = ["Red", "Green", "Blue"];
var colors = new Array("Red", "Green", "Blue");
var colors = Array("Red", "Green", "Blue");

Arrays have a length property, which provides access to the length of the array. If you initialize an array using one of the above examples, its length will be 3:

print(colors.length); // 3

If you know the intended length of your array at the time it is created, you can pass that length to the Array constructor:

var fiveItems = new Array(5);

Defining an explicit length has no effect on the actual capacity of the array; its only effect is to make the length property of the new array the given value. (The array itself does not have properties for indexes less than the provided value, i.e. 0 in fiveitems is false.) This variant of the constructor is rarely used.

JavaScript 1.7 introduced Array comprehensions as a shortcut for creating a new array; these are discussed below.

[edit] Working with array elements

You can populate an array by assigning values to its elements. A more verbose method of instantiating our example colors array is as follows:

var colors = []; // An empty array
print(colors.length); // 0

colors[0] = 'Red';
colors[1] = 'Green';
colors[2] = 'Blue';
print(colors.length); // 3

A common idiom for appending an element to the end of an array is to use array.length as the index:

colors[colors.length] = 'Orange';

The array.push() method can be used to the same effect:

colors.push('Purple');

Array elements are accessed by their index. Arrays are indexed base 0, so the first element in the array has 0 as its index:

var red = colors[0];

Various array methods can be used to access elements from the array in other ways. For example, the pop() method removes and returns the last element in the array:

var lastElement = colors.pop(); /* colors also has the last element removed */

[edit] Understanding length

At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name. The length property is special; it always returns one more than the highest index stored in the array:

var cats = [];
cats[30] = ['Dusty'];
print(cats.length); // 31

You can also assign to the length property. Writing a value that is shorter than the number of stored items truncates the array; writing 0 empties it entirely:

var cats = ['Dusty', 'Misty', 'Twiggy'];
print(cats.length); // 3

cats.length = 2;
print(cats); // prints "Dusty,Misty" - Twiggy has been removed

cats.length = 0;
print(cats); // prints nothing; the cats array is empty

[edit] Iterating over arrays

A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  alert(colors[i]);
}

If you know that none of the elements in your array evaluate to false in a boolean context - if your array consists only of DOM nodes for example, you can use a more efficient idiom:

var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
  /* Process div in some way */
}

This avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for added convenience.

The forEach method, introduced in JavaScript 1.6, provides another way of iterating over an array:

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
  alert(color);
});

The function passed to forEach is executed once for every item in the array, with the array item passed as the argument to the function.

[edit] Array methods

The Array object provides the following methods:

• concat joins two arrays and returns a new array.

var a1 = [1, 2, 3];
var a2 = a1.concat(['a', 'b', 'c']);
print(a2); // 1,2,3,a,b,c

• join(deliminator = ",") joins all elements of an array into a string.

var a = ['Wind', 'Rain', 'Fire'];
print(a.join(' - ')); // "Wind - Rain - Fire"

• pop removes the last element from an array and returns that element.

var a = [1, 2, 3];
var last = a.pop();
print(a); // 1,2
print(last); // 3

• push adds one or more elements to the end of an array and returns that last element added.

var a = [1, 2];
a.push(3);
print(a); // 1,2,3

• reverse reverses the order of the elements of the array, in place.

var a = [1, 2, 3, 4];
a.reverse();
print(a); // 4,3,2,1

• shift removes and returns the first element from an array.

var a = [1, 2, 3];
var first = a.shift();
print(a); // 2,3
print(first); // Alerts 1

• unshift adds one or more elements to the front of an array and returns the new length of the array.

var a1 = [1, 2, 3];
a2.unshift(4);
print(a); // 4,1,2,3

• slice (start_index, upto_index) returns a section of the array.

var a1 = ['a', 'b', 'c', 'd', 'e'];
var a2 = a1.slice(1, 4);
print(a2); // Alerts b,c,d

• splice(index, count_to_remove, addelement1, addelement2, ...) adds and/or removes elements from an array, modifying it in place.

var a = ['a', 'b', 'c', 'd', 'e'];
var removed = a.splice(1, 3, 'f', 'g', 'h', 'i');
print(removed); // b,c,d
print(a); // a,f,g,h,i,e

• sort sorts the elements of an array in place.

var a = ['Wind', 'Rain', 'Fire'];
a.sort();
print(a); // Fire,Rain,Wind

sort can also take a callback function to determine how array content is sorted. The function compares two values and returns one of three values:

• if a is less than b by the sorting system, return -1 (or any negative number)
• if a is greater than b by the sorting system, return 1 (or any positive number)
• if a and b is considered equivalent, return 0.

For example, the following will sort by the last letter of the string:

var a = ['Wind', 'Rain', 'Fire'];
function sortFn(a, b) {
  var lastA = a[a.length - 1];
  var lastB = b[b.length - 1];
  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  if (lastA == lastB) return 0;
}
a.sort(sortFn);
print(a); // Wind,Fire,Rain

[edit] Introduced in JavaScript 1.6

• indexOf(searchElement[, fromIndex) searches the array for searchElement and returns the index of the first match.

   var a = ['a', 'b', 'a', 'b', 'a'];
   alert(a.indexOf('b')); // Alerts 1
   // Now try again, starting from after the last match
   alert(a.indexOf('b', 2)); // Alerts 3
   alert(a.indexOf('z')); // Alerts -1, because 'z' was not found

• lastIndexOf(searchElement[, fromIndex) like indexOf, but starts at the end and searches backwards.

   var a = ['a', 'b', 'c', 'd', 'a', 'b'];
   alert(a.lastIndexOf('b')); // Alerts 5
   // Now try again, starting from before the last match
   alert(a.lastIndexOf('b', 4)); // Alerts 1
   alert(a.lastIndexOf('z')); // Alerts -1

• forEach(callback[, thisObject]) execute callback on every array item.

   var a = ['a', 'b', 'c'];
   a.forEach(alert); // Alerts each item in turn

• map(callback[, thisObject]) returns a new array of the return value from executing callback on every array item.

   var a1 = ['a', 'b', 'c'];
   var a2 = a1.map(function(item) { return item.toUpperCase(); });
   alert(a2); // Alerts A,B,C

• filter(callback[, thisObject]) returns a new array containing the items for which callback returned true.

   var a1 = ['a', 10, 'b', 20, 'c', 30];
   var a2 = a1.filter(function(item) { return typeof item == 'number'; });
   alert(a2); // Alerts 10,20,30

• every(callback[, thisObject]) returns true if callback returns true for every item in the array.

   function isNumber(value) { return typeof value == 'number'; }
   var a1 = [1, 2, 3];
   alert(a1.every(isNumber)); // Alerts true
   var a2 = [1, '2', 3];
   alert(a2.every(isNumber)); // Alerts false

• some(callback[, thisObject]) returns true if callback returns true for at least one item in the array.

   function isNumber(value) { return typeof value == 'number'; }
   var a1 = [1, 2, 3];
   alert(a1.some(isNumber)); // Alerts true
   var a2 = [1, '2', 3];
   alert(a2.some(isNumber)); // Alerts true
   var a3 = ['1', '2', '3'];
   alert(a3.some(isNumber)); // Alerts false

The methods above that take a callback are known as iterative methods, because they iterate over the entire array in some fashion. Each one takes an optional second argument called thisObject. If provided, thisObject becomes the value of the this keyword inside the body of the callback function.

The callback function is actually called with three arguments. The first is the value of the current item, the second is its array index and the third is a reference to the array itself. JavaScript functions ignore any arguments that are not named in the parameter list so it is safe to provide a callback function that only takes a single argument, such as alert.

[edit] Introduced in JavaScript 1.8

• reduce(callback[, initialValue) applies callback(firstValue, secondValue) to reduce the list of items down to a single value.

   var a = [10, 20, 30];
   var total = a.reduce(function(first, second) { return first + second; }, 0);
   alert(total) // Alerts 60

• reduceRight(callback[, initialValue) as reduce, but starts with the last element.

reduce and reduceRight are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.

[edit] Working with Array-like objects

Some JavaScript objects, such as the NodeList returned by document.getElementsByTagName or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The arguments object provides a length attribute but does not implement the forEach method, for example.

Array generics, introduced in JavaScript 1.6, provide a way of running Array methods against other array-like objects. Each standard array method has a corresponding method on the Array object itself; for example:

 function alertArguments() {
   Array.forEach(arguments, function(item) {
     alert(item);
   });
 }

These generic methods can be emulated more verbosely in older versions of JavaScript using the call method provided by JavaScript function objects:

 Array.prototype.forEach.call(arguments, function(item) {
   alert(item);
 });

Array generic methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:

 Array.forEach("a string", function(char) {
   alert(char);
 });

[edit] Two-Dimensional Arrays

The following code creates a two-dimensional array.

var a = [];
for (i = 0; i < 4; i++) {
   a[i] = [];
   for (j = 0; j < 4; j++) {
      a[i][j] = "[" + i + ", " + j + "]";
   }
}

This example creates an array with the following rows:

Row 0: [0,0][0,1][0,2][0,3]
Row 1: [1,0][1,1][1,2][1,3]
Row 2: [2,0][2,1][2,2][2,3]
Row 3: [3,0][3,1][3,2][3,3]

[edit] Array comprehensions

Introduced in JavaScript 1.7, array comprehensions provide a useful shortcut for constructing a new array based on the contents of another. Comprehensions can often be used in place of calls to map() and filter(), or as a way of combining the two.

The following comprehension takes an array of numbers and creates a new array of the double of each of those numbers.

var numbers = [1, 2, 3, 4];
var doubled = [i * 2 for each (i in numbers)];
alert(doubled); // Alerts 2,4,6,8

This is equivalent to the following map() operation:

var doubled = numbers.map(function(i) { return i * 2; });

Comprehensions can also be used to select items that match a particular expression. Here is a comprehension which selects only even numbers:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each (i in numbers) if (i % 2 == 0)];
alert(evens); // Alerts 2,22,30

filter() can be used for the same purpose:

var evens = numbers.filter(function(i) { return i % 2 == 0; });

map() and filter() style operations can be combined in to a single array comprehension. Here is one that filters just the even numbers, then creates an array containing their doubles:

var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [i * 2 for each (i in numbers) if (i % 2 == 0)];
alert(doubledEvens); // Alerts 4,44,60

The square brackets of an array comprehension introduce an implicit block for scoping purposes. New variables (such as i in the example) are treated as if they had been declared using let. This means that they will not be available outside of the comprehension.

The input to an array comprehension does not itself need to be an array; iterators and generators can also be used.