JavaScript: Arrays

Some of the time when creating scripts, we want to store lots of values which are related in some way. For example if you wanted to store the grades that students got in an exam, 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 these things 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:

1

var scores = new Array();

So the above would create an empty array called 'scores'. Now we probably want to populate it with some values. We reference different "elements" of, or different pieces of data in, an array by specifying the index number (kind of like an ID number to identify different values in the array) in square brackets. The first element (value) in an array has an index number 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 use something like this:

1

scores[0] = 20;

We can set other elements in the array using the same method:

1
2
3
4
5

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 the following:

1

alert(scores[0]);

If we want an 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:

1

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:

1

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:

1
2
3
4
5

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, more dynamic, and more efficient. The easiest way is probably to use a 'for' loop (as covered in the previous tutorial). I suggest having a go at doing this yourself, but if you just want quick answers, the JavaScript for this is in a JSFiddle below:

As a side-note to finish off the tutorial - arrays can store 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). This creates a very flexible and strong way to store a number of related pieces of data. If you're feeling up to the challenge, try using multiple arrays to list the prices and names of items in a shop.