[main] [misc] [graphics] [page design] [site design] [xhtml] [css] [xml] [xsl] [schema] [javascript] [php] [mysql]

HVCC Home
Blackboard HVCC
Blackboard Manual
Faculty Association

javascript main
1. javascript basics
2. core javascript
3. js statements
4. js functions
5. js arrays
* a. defining js arrays
b. using js arrays
c. js array methods
6. js objects
7. debugging js
8. js client side
9. the js bom
10. js frames and windows
11. js forms
12. js regexp
13. js cookies
14. basic dhtml


print version

Note that all external links will open up in a separate window.

This is a stripped down version of these pages for older browsers. These pages are really meant to be viewed in a standards compliant browser.

Directions for surfing with audio.

Defining Arrays

These tutorials are about JavaScript and its use for client-side Web programming.

Arrays

array: a composite data type that holds a collection of data elements than can be referenced by their index number

An array is a composite data type that stores a collection of values. These values can then be referenced by an index number.

The index number is the location of the data element in the array. Think of it as a big box with numbered sub-compartments that you can put things in. You can then say that the thing you are looking for is in the compartment the bears the desired number, such as number six.

Each stored value so indexed is referred to as an array element.

Each element is a discrete data value. An element can contain most anything, including another array. Aside from being stored in the same array, the data elements don't have to have anything to do with each other. Since JavaScript is untyped, the elements can even be of different data types.

Don't let this flexibility distract you from the fact that arrays exist to organize groups of data into a single data element. This normally makes collections of data easier to work with, as well as clarifying their relationship.

Creating Arrays

There are a few different ways to create an array. The first three involve the Array( ) constructor, and the last is the array literal.

The Array Constructor

The arrays constructor is used on the right hand side of a combined variable declaration and assignment statement. It takes the following form:

var aName = new Array( );

If you declare a variable to be an array and do not pass any arguments with the Array( ) constructor, you create an empty array with no elements. Since JavaScript arrays are dynamic, this is not a problem.

Dynamic just means you don't have to tell JavaScript in advance how large the array will be.

// single argument method
var aName = new Array(6);

If you declare a variable to be an array and pass a single integer as an argument with the Array( ) constructor, you create an array with the specified number of elements. None of the elements have any value assigned to them.

The code above creates an array with six elements, all of which have a value of undefined.

What this method does is set the length of the array to the value specified.

You can check the array length by testing the value of arrayName.length, where arrayName is replaced by the name of the array to be tested.

// multiple argument method
var aName = new Array(20, 1, 7, 'top', 'love');

If you declare a variable to be an array and pass more than one arguement with the Array( ) constructor, you create an array with the number of elements being equal to the number of data values specified.

Each element will have the value specified in the list for that position. The above array will have five elements with the first element having a value of 20 and the fifth element having a value of "love".

This technique does not work in JavaScript 1.2.

What happens if you want to create an array that just has one integer element ? The answer is that you can't, at least not with the Array( ) constructor.

Since you can have empty elements, so you can just use Array(7,''), or you can define the array to have a length of one and then assign a value in the next step, or you can use an array literal.

Array Literals

Instead of using the Array constructor, an array literal allows you to assign an array of values directly to a variable. This is done by including those values in square brackets in the declaration and assignment statement.

var aName = [20, 1, 7, 'top', 'love'];

Whenever you assign a list of values enclosed in square brackets to a variable in a variable declaration statement, JavaScript assumes that you are declaring an array. This allows various array tricks.

  • You can pass it undefined values by passing nothing between the commas in a comma separated list.
  • You can create an array of length 1 with an integer value defined at the time of declaration.
  • You can assign an array of values to an existing variable. Tihs will overwrite the previous value.
// array with undefined values
var aName = [1,,3,,5];

// array with length of 1
var aName = ['bob'];

// array assigned to an existing variable
var aName = 752;
aName = [1,2,3,4,5];

You should try to use the Array constructor instead of array literals when possible. If nothing else, it makes your code much easier to read. Easy to read code tends to hide fewer mistakes.

Multi-Dimensional Arrays

JavaScript doesn't actually have support for multi-dimensional arrays, but you can nest arrays. For most programming purposes, nested arrays are equivalent to multi-dimensional arrays. Therefore we are not going to worry about the differences between them here.

To create a nested array, you just define an array element as being an array.

var outerA = new Array();
outerA[0] = new Array();
outerA[1] = new Array();
outerA[2] = new Array();

When using array literals, the same effect can be achieved by nesting square brackets.

var aName = [[1,2,3],['a','b','c']];

// is the same as

var aName = new Array();
aName[0] = [1,2,3];
aName[1] = ['a','b','c'];

[top]