Array Definition and Syntax

Array definition and syntax

Arrays are a beautiful thing. They are little databases filled with information determined by you, and are at you and your scripts' disposal. Each piece of information in the database is stored in what is called an "element" of the array.

The array object constructor looks something like this:

var myScripts = new Array(4)

The above statement declares an array named, "myScripts" which contains 4 elements. The parameter, "4", which represents the number of elements the array contains, is optional.

Each piece of information is stored in the individual elements of an array. Each element number is referred to as an array index and begins with zero. Think of array indices as slot numbers which 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 always create indices which begin at zero and assign them a null value if they are not initialized by you. The information contained by your elements can be any data type, and a single array can contain mixed data types. The elements in the example below contain string literals. Elements are written as follows:

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

The above syntax is known as simple array notation. Another way to write the same array in shorthand is known as a dense array, where the elements are separated by commas and the indices are assumed chronologically:

var myScripts = new Array("documentWrite.php","simpleRollover.php","bgColorFunction.php","location.php")

The elements of both arrays are referenced the same way:

document.write(myScripts[0]) // prints "documentWrite.php"
document.write(myScripts[3]) // prints "location.php"

Array.length
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.php".

Associative Array Notation
Associative arrays are arrays whose element indices are actual names 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]

Parallel Arrays
Parallel arrays are 2 or more arrays whose corresponding element indexes contain related information. An example of a parallel array that goes along with the myScripts array would be an array holding folder names. Each element of the folder array would be the name of the folder containing each file in the myScripts array:

var myFolder = new Array()
myFolder[0] = "docWrite/"
myFolder[1] = "rollover/"
myFolder[2] = "functions/"
myFolder[3] = "location/"

Used together, the myFolder and myScripts arrays could be used to change the URL:

location.href = myFolder[1] + myScripts[1] // set location to "rollover/simpleRollover.php"

Multi-Dimensional Arrays
Multi-Dimensional Arrays are arrays whose elements are themselves arrays. You can build a multi-dimensional array as deep as you want, but they can be as unreadable and confusing as they are useful. Take a look at a piece of the multi-dimensional array used to generate the links on this site:

var week = new Array()

week[1]= new Array("TUTORIAL 1",
                   new Array("How To Use This Site",
                             new Array("Build A JavaScript Library","howto.php")
                             ),
                   new Array("Introduction to JavaScript",
                             new Array("How to Learn JavaScript","jsIntro1.php"),
                             new Array("Objects, Properties and Methods","jsIntro2.php"),
                             new Array("Two Parts to Scripting, The Dot Syntax","jsIntro3.php")
                             )

                  )

A simple reference to the topmost array is simply week[1].

A reference to a part of the topmost array beginning at a second level array (there are 3 second level arrays in this example because week[1] contains 3 elements which happen to be arrays) requires another set of square braces containing the index of the desired array: week[1][2].

Specifying a bit of information beginning at a third level array requires another set of square braces containing the desired index: week[1][2][3]. Zeroing in even further: week[1][2][3][0].

You can even specify a single character in the string literal value of a nested array because a string literal itself is considered an array, and each character of the literal an element of it (we will discuss strings in depth later on): week[1][2][3][0].charAt(37)

Its probably best to stick with simpler arrays in the beginning. :-/

***If you are building a library for yourself, create an array similar to the example but with the names of the files you've created. Save the array in an external javascript file (with a ".js" extension). Link the .js document to each file you've created, and to all future files (see When and How for a refresher). This is the beginning of your JavaScript powered navigation system. Remember to update your array each time you create a new file for your Library.