If JavaScript variables can be compared to the bucket on an excavator – a big, powerful, simple container that carries data in a single undifferentiated mass – then arrays are more like ice cube trays: containers that carry data in little separate “slots”.

Variables and arrays are not entirely distinct; arrays just a special form of variable, and should be declared as such:

var terminator_models = [];

Or more explicitly:

var terminator_models = new Array();

Both are similar, although they have subtle differences. In the examples above, they produce the same result: an empty array named terminator_models. The second option, using a Array constructor, provides the possibility of passing a length parameter to pre-determine the number of slots in the array:

var terminator_models = new Array(3);

If you already know the data that will be in the array, you can declare that on initialization:

var terminator_models = [ 'T-800', 'T-850', 'T-1000', 'T-1001', 'T-X' ];

An array can contain most anything: booleans, numbers, strings, functions, objects, other arrays, regular expressions, or a mixture of all of these. An example of an array that stores numbers:

var terminator_movies_dates = [ 1984, 1991, 2003, 2009];

Indexing Arrays

By default, the first slot in an array is indexed at 0, a fact that often confuses new coders. In the console we could enter the following:

var terminator_actors = [ 'Arnold Schwarzenegger', 'Robert Patrick', 
'Kristanna Loken', 'Summer Glau', 'Shirley Manson', 'Garret Dillahunt' ];
> terminator_actors[0];
"Arnold Schwarzenegger"

You can also use dot notation (i.e. terminator_actors.0) to reference an element in an array, although it comes with several conditions and exceptions that make doing so inadvisable.

JavaScript does not formally support associative arrays, i.e. labelling the slots with names. However it can be fooled into such, as arrays are also objects, a possibility I’ll discuss in another article.

Length

There are many array methods, all of which I’ll cover in future articles. The most fundamental is the question of how many elements the array contains:

> terminator_actors.length
6

Note that length is not merely a read-only value: it can also be set. Adding new elements to the array will increase length; conversely, setting a array’s length to a number less than its population will purge entries after that point:

> terminator_actors;
[ 'Arnold Schwarzenegger', 'Robert Patrick', 'Kristanna Loken', 
'Summer Glau', 'Shirley Manson', 'Garret Dillahunt' ]
> terminator_actors.length = 4;
> terminator_actors;
["Arnold Schwarzenegger", "Robert Patrick", "Kristanna Loken", 
"Summer Glau"]

Array-Like Objects

Perhaps the most confusing aspect of all of this is that some things in JavaScript look and act like arrays, but are not actual “true” arrays. A good example is getElementsByTagName. Let’s say you have the following page:

<p>Silence. Gradually the sound of distant traffic becomes audible.
<p>A LOW ANGLE bounded on one side by a chain-link fence and on the other 
by the one-story public school buildings.
<p>Spray-can hieroglyphics and distant streetlight shadows.  This is a Los 
Angeles public school in a blue collar neighbourhood.

To which we apply this JavaScript:

var p = document.getElementsByTagName("p");

For all intents and purposes, p will look and act like an array: it even has a length, and we can iterate over it. Yet some array methods won’t work on it at all:

> p.push("test");
> TypeError: undefined is not a function

The new developer has to be careful when dealing with array-like structures: many array methods will work on them, but not all. I’ll clarify these distinctions in future articles.

Photograph by Daniel Mennerich, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.