JavaScript Arrays
In Introducing JavaScript Variables and JavaScript Variable Types we looked at storing data (such as numbers, strings and boolean true or false values) in memory locations known as variables. The variable types covered in those chapters were useful for storing one value per variable. Often, however, it is necessary to group together multiple variables into a self contained object. This is where the concept of JavaScript Arrays comes in.
What is a JavaScript Array
A JavaScript array is an object that contains a number of items. Those items can be variables (such as strings or numbers) or even other objects (such as Image objects or custom objects which you as a JavaScript developer have created). Once you have grouped all the items into the array you can then perfrom tasks like sorting the array items into alphabetical or numerical order, accessing and changing the value assigned to each array item and passing the group of items as an argument to a JavaScript function (see Understanding JavaScript Functions) by passing just the array object.
In this chapter we will look in detail at how to create and manipulate JavaScript arrays.
How to Create a JavaScript Array
A new instance of a JavaScript array object is created in the same way as any other object in JavaScript suing the new keyword. For example we can create a new array object instance called myColors as follows:
var myColors = new Array();
We can also specifiy the intial size of the array when we create it by passing through the number of elements that we require the array to hold as an argument to the Array() object constructor. For example, to intialize an array to hold 7 items:
var myColors = new Array(7);
Note: An array will grow automatically as new items are added so it is not necessary to specifiy at creation time the number of elements you believe the array will need. The decision as to whether to pre-allocate the initial size of the array is typically one of memory and speed. A mission critical application that needs to store a large amount of data in an array may not want the delay associated with waiting for the size of the array to be increased each time a new item is added. In this situation the array would be pre-initialized by specifying an initial size. This then has the trade-off that a large amount of memory may be taken up and not used right away. In practice it is usually acceptable to let array grow as items are added.
Initializing the Elements of an Array
before looking at how to add items to an array it is important to understand how arrays are index. the first item in an array is item 0, the second is item 1 and so on.
There are a number of different ways to initialize an array. One way is to specify the intial items at creation time by passing through the items as arguments to the the Array() constructor:
var myColors = new Array ("Red, "Green", "Blue", "Indigo", "Violet");
Another mechanism is to assign an item to each array element slot using an index value surrounded by square brackets:
var myColors = new Array(); myColors[0] = "Red"; myColors[1] = "Green"; myColors[2] = "Indigo"; myColors[3] = "Violet";
Any time you need to change the value of an array elemt the same approach applies. For example to change the second elemt of the array from "Green" to "Yellow":
muColors[1] = "Yellow";
Accessing the Elements of a JavaScript Array
Any element of an array can be accessed by referencing the index into that array. For example the following JavaScript will display the 3rd element of our myColors array (remembering that the first element is index 0) and display the string "Blue":
var myColors = new Array ("Red, "Green", "Blue", "Indigo", "Violet");
document.write ( myColors[2]);
Often, however, it is necessary to access each element in an array. While writing code to access each item one by one is accepbtable for an array with one a few items this becomes difficult for larger arrays. Fortunately thre are a couple of ways to loop through all the items in the array.
One way is to create a for loop (see
