Articles HTML Tutorial CSS Tutorial JavaScript Tutorial PHP Tutorial MYSQL Tutorial Contact Us
JAVASCRIPT Arrays

We learnt in the previous JavaScript Variables section, that variables are a kind of temporary storage area, where variable="something". Arrays are a collection of variables, all stored together under one variable name.

Let's take a look at this example: var vegtext='';
<script>
veg1="peas";
veg2="carrots";
veg3="parsnips";
veg4="potatoes";
veg5="broccoli";

vegtext+=veg1;
vegtext+=veg2;
vegtext+=veg3;
vegtext+=veg4;
vegtext+=veg5;
<script>
and compare it with this example: <script>
var vegtext='';
veg=["peas","carrots","parsnips","potatoes","broccoli"];

for(i=0;<veg.length;i++){
vegtext+=veg[i];
}
</script>

In the first example, we use 5 different variables to store 5 different bits of information, and we then attach the value of each variable onto the string called vegtext which we can use or print out later.
This is great if you know how many bits you have, and you know their name.

In the second example, we use one variable which has been set as an array. We then use a loop to go through that array and attach the value of each onto the string called vegtext.
We'll cover JavaScript Loops in greater detail later, but as you can see we don't need to print out each variable individually, and we don't need to know how many there are.

Arrays then, are great if you need to group lots of related information together, so you can either sort them (alphabetically, for example), or you need to be able to go through them in a loop.


There are a few ways in which you can create an array in JavaScript.

Example 1: <script>
veg=["peas","carrots","parsnips","potatoes","broccoli"];
</script>
This simply sets your variable called veg to be an array, and includes it's values. This is great if you know the values at the time of setting the array, and you know how many there are.

Example 2: <script>
veg=[];
veg[0]="peas";
veg[1]="carrots";
veg[2]="parsnips";
veg[3]="potatoes";
veg[4]="broccoli";
</script>
This simply sets your variable called veg to be an array, but includes no values. Then, as you work your way through your Javascript script, you can assign a value at any time with veg[0]="peas";

Example 3: <?PHP
myveg="peas,carrots,parsnips,potatoes,broccoli";
veg=myveg.split(",");
?>
This takes a string variable called myveg and splits in into parts using the the comma as a separator, and places those parts in an array called veg.
veg will now look exactly as it does in Example 1 & 2 above.
We don't need to tell veg to be an array first, as the split function does this for us.