Welcome to S-Design
The home of your bespoke, professional, fast-loading, interactive, database-driven web presence.
Menu
JAVASCRIPT TUTORIALS


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: <script>
var vegtext='';
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"; But remember, you will need to keep a count of how many items are already in the array, so you'll know what index number to give this new item!

Example 3: <script>
veg=[];
veg.push("peas");
veg.push("carrots");
veg.push("parnips");
veg.push("potatoes");
veg.push("broccoli");
</script>
This simply sets your variable called veg to be an array, but includes no values. Then at any place in your script you can simpy push a new item into the veg array. You don't need to know how many items are already in the array, as push() simply adds new items to the bottom.

Example 4: <script>
myveg="peas,carrots,parsnips,potatoes,broccoli";
veg=myveg.split(",");
</script>
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 Examples 1, 2 & 3 above.
We don't need to tell veg to be an array first, as the split function does this for us.

Title