Arrays

We're now going to introduce a new concept—something called an array. An array is similar to a normal variable, in that you can use it to hold any type of data. However, it has one important difference, which we illustrate below.

As we have already seen, a normal variable can only hold one piece of data at a time. For example, I can set myVariable to be equal to 25 like so

myVariable = 25;

and I can then go and set it to something else, say 35

myVariable = 35;

However, when I set the variable to 35, the first value of 25 is lost. The variable myVariable now holds just the number 35.

We can illustrate the variable using the following table:

The difference between such a normal variable and an array is that an array can hold more than one item of data at the same time. For example, we could use an array with the name myArray to store both the numbers 25 and 35. Each place where a piece of data can be stored in an array is called an element.

How do we distinguish between these two pieces of data in an array? We give each piece of data an index value. To refer to that piece of data we enclose its index value in square brackets after the name of the array. For example, an array called myArray containing the data 25 and 35 could be illustrated using the following table:

Notice that the index values start at 0 and not 1. Why is this? Surely 1 makes more sense—after all, we humans tend to say the first item of data, followed by the second item, and so on. Unfortunately, computers start from 0, and think of the first item as the zero item, the second as the first item, and so on. Confusing I know, but you'll soon get used to this.

Arrays can be very useful since you can store as many (within the limits of the language, which specifies a maximum of 2 to the power of 32 elements) or as few items of data in an array as you want. Also, you don't have to say up front how many pieces of data you want to store in an array, though you can if you wish.

So how do we create an array? This is done in a slightly different way from declaring a normal variable. To create a new array, you need to declare a variable name and tell JavaScript that you want it to be a new array using the new keyword and the Array() function. For example, the array myArray could be defined like this:

var myArray = new Array();

Note that, as with everything in JavaScript, the code is case-sensitive, so if you type array() rather than Array(), the code won't work. This way of defining an array will be explained further in Chapter 4.

As with normal variables, you can also declare your variable first, and then tell JavaScript you want it to be an array. For example:

var myArray;
myArray = new Array();

Earlier we said that we could say up front how many elements the array will hold if we wanted to, although this is not necessary. This is done by putting the number of elements you want to specify between the parentheses after Array. For example, to create an array that will hold six elements, we write

var myArray = new Array(6);

We have seen how to declare a new array, but how do we store our pieces of data inside it? You can do this when you define your array by including your data inside the parentheses with each piece of data separated by a comma. For example:

var myArray = new Array("Paul",345,"John",112,"Bob",99);

Here, the first item of data, "Paul", will be put in the array with an index of 0. The next piece of data, 345, will be put in the array with an index of 1, and so on. This means that the element with the name myArray[0] contains the value "Paul", the element with name myArray[1] contains the value 345, and so on.

Note that you can't use this method to declare an array containing just one piece of numerical data, such as 345, because JavaScript assumes that you are declaring an array that will hold 345 elements.

This leads us to another way of declaring data in our array. We could write the preceding line as

var myArray = new Array();
myArray[0] = "Paul";
myArray[1] = 345;
myArray[2] = "John";
myArray[3] = 112;
myArray[4] = "Bob";
myArray[5] = 99;

We use each element name as we would a variable, assigning them with values. We explain this method of declaring the values of array elements in the following "Try It Out" section.

Obviously, in this example the first way of defining the data items is much easier. However, there will be situations where you want to change the data stored in a particular element in an array after it has been declared. In that case you will have to use the latter method of defining the values of the array elements.

You'll also spot from the preceding example that we can store different data types in the same array. JavaScript is very flexible in what you can put in an array and where you can put it.

Before we go on to an example, note here that if, for example, you had defined your array called myArray as holding three elements like this:

var myArray = new Array(3);

and then defined a value in the element with index 130

myArray[130] = "Paul";

JavaScript would not complain and would happily assume that you had changed your mind and wanted an array that had (at least) 131 elements in it.

Try It Out – An Array

In the following example, we'll create an array to hold some names. We'll use the second method described above to store these pieces of data in the array. We'll then display this data to the user. Type the code in and save it as ch2_examp8.htm.

<html>
<body>
    
<script language="JavaScript" type="text/javascript">
    
var myArray = new Array();
myArray[0] = "Bob";
myArray[1] = "Pete";
myArray[2] = "Paul";
    
document.write("myArray[0] = " + myArray[0] + "<br>");
document.write("myArray[2] = " + myArray[2] + "<br>");
document.write("myArray[1] = " + myArray[1] + "<br>");
    
myArray[1] = "Mike";
document.write("myArray[1] changed to " + myArray[1]);
    
</script>
    
</body>
</html>

If you load this into your web browser, you should see a web page that looks something like the one shown in Figure 2-15.

How It Works

Our first task in our script block is to declare a variable and tell the JavaScript interpreter we want it to be a new array.

var myArray = new Array();

Now that we have our array defined, we can store some data in it. Each time we store an item of data with a new index, JavaScript automatically creates a new storage space for it. Remember that the first element will be at myArray[0].

Let's take each addition to our array in turn and see what's happening. Before we add anything, our array is empty. Then we add an array element with the line

myArray[0] = "Bob";

Our array now looks like this:

Then we add another element to the array, this time with an index of 1.

myArray[1] = "Pete";

Finally, we add another element to the array with an index of 2.

myArray[2] = "Paul";

Our array now looks like this:

Next, we use a series of document.write() functions to insert the values that each element of the array contains into the web page. I've accessed the array out of order just to demonstrate that you can.

document.write("myArray[0] = " + myArray[0] + "<BR>");
document.write("myArray[2] = " + myArray[2] + "<BR>");
document.write("myArray[1] = " + myArray[1] + "<BR>");

You can treat each particular position in an array as if it's a standard variable. So, you can use it to do calculations, transfer its value to another variable or array, and so on. However, if you try to access the data inside an array position before you have defined it, you'll get undefined as a value.

Finally, we change the value of the second array position to "Mike". I could have changed it to a number since, just as with normal variables, you can store any data type at any time in each individual data position in an array.

myArray[1] = "Mike";

Now our array's contents look like this:

Just to show that the change we made has worked, we use document.write() to display the second element's value.

document.write("myArray[1] changed to " + myArray[1]);