We have seen variables created using the var keyword. We used these to store numbers and strings. Arrays are a way that we can store lots of related values in one convenient and manageable entity.

Array Acacia Avenue

Forget all this code nonsense for a moment and picture a row of terrace houses. We can talk about this street of houses by refering to name of the street ‘Acacia Avenue’ and everyone knows what we are talking about. We can also gossip about the family at number 10 Acacia Avenue and that makes sense too.

Think of an array as a street. You can have lots of data stored in that street – the families in each house.

Back to pesky code. To create a new array we use the new keyword. We could create an array as follows:

var myStreet = new Array();

Notice that Array is capitalized.

The above would create an empty array. Now we’ll move some families in. Just give them a push.

var myStreet = new Array();
myStreet.push('The Jones');
myStreet.push('The Smiths');
myStreet.push('The Macdonalds');
myStreet.push('The Osbornes');

The push method adds an item to the end of the array – just like building a new house.

From the Streets to the Square

To get at values stored in the array we use its index. This is like the number of the house in our street anology but with one difference (and it is 1). Whereas most streets are numbered from 1, arrays are numbered (indexed) from 0. This number/index is placed in square brackets [ ] after the array name. So myStreet[0] would give us the first value of ‘The Jones’, and myStreet[1] would give us the second value of ‘The Smiths’ etc.

console.info(myStreet[0]);
//outputs 'The Jones'

Previously, on mustbebuilt we looked at functions. Javascript has lots of pre-defined/built-in functions (known as methods) and there are number related to arrays. You have seen one already – push . Another is pop that removes the last value from the array. Arrays also have built-in properties that describe something about that array. One useful one is length that tells us how many values we have stored in our array. Try the following:

var myStreet = new Array();
myStreet.push('The Jones');
myStreet.push('The Smiths');
myStreet.push('The Macdonalds');
myStreet.push('The Osbornes');
console.info(myStreet.length);
myStreet.pop();
console.info(myStreet.length);

First we built the array as before. Then we console the length of the array myStreet. You should see the value 4 in the console. Then we call the pop method of the array and the second time that length is sent to the console we get the value of 3.

Loopy Arrays

With all these lovely values in an array is it useful to be able to loop around them and extract them one by one. To do this we can use our old friend the for loop.

//create the array
var myStreet = new Array();
myStreet.push('The Jones');
myStreet.push('The Smiths');
myStreet.push('The Macdonalds');
myStreet.push('The Osbornes');
for(var i=0; i<;myStreet.length; i++){
	console.info(myStreet[i]);	
}

Notice how we use the length property of the array as the end condition of our loop.

There is an efficiency gain to be had here. Instead of continually working out how long the array is with the length property we could create a variable to hold that value. A better example would thus be:

//create the array
var myStreet = new Array();
myStreet.push('The Jones');
myStreet.push('The Smiths');
myStreet.push('The Macdonalds');
myStreet.push('The Osbornes');
//get the length of the array before looping
var noHouses = myStreet.length;
for(var i=0; i<;noHouses; i++){
	console.info(myStreet[i]);	
}

A Thought forEach (but not everyone of us)

PHP whizzes may be joining the dots at this point and wondering if there is an equivalent to PHP foreach that allows neat looping around arrays and their values. Yes and er no. There is but it is not fully supported by all browsers.

The construct of the forEach is a little different to what we have seen so far but the construct will be come familiar if you stick with us as we progress to jQuery.

arrayName.forEach(callBackFunction);

To output the values from our example we would use:

myStreet.forEach(displayVals);
function displayVals(value, index){
	console.info(value);
}

If you want to jump ahead at this point then have a look at jQuery each().

You’ll find more about arrays regarding split and join, traditional methods and newer methods.

Leave a Comment