Learning JavaScript

JavaScript Arrays

There’s an interesting little fact about JavaScript: if there’s an object, there’s also a literal. As shown in the last few chapters, there’s a String object and string literals; the same is true of Boolean and boolean, and Number and numbers. We also used this with regular expressions, and rarely referenced the RegExp object directly in the examples. This same object/literal relationship holds true with arrays.

Constructing Arrays

A JavaScript array is an object, just like String or Math. As such, it’s created with a constructor:

var newArray = new Array('one','two');

An array is also a literal value, which doesn’t require the explicit use of the Array object:

var newArray = ['one','two'];

In this latter case, the JS engine converts the literal to an object of type Array, assigning the result to the variable. Once created, array elements can be accessed by their index value—the number representing their location in the array:

alert(newArray[0]); // outputs one

Array indexes start at 0 and go up to the number of elements, minus 1. So an array of five elements would have indexes from 0 to 4.

Arrays don’t have to be one-dimensional. It’s not uncommon to have an array in which each element has multiple dimensions, and the way to manage this in JS is to create an array where each element is an array itself. In the following code snippet, an array of three-dimensional values is created:

var threedPoints = new Array(  );
threedPoints[0] = new Array(1.2,3.33,2.0);
threedPoints[1] = new Array(5.3,5.5,5.5);
threedPoints[2] = new Array(6.4,2.2,1.9);

If the inner array contains the x-, y-, and z-coordinates in order, then accessing the z-coordinate of the third point can be managed with the following code:

var newZPoint = threedPoints[2][2]; // remember, arrays start with 0

To add array dimensions, continue creating arrays in elements:

threedPoints[2][2] = new Array(4.4,4.6,44) // and so on
var newthreedZPoint = threedPoints[2][2][1];

The number of elements for an array doesn’t have to be known ahead of time. As the examples demonstrate, you can create an array with so many elements in the array declaration, or just add elements as you go along. You can also set the size of an array by adding its nth or last element, first:

var testArray = new Array(  );
testArray[99] = 'some value'; // testArray is now an array with 100 elements

To find the length of an array (number of elements), use the Array property called length:

alert(testArray.length); // prints out 100

If you access the length of a multiple-dimension array, you’ll get only the number of elements for a particular dimension:

alert(threedPoints[2][2].length); // prints out 3 
alert(threedPoints[2].length); // prints out 3
alert(threedPoints.legnth); // prints out 3

In addition to length, there are a few other properties of interest and several methods on the Array object. One such is splice, which allows you to insert and/or remove from an array—a rather handy method to have. In the following code snippet, splice adds two elements and removes two, starting at index 2 (the third element):

var fruitArray = new Array('apple','peach','orange','lemon','lime','cherry');
var removed = fruitArray.splice(2,2,'melon,banana');
document.writeln(removed + "<br />");
document.writeln(fruitArray);

This code generates the following two lines:

orange,lemon
apple,peach,melon,banana,lime,cherry

The removed elements are returned as an array from the splice method call.

The slice method slices an array and returns the result:

fruitArray.slice(2,4); // returns an array of 3 elements: melon, banana, and lime

The concat concatenates one array onto the end of the other:

var newFruit = fruitArray.concat(removed) // returns an array of apple,peach,melon,banana,lime,cherry,orange,lemon

Neither concat nor slice alter the original array. Instead, they return an array containing the results of the operation.

In the examples, I’ve been printing out the arrays directly. What the JavaScript engine does is convert the arrays to a string, using a default separator of a comma (,). If you want to designate a different separator, use the join method to generate a string:

var strng = fruitArray.join(  )

You can also reverse the order of the elements in an Array using the reverse method:

fruitArray.reverse(  );

In many cases, the exact order of the elements in an array is unimportant. There are times, though, when you want to have the order preserved, such as when the array serves as a queue. There are also several methods useful for maintaining arrays as queues or lists, which we’ll look at next.

FIFO Queues

Arrays can be used to track a queue of items, where each is added FIFO (first in first out). There are four handy Array methods that can maintain queues, lists, and the like: push, pop, shift, and unshift.

The push method adds elements to the end of an array, while the unshift method adds elements to the beginning of the array. Both return the new length of the array.

The pop method removes the last element of the array, while the shift returns the first element. Both return the element retrieved from the array.

All four methods modify the array—either adding or removing elements, permanently, from the array. Example 4-10 demonstrates how a FIFO queue can be maintained in JavaScript.

Example 4-10. FIFO queue using Array methods

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FIFO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
//create FIFO queue and add items using push
var fifoArray = new Array(  );
fifoArray.push("Apple");
fifoArray.push("Banana");
var ln = fifoArray.push("Cherry");

// print out length and array
document.writeln("length is " + ln + " and array is " + fifoArray + "<br />");

// use pop to pop the items off the array
for (var i = 0; i < ln; i++) {
   document.writeln(fifoArray.shift(  ) + "<br />");
}

// print out length
document.writeln("length now is " + fifoArray.length + "<br /><br />");

// now, same with shift and unshift
var fifoNewArray = new Array(  );

fifoNewArray.unshift("Learning");
fifoNewArray.unshift("Java");
ln = fifoNewArray.unshift("Script");

document.writeln("length is " + ln + " and array is " + fifoNewArray + "<br />");

// unshift
for (i = 0; i < ln; i++) {
  document.writeln(fifoNewArray.pop(  ) + "<br />");
}
document.writeln("new length is " + fifoNewArray.length );i
//]]>
</script>
</body>
</html>

The first thing to notice in this example is that I’ve paired shift and push, and unshift and pop. The reason for this is the order in which these methods work. The push method adds an element to the end of an array, and as each new element is added, it pushes the first elements to the front of the array. The pop method removes the items from the end of the array first, creating a LIFO list (last in first out)—a perfectly legitimate queue, but not what we’re after with the program. We want the first element added to be the first element retrieved. The shift method removes elements from the top of the array, which does suit our needs.

The same applies to unshift and pop. The unshift method adds items to the top of an array, each new item pushing the older ones further down the list, while pop removes them from the bottom of the queue first. This again maintains the order of items, and this is what we’re after—not the order of the array elements themselves, but the order in which they’re added.

The result of running this JavaScript is:

length is 3 and array is Apple,Banana,Cherry
Apple
Banana
Cherry
length now is 0

length is 3 and array is Script,Java,Learning
Learning
Java
Script
new length is 0

Example 4-10 also demonstrates how for loops can traverse an array. Rather than have to individually write out each shift or pop method call, I iterated through the same call the same number of times as elements in the array. This example is small, but you can imagine how much of a timesaver this can be with a larger array.

Typically when traversing an array with a for loop, the variable that’s adjusted with each loop is incremented (or decremented when counting down) and used as an array index:

for (var i = 0; i < someArray.length; i++) {
    alert(someArray[i]);
}

However, there’s no requirement that you must use the index; it’s there if you need it. And as implied, you count down with a for loop as well as count up:

for (var i = someArray.length; i >= 0; i--) ...

As an alternative, you can use the for...in loop to access each array element:

var programLanguages = new Array ('C++','Pascal','FORTRAN','BASIC','C#','Java','Perl','JavaScript');
for (var itemIndex in programLanguages) {
   document.writeln(programLanguages[itemIndex] + "<br />");
}

There are other methods associated with the array that require the use of a callback function, which will be covered in Chapter 5. First though, let’s look at associative arrays.