Working with JavaScript variable arrays

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, September 2008.

JavaScript variable arrays

JavaScript (JS) variable arrays in their simplest form are an indexed list of more than one JS object. A JS array can contain any type of JS object, and any combination of types of JS objects, even other arrays.
For information about JS objects, see Understanding JavaScript Objects.
For information about JS variables, see Understanding JavaScript Variables.

JS Array declaration, sizing, and initialization

Empty JS arrays are declared using the JS object keyword "new", followed by the JS "Array()" prototype declaration, and are assigned and stored within a JS variable:

var aryUnsized = new Array(); //creates a 0 element empty array object

You can name JS arrays anything you want (except for using JS reserved words and prohibited characters), however, a logical naming convention makes for easier human readability of your script, and a greater chance of making less mistakes during script writing and maintenance.

Tip

You will observe that all the example scripting in this topic uses a naming convention that provides a logical context to the array name, and precedes the name with "ary". In the same naming convention, all variables are preceded with "var", and objects with "obj". The immediate benefit of adopting such a naming convention, is that you instantly know what you're dealing with as you work with your scripts, without having to remember the assigned object type.

The number of elements in an empty JS array can be declared by providing a numeric value as the single parameter in the JS "Array()" prototype declaration:

var aryPresized = new Array( 7 ); //creates a 7 element empty array object

Similarly, the number of elements in a JS array can alternatively be declared by providing a variable which can equate to a numeric value for the single parameter in the JS "Array()" prototype declaration:

var varPresize = 7; //creates a variable object and assigns it the value 7
var aryPresized = new Array( varPresize ); //creates a 7 element empty array object

The elements in a single dimension JS array can be declared by optionally providing a series list of comma separated data items as multiple parameters in the JS "Array()" prototype declaration:

var aryPresized = new Array( 1, 2, 3 ); //creates a 3 element array and assigns it values

JS arrays can also be declared using a shorthand declaration of square brackets which can optionally contain a series list of comma separated data items to store in the array:

var aryVar = []; //creates an empty array
var aryNum = [ 1, 2, 3 ]; //creates array with 3 elements and assigns element values
var aryText = [ "a", "b", "c", "d", "e" ]; //creates 5 element array and assigns values

Previously defined JS arrays can be assigned as elements of another JS array:

var arySingle = [ aryVar ]; //creates a single element array and assigns an array to it

Multiple element JS arrays can be declared in the same shorthand statement, when separated by commas:

var aryMulti = [ aryNum, aryText ]; //creates and assigns a multiple element array
var aryMultiPlain = [ [], [], [] ]; //creates an empty multiple element array
var aryMultiMix = [ [], [1, 2, 3], ["a", "b", "c", "d", "e"] ]; //creates and assigns
//a multiple element array with multiple element arrays and assigns those elements too

JS Arrays have one property, the count of array elements, called the length property. You access the length property of the array object by using dot notation:

var varMultiCount = aryMulti.length;
var varPlainCount = aryMultiPlain.length;
var varMixCount = aryMultiMix.length;
var msg = "Multiple array element count: " + varMultiCount;
msg += "\n" + "Plain array element count: " + varPlainCount;
msg += "\n" + "Mixed array element count: " + varMixCount;
alert(msg);

Accessing JS arrays

Each element in a JS array has a unique sequential index number. You access the individual elements of a JS array using the index number of that element in the array. JS Arrays are zero-based, which means that their index numbering starts at zero. Therefore, the index numbering will always be one less than the count of elements in the array. For example, in an array with two elements, the index numbers for those elements are 0 and 1. Likewise, for a 10 element array, the indexing will range from 0–9.

alert(aryNum[0]); //retrieves the first (Oth) element from the array and displays it

 

Who am I? > find out more