The JavaScript Array: Definition and Syntax

A JavaScript array is a beautiful thing. It is a little database holding any given type of information, and is easily accessible to you and your scripts. While there exists several built-in Document Object Model (DOM) arrays (arrays which reference HTML elements such forms and images), a custom JavaScript array can also be constructed, holding any information of your choosing.

Unlike built-in DOM arrays, a custom JavaScript array object is created using the array object constructer. DOM arrays are automatically initialized just because their corresponding HTML elements exist.

To understand each part of an array, we're going to examine custom arrays first. We'll look at DOM arrays more closely later in the Array Tutorial, and in the "Forms and Elements Array" lesson.

Array Object Constructor
Creating a custom array requires an initialization of an array object using the array object constructor. The array object constructor (along with a variable name assignment) looks like this:

var myScripts = new Array(4)

The array object is stored in a variable that should be named anything representative of the information it will contain. Since this array will contain names of HTML files containing JavaScripts, I've named it "myScripts". The new keyword precedes the call to the Array function (don't forget to capitalize the A!). The Array function takes an optional parameter, in this case 4, which represents the number of elements the array contains. I usually do not include it because the size of an array can be changed at any time.

Array Elements
Now take a look at the rest of the array, the 4 elements.

myScripts[0] = "documentWrite.html"
myScripts[1] = "simpleRollover.html"
myScripts[2] = "bgColorFunction.html"
myScripts[3] = "location.html"

Each piece of information is stored within an array element. Picture elements as separate rows in a single column table. Each element's "row number" is known as an array index, (array indices plural), the first element's index being zero.

Array indices serve as labels for the separate pieces of information contained in your database. Although your indices do not have to begin at zero, JavaScript will automatically create indices beginning with zero and continuing up to your starting index, assigning them a null value. The information contained by your elements can be any data type, and a single array can contain mixed data types. The elements in the "myScripts" array contain string literals.

Array Object's Length Property
A very useful property of the Array object is length. The length of an array represents the actual number of elements the array has. The length of the myScripts array is 4, since there are 4 elements. Since the first array element's index is zero, length will always be one more than the last element number. To find the last element's index without knowing how many elements there are, you can simply say:

myScripts.length-1

The statement, "myScripts[myScripts.length-1]" will return the value of myScripts[3], or "location.html".

Associative Array Notation
Associative arrays are arrays whose element indices are strings rather than numbers. An example of an associative array is the built-in images array of the document object model where each image on a page is given an HTML name.

<img src="someImage1.gif" name="dog">
<img src="someImage2.gif" name="cat">
<img src="someImage3.gif" name="mouse">

A JavaScript reference to the dog image would be:

document.images["dog"]

Assuming the dog image was the first image in the flow of the document, a reference to the dog image could also be:

document.images[0]

If the order in which an array element is accessed is important, numeric indices are probably your best bet. If a naming convention best suits your script's goal, as in the case of this tutorial's last 2 lessons, associative arrays may work better for you.

View Source | Home | Contact