Making An Array

An "array" in JavaScript just refers to a group of objects that can be accessed and processed as a group. An example would be a group of images we want preloaded or a list of names we want displayed.

Once the objects are put into an array, we can use "loops" in our programming to process each item in an array with only a few lines of code. We don't have to do things one at at time.

Making an array in JavaScript is about as easy as it gets. Here's an array of names:

<script language="JavaScript">

names_array = new Array("john","martha","george","andy");

</script>

The above makes an array of names. The overall array is called "names_array". You can name the array anything you'd like. Remember that this array name is an object name, not a variable, so don't use var.

After you come up with a name, set it equal to "new Array()". This is called the "new array constructor". Now just code in whatever objects you'd like. I used names which are strings. Strings go in quotes. Also notice that all of the objects in the array are separated by commas.

That's it, you've made your first JavaScript array. It doesn't look like much now, but in the next few lessons, we'll see how grouping things in arrays can save us a lot of time and trouble.

Accessing Array Objects

Now that you've got an array, how do you get things out of it to use. It goes like this. Each object in an array is given a number beginning with 0. The first object, the string "john" in this case, can be referred to as "names_array[0]".

The string "george" can be accessed with "names_array[2]". Remember that the counting begins with zero. Also note that you use square brackets "[ ]" to contain the number of the object.

Let's make an alert() box that will display the two middle names in our array -- "martha" and "george".

<script language="JavaScript">

names_array = new Array("john","martha","george","andy");

alert (names_array[1] + ", " + names_array[2]);

</script>

Click here to see this alert() box in action. If we were to move the names around, different names would show. Objects in an array are numbered according to the order in which they are coded in the array.

This may not seem too useful now, but by associating an object with a number, we can use loops and math to manipulate the objects. That's the whole purpose behind arrays.

Array Length

Besides objects, an array has a "length" property. This property returns the number of objects in the array. This count begins at one, not zero like the array tags do. The length of our array is 4 meaning that there are four objects in the array.

Lets display our array's length in an alert() box:

alert(names_array.length);

Try it here. If we were to add names to the array, the length would increase automatically. This comes in handy when constructing loops that will work with any size array or multiple arrays.

An Alternative

There is an alternative way of making arrays that's often used when there are a lot of complex objects in the array. It assigns an array number directly and looks like this:

names_array = new Array();

names_array[0] = "john";
names_array[1] = "martha";
names_array[2] = "george";
names_array[3] = "andy;

This object assignment is easier to read and code if the objects are long strings. To use this method just make up and array name and set it equal to "new Array()" with nothing in the parentheses. Now just use the array name, square brackets, and numbers, to assign an array tag/number to each object.

In large arrays and when dealing with long string objects, the above method of assigning objects to an array can save a lot of syntax errors and debugging.

Summary & Exercises

You can make an array by making up an object name and setting it equal to "new Array()". Put the objects you want included in the array inside the parentheses separated by commas. String objects must be placed in quotes. The numbers associated with objects begin with zero.

Alternatively, you can assign objects to an array by using "array_name[number] = object" on separate lines of code - one line for each object. This method is easier to code for large arrays or arrays with long strings as objects.

Objects in an array are referenced by using the array's name and a number inside square brackets -- [ ]. Objects are numbered in the order in which they are coded in the array. If direct assignment is used -- array_name[2] = "string" -- then that object will have the assigned number.

All arrays have a "length" property that can be accessed using "array_name.length". This is the total number of objects in the array. The counting begins with one.

When beginning to work with arrays it's easy to forget that the numbering of objects begins with zero. It's also easy to confuse this with "length" which is a number of total objects beginning with 1. An array with a length of 5 would have a "[4]" as the number of the last object, not a five. The array would have 5 objects -- 0, 1, 2, 3, and 4. This takes a little getting used to.

Make some arrays of strings objects and then use "document.write(array_name[number])" to display them on a page. Change the numbers around to watch the order of the display change.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index