You already used PHP arrays and were told that they are like a variable but can hold many values.  JavaScript arrays are done slightly differently to PHP arrays because they have methods and properties like objects.

Creating an array

Create a new page called arrays.html.  Add this code:

var choices=[];

Try it.  You should get a blank message as there is nothing in the array.  It is possible that a browser might choose to not show the message as it is empty.

Adding values to specific positions

You can add data to each location in an array.  Try adding this line between the other two and view the page again:


Add another two values (1 and 2, beef and pork) by copying that new line and altering the number and the food item.  Test (you should see the food items separated by commas).  You would probably use a loop in a real situation but this is just warm up.

Adding values to the end

When you do this for real you might not know how many things there are in the array already.  So to add a new one you would have to look through it to find the existing entries and then add another one with the next number.  JavaScript can do that for you with one of the methods of an array (add this just before the alert):


Try it and you should get an alert with the three you added to specific positions plus one on the end (in position 3 in the array).

You can also add/insert elements at the beginning using unshift instead of push.  The reason for the name will make sense lower on this page.

Extracting specific values

Under the last line of code (after the existing alert) add this:


Just like in PHP this will give you the third value in the array.

Extracting all values

You can alert the array as if it was a variable as you have been and all values are shown.  You might also want to go through and do something specific with each entry.  Replace the last three lines (two alerts and the one between them) with this:


The first line displays how many elements there are in the array (length is a property of any array).  The length property may be the most useful array property.  The loop then displays the data one item at a time.

Extracting the last value (or the first)

Just as push adds an element on the end of the array pop will remove it.  Here are both in action so add this to the end of your code:

var removedOne=choices.pop();
alert('The item removed was '+removedOne+' leaving '+choices);

Try it first then look at the code and it should be clear what is happening.

To remove the first item instead of the last one use shift instead of pop.  That removes the first one and shifts the others to fill the gap.

Finding things in arrays

If you want to find one item you can.  Add this after the last line of existing code:

var whereIsIt=choices.indexOf('beef');

It should show the position of the element containing the word beef.

Sorting arrays

Once the data is in an array you can sort it.  Again this can be done in PHP or, even better, in SQL so you may not need it but if it comes in useful sort an array like this:


Try it by adding those two lines.