Arrays

Introduction

The following is a short tutorial of using arrays on JavaScript Seed. This should give a grounding on the basics in the context of Seed and allow you to be comfortable to use the numerous JavaScript Array tutorials on the web.

What is an array?

An array can be thought of a row of boxes where information can be stored. It is a convenient way of storing information of a similar type. An example of this is you may have the names of a number of email contacts. Rather than defining these contacts in a number of different variables which is time consuming and confusing, they can be stored in an array called say my_contacts.

Each of these 'boxes' are referenced by a numerical values starting from 0 to the last variable where 0 is the first 'box', 1 is the next one and so on. A graphical description of this is as follows:

Using the above, if it was called my_contacts and you wanted to access the details of Sharon, you would use the following command:

my_contacts[3];

Andrew would be

my_contacts[1];

Katherine should be

my_contacts[5];

You could of course have multi-dimensional array where there are rows of 'boxes', essentially arrays of arrays. A graphical example would be:

Sharon's details would now be

my_contacts[3][0];

and here number would be

my_contacts[3][1];

As there are more easier ways of storing information as multidimensional arrays like arrays of objects and sqlite, it it outside the scope of this tutorial.

Creating an array

There are a number of ways of creating an array.

If you know the size of the array you can define at it using the following which sets the size of array_numbers to hold 20 elements.

var array_numbers = new Array(20);

The array you create may not stay at a fixed size throughout the course of the program. While the above declaration will work where you have be able to add more than 20 elements to it, it is preferable to set the declaration as follows:

var x = new Array();

The above declaration is preferable when declaring an array. The following is another way of doing it but folk who view your code may find it difficult to understand what it is at first:

var y = [];

If you are using an array to store information to use in the program you could use the above argument and set each elements but an easier and possibly more convenient declaration is as follows which sets the array_list to contain a list of 5 strings:

var array_list = [ "rock" , "and", "roll", "for", "ever"];

The following sets my_array to a list of 5 numbers:

var my_array = [1,2,3,4,5];

Displaying Contents of Array

Firstly, to display the contents of the array, there are two ways using the for method to display the contents. The first one is using the for statement and Array.length method.

Before we go any further, just to explain the Array.length method. This displays the length of the array i.e. the number of elements in it. Firstly, the array that will be used in the examples will be declared:

var my_array = [ "rock" , "and", "roll", "for", "ever"];

To get the length or number of elements in array enter the following command:

print (my_array.length);

which displays:

5

The Array.length method is used in the for statement to let it know what the last element position is. This is required whether you want to define it as the for loop counter and count down to first position or terminating value for reverse.

It has to be noted that the array always starts from 0 so the contents of Array.length may be a bit misleading as for example the last position of the my_array will be my_array[4]

The code for the for statements is as follows:

for (var i=0; i < my_array.length; i++) print (my_array[i]);

A breakdown of the code is as follows:

for (var i=0; i < my_array.length; i++) 

This sets up a for loop with the counter counter i being set to 0 (the first position of array), the termintating loop value being < my_array.length (note above where as the array starts at position 0, the last value will be array.length -1 i.e. my_array[4]). The last part increases the loop counter by 1.

print (my_array[i]);

This prints the element at position i in my_array.

You can print any individual element of an array by referring to it's index number. This is way you would use any element of an array in a program. For obvious reasons you will get an error message if you use an index number that is higher than the array's length i.e. you have 5 elements in array you can't print my_array[19].

The following is example of printing individual elements:

print (array_list[2]);
print (array_list[0]);
print (array_list[4]);

You can also set variables using them by the following:

var foo = array_list[1];
if (x == array_list[3]) print ("Variable x is equal to array element 3");

An another way of displaying the contents of the array is using the for in statement. When this is used the for statement gets the size of the array from the in Array. The format of this is as follows:

for (var variable in Array)

Ane example is as follows:

for (var i in my_array) print (my_array[i]);

To explain what happens:

for (var i in my_array)

The counter i is defined and the my_array is 'subtituted' with the length of array. When run it is really saying for (var i in 4) so will start i as 0 and go loop until it is equal to 4. It then prints each element of the array.

To give a clearer example of how this works, run the following:

for (var i in my_array) print (i);

0
1
2
3
4

As you see it does all the work for you as you don't need to define the start or terminating value! Both ways are valid and dependent on personal taste.

If you want to print the contents of the array, you can simply do it like the following:

print (my_array);

Array Methods

It has been seen that the method array'.length gives the length of the array. There are a number of other methods which can be used in conjuction with arrays.

There are two methods to add another element to way. You can either add an element to the end of the array using the push method or to the beginning with ther unshift' method.

The format for adding to the end of array is as follows:

array.push(value);

An example is as follows:

my_array.push("ok"); 

Numerical values would be added as

my_array.push(3); 

The format for adding to beginning of array is as follows:

array.unshift(value);

An example is as follows:

my_array.unshift("cool"); -

Numerical values would be added as

my_array.unshift(15); -

Removing elements is the same with pop removing the last element and shift removing the first element.

The format for removing the element at the end of array is as follows:

array.pop();

An example is as follows:

my_array.pop(); 

The format for removing the element at the beginning of array is as follows:

array.shift();

An example is as follows:

my_array.shift(); -

If you want to change an value of the element in the array, you would use the array'.splice function. The purpose of this function is to remove elements from the array and replace them with the ones supplied. You can replace one or more values.

The format of the function is as follows:

array.splice(position in array,number of elements to be removed, values);

An example is as follows:

my_array.splice(1,0, '&'); 
print (my_array); - print contents of array;

rock,&,and,roll,for,ever

my_array.splice(1,0, '&'); 

my_array.splice(1, 2, "&");

rock,&,for,ever

var nums = [1,2,3,4,5];
nums.splice(3, 2, 5,4);

1,2,3,5,4

array.sort();

Using the number array as an example:

nums.sort(); - Sort array