Free Javascript Tutorials

home

JavaScript Tutorials

Arrays

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Hurray for Arrays!

 

You know what a variable is - just a little drawer in your computer's memory. Instead of holding socks or underwear, variables hold text and numbers. Except, a variable will hold only one value. You can store a single number in a variable, or a single string. An array is a variable that holds more than one number, or more than one string. Let's make a start on explaining how arrays work.

Setting up an Array

To set up an array in JavaScript you have to create an array object. This, for us, involves nothing more complicated that using the word new. Like this:

Seasons = new Array(3)

The above code would set up an array that could hold four different values in it (arrays start at zero). To put something into each "slot" in the array, you'd just do this:

Seasons[0] = "Winter"
Seasons[1] = "Spring"
Seasons[2] = "Summer"
Seasons[3] = "Autumn"

Our array is called Seasons. In between round brackets, we had an upper limit for the array - 3. (The number in round brackets is called the Index). When we're assigning values to each position in the array, we just type the name of the array, and then one of the numbers in square brackets. After typing the assignment operator (=), we type the value we want to go into that "slot" of the array.

Another way to set up an array is to have all the values inside the round brackets of the word Array. Like this:

Seasons = new Array("Winter", "Spring", "Summer", "Autumn")

We still have an array with four values in it, but we've fixed the values inside of the round brackets.
To get at the value inside an array, just use its index number. Like this:

So putting that altogether in a script would give us this:

<SCRIPT language=JavaScript>

Seasons = new Array(3)

Seasons[0] = "Winter"
Seasons[1] = "Spring"
Seasons[2] = "Summer"
Seasons[3] = "Autumn"

alert(Seasons[2])

</SCRIPT>

Test out the script in a web page and see how it works. Change the value of the index from 2 to one of the other numbers and see what happens. Change the value of the index to a number higher than 3 and see what happens.

 

Array Methods

Here's another thing you can try. Add this line just before the alert box (on a line of its own):

Seasons.sort()

Now type in 3 as the index number in your alert box. The alert box will now display "Winter". Despite the fact that our array has Winter at position 0. The reason why it does this is because we used a method for on our array - sort(). Because Array is now an object, we only need the array name followed by a full stop. After the full stop type the method you want to use.

The sort() method will sort your array alphabetically. You can sort your array in reverse order with this:

Seasons.reverse()

In which case, the value in the last position will become the first value, the second last position will become the second value, etc. We can use another method of arrays to see this more clearly. Add this line after the sort() method:

Seasons.join()

So you should have this as your code:

Seasons = new Array(3)

Seasons[0] = "Winter"
Seasons[1] = "Spring"
Seasons[2] = "Summer"
Seasons[3] = "Autumn"

Seasons.sort()
Seasons.join()

alert(Seasons)

When you test this code out, you should get a message box like this one:

Array Alert Box

However, if you use Seasons.reverse() instead of Seasons.sort() you'll get a message box something like this one:

Reverse Array Sort

There are a few more array methods you can use, but they are a touch advanced for us at this stage. For the record, they are: concat, pop, push, shift, slice, unshift. But try not to worry about them.

In the next part, we'll take a look a closer look at that number in round brackets - the index number of an array.

Move on to the Next Part -->

<--Back to the JavaScript Contents Page