Javascript: Arrays

Some of the time when programming/scripting stuff, we want to have lots of values which are related in some way. For example if you wanted to store the grades that students got in a test, you'd want various integer values of what scores different students got. We can store lots of related data like in the example, by using what are called arrays.
Arrays are basically just "special types of variables" which can hold multiple values – they are often used for lists of data, as in our example of different student's scores.

We can declare arrays in Javascript by starting like a regular 'var' declaration, and then setting this variable to a new array. We can create this "new array" that we have to set it to, by using the "new" keyword, and then writing "Array". We then provide "Array" with empty brackets (no parameters - for now) and end the line with a semicolon.

var scores = new Array();

So now we have an empty array, we probably want to populate it with some values. We reference different "elements" of (different pieces of data in) an array by specifying the index number (kind of like an ID to identify different values in the array) in square brackets. The first element (value) in an array has an index value of 0 (computers like counting from 0), the second has an index of 1, the third has an index of 2 and so on.
So if we want to set the first element (the one with the index of 0) in our 'scores' array to 20, we might want to do something like this:

scores[0] = 20;

We can set other values using the same method:

scores[0] = 20;
scores[1] = 30;
scores[2] = 15;
scores[3] = 10;
scores[4] = 8;

We can also change values in an array this way - so if scores[0] was already set before we executed the code above, it would now be 20. Incidentally – using square brackets with the index value is also the way we can access the values from our array! So if we wanted to output the first element (index 0) of our array in an alert box, we could do this:

alert(scores[0]);

If we want the array to only be able to hold a certain number of values, we can specify a number in the parameters when we create the array. For example:

var scores = new Array(10); //This array can only hold up to 10 values

It's also worth noting that we can initialise the array when we declare it by passing "Array" multiple parameters (and it will automatically assign these to the array). For example, if we want to pass in some values for the first five elements of our array (index 0 to 4) we could do:

var scores = new Array(20, 30, 15, 10, 8);

We can now see that the values have set by accessing the values and alerting them out:

alert("Index 0: " + scores[0]);
alert("Index 1: " + scores[1]);
alert("Index 2: " + scores[2]);
alert("Index 3: " + scores[3]);
alert("Index 4: " + scores[4]);

It's worth noting that all the code above could easily be implemented into a loop to make it much cleaner and more efficient. The easiest way is probably to use a for loop (as we learnt in the previous lesson).
The full Javascript code for this is in a JSFiddle below:



As a sidenote to finish off the tutorial – arrays can use any datatype you want, whether it be strings (one or more characters 'stringed' together), doubles (numbers with decimal places) or simply integers (whole numbers - as we demonstrated in this tutorial).


Back to Javascript