Arrays provide a tabular way to organise a collection of related data. For example, if we wished to store the seven names of each weekday as Strings, we could use an array containing seven elements. This array would be structured as follows:

As can be seen all of these different String values are stored under the collective name weekDays, and a number (from 0 to 6) is used to state which of these weekDays values we specifically wish to refer to. So by referring to weekDays[3] we could retrieve the String "Thursday".

As can be seen from the above figure, there are seven elements in the weekDays array.

There are a number of different ways to create an array. One piece of JavaScript code that creates such an array is as follows:

// VERSION 1
var weekDays = new Array(7);
weekDays[0] = "Monday";
weekDays[1] = "Tuesday";
weekDays[2] = "Wednesday";
weekDays[3] = "Thursday";
weekDays[4] = "Friday";
weekDays[5] = "Saturday";
weekDays[6] = "Sunday";
      

The first (non-comment) line is:

var weekDays = new Array(7);

This line declares a new variable called weekDays and makes this new variable refer to a new Array object that can hold seven elements.

Another piece of JavaScript that would result in the same array as VERSION 1 above is the following:

// VERSION 2 - all in one line
var weekDays = new Array( "Monday", "Tuesday", "Wednesday", 
    "Thursday", "Friday", "Saturday", "Sunday");
      

This single statement combines the declaration of a new variable and Array object with assigning the seven weekday Strings. Notice that we have not had to specify the size of the array, since JavaScript knows there are seven Strings and so makes the array have a size of seven elements.

The above examples illustrate that arrays can either be created separately (as in VERSION 1), and then have values assigned to elements, or that arrays can be created and provided with initial values all in one statement (VERSION 2).

When declaring the array, if you know which values the array should hold you would likely choose to create the array and provide the initial values in one statement. Otherwise the two-stage approach of first creating the array, and then later assigning the values, is appropriate.

The easiest way to display the contents of an array is to simply use the document.write() function. This function, when given an array name as an argument, will display each element of the array on the same line, separated by commas. For example, the code:

var weekDays = new Array( "Monday", "Tuesday", "Wednesday",
    "Thursday", "Friday", "Saturday", "Sunday");
document.write( "<b7gt;weekDays: </b7gt;" + weekDays);
      

Produces the following output in a browser:

The term length, rather than size, is used to refer to the number of elements in array. The reason for this will become clear shortly.

As illustrated in the VERSION 1 code above, the size of an array can be specified when an array is declared:

var weekDays = new Array(7);

This creates an array with seven elements (each containing an undefined value):

In fact, while this is good programming practice, it is not a requirement of the JavaScript language. The line written without the array size is just as acceptable to JavaScript:

var weekDays = new Array();
      

this creates an array, with no elements:

In this second case, JavaScript will make appropriate changes to its memory organisation later, once it identifies how many elements the array needs to hold. Even then, JavaScript is a can extend the size of an array to contain more elements than it was originally defined to contain.

For example, if we next have the statement:

weekDays[4] = "Friday";
 

the JavaScript interpreter will identify the need for the weekDays array to have at least five elements, and for which the 5th element is the String "Friday".

If this were then followed by the statement:

weekDays[6] = "Sunday";
      

the JavaScript interpreter will identify the need for the weekDays array to now have seven elements, of which the 5th contains the String "Friday" and the 7th contains "Sunday":

Once created, an array has a length property. This stores the number of elements for which JavaScript has made space. Consider the following statements:

var weekDays = new Array(7);
var months = new Array();
var bits = new Array(17, 8, 99);
 

The length of each of these arrays is as follows:

One needs to be careful, though, since making the length of an array smaller can result in losing some elements irretrievably. Consider this code and the following output:

var bits = new Array(17, 8, 99, 33, 66, 11);document.write(bits);
document.write("<br> array length: " + bits.length); bits.length = 4;
document.write("<p> after change: p>"); document.write(bits);
document.write("<br> array length: " + bits.length);
 

the browser output from such code is:

As can be seen, after the statement bits.length = 4; the last two array elements have been lost.

In most high-level programming languages arrays are typed. This means that when an array is created the programmer must specify the type of the value to be stored in the array. With such languages, all elements of an array store values of a single type. However, JavaScript is not a strongly typed programming language, and a feature of JavaScript arrays is that a single array can store values of different types.

Consider the following code:

var things = new Array();
things[0] = 21;
things[1] = "hello";
things[2] = true;

document.write("<p>[0]: " + things[0]); document.write("<p>[1]: " 
  + things[1]); document.write("<p>[2]: " + things[2]);
      

As can be seen, this is perfectly acceptable JavaScript programming:

When the value of an array element is replaced with a different value, there is no requirement for the replacement value to be of the same type. In the example below, array element 1 begins with the String "hello", is then changed to the Boolean value false, and changed again to the number 3.1415:

var things = new Array();
things[0] = 21;
things[1] = "hello";
things[2] = true;
things[1] = false;
things[1] = 3.1415;

document.write("<p>[0]: " + things[0]); document.write("<p>[1]: "
   + things[1]); document.write("<p>[2]: " + things[2]);
      

As can be seen, this changing of array element values of different types works without problems:

We can confirm that a single array can store values of different types by displaying the return value of the typeof function:

var things = new Array();
things[0] = 21;
things[1] = "hello";
things[2] = true;

document.write("<p>type of things[0]: " + typeof things[0] );
document.write("<p>type of things[1]: " + typeof things[1] );
document.write("<p>type of things[2]: " + typeof things[2] );
      

The output of the above code is as follows:

In many programming languages, text strings are represented as arrays of characters. While this makes sense in non-object oriented languages, there are a number of advantages of representing data such as text as objects (see later this unit).

You will only obtain undefined values if you attempt to refer to particular characters of Strings using the square bracket array indexing syntax.

So the code:

     var firstName = "Matthew";
     document.write("second letter of name is: " + firstName[1]);
      

results in the following output on screen:

It is also easy to confuse String and Array objects because they both have a length property. So the code:

var firstName = "Matthew";
document.write("second letter of name is: " + firstName[1]);
document.write("<p>length of 'firstName' " + firstName.length);
      

is valid, and we do see the number of characters of the String displayed:

However, the similarity is because both Strings and Arrays are objects — see later in this unit for a detailed discussion of JavaScript objects.

When one begins to work with collections of values (e.g. with arrays or objects), one needs to be aware of the variable's value. A variable containing a primitive type value is straightforward: for example consider the numeric variable age in this code:

    var age = 21;
      

However, the situation is not so simple when we consider an array variable. For example the ageList array of three ages defined as follows:

    var ageList = new Array( 3 );

    ageList[0] = 5;
    ageList[1] = 3;
    ageList[2] = 11;
      

It is not the case that ageList is the name for a single location in memory, since we know that this array is storing three different values. The location in memory named ageList is actually a reference to the place in memory where the first value in the array can be found. The diagram below attempts to illustrate this:

So we can think of the variable ageList as referring to where the array values can be found.

The implication of the different between variables of primitive types and reference types is rather important, especially in the case of copying or overwriting the values of reference variables.

With primitive type variables it is straightforward to copy and change values. Consider the following code:

   var name1 = "ibrahim";
   var name2 = "james";
      

Initially the memory looks as follows:

Then if we execute the following lines:

  name1 = name2;
  name2 = "fred";
      

the values in memory will be:

What is happening is that when one variable is assigned the value of a second, a copy of the second variable's value is placed into the location in memory for the first — so a copy of the value "james" from name2 was copied into the location for name1.

Things are different when one is working with variables of reference types. Consider the following code, where first an array called myArray is created with some initial values, next a variable called thing2 is assigned the value of myArray:

var myArray = new Array( 6, 3, 5, 1 );
var thing2 = myArray; 
      

Since myArray is a reference to the array values in memory, what has been copied into thing2 is the reference — so now both myArray and thing2 are referring to the same set of values in memory:

The implications are that if a change is made to the array values, since both myArray and thing2 are referring to the same values in memory, both will be referring to the changed array.

var myArray = new Array( 6, 3, 5, 1 );
var thing2 = myArray;

thing2[1] = 27;
thing2[2] = 19;
thing2[3] = 77;
        

This figure illustrates the way different array concepts can be related.