Arrays: The Basics ✠Wiki Web Pedia✠

Need for Arrays

Suppose you want to average the temperature of all the days in a week. One way of doing this is to declare seven variables having names like day1, day2, day3, day4, day5, day6 and day7; assign them the corresponding temperatures; add them together and display the sum. The function that may perform this operation will have the following look:

function averageTemperature ()
{
day1 = 34; day2 = 25; day3 = 35;
day4 = 27; day5 = 29; day6 = 30;
day7 = 30;

sum = day1 + day2 + day3 + day4 + day5 + day6 + day7;
average = sum / 7;
document.write ("The average temperature is " + average);
}

The result of this function will be the statement: “The average temperature is 30.” Consider the use of variable names. When there is a large amount of data, say temperature of 365 days, then this technique becomes tiresome. Moreover, say you have to change a program that averages 7 days temperature into a program that averages a month’s temperature. As you can see this will result in lots of changes in the above code. There is a better way to handle situations like this – in which we have a set of related values.

Creating Arrays

An array is a named collection of objects. You declare an array with the keyword new Array followed by the size of array in paranthesis. For example, to create an array of seven days, we may write a statement like: days = new Array (7);

Using Arrays

The elements in this collection are referred to by two parts – the array name and the index in this collection. The same code discussed above will be written like this:

function averageTemperature ()
{
days = new Array (7);
days[0] = 34; days[1] = 25; days[2] = 35;
days[3] = 27; days[4] = 29; days[5] = 30;
days[6] = 30;

sum = days[0] + days[1] + days[2] + days[3] + days[4] + days[5] + 
 + days[6];
average = sum / 7;
document.write ("The average temperature is " + average);
}

Notice a few things in the above code: The array named “days” is declared of size 7. This means that we should be allowed to store 7 values in this array. Next the objects in the array (remember arrays is a collection of objects) are given their respective values. The thing that is important here is that the elements are referred to by writing the array name along with the position of the object in the array enclosed between square brackets. Moreover, the first element starts at 0. Thus, the second day’s temperature is store in days[1] and so on. The good thing about arrays is that you can use a variable to index to the array element. For example, you may write days[i] where i is 3 to refer to the fourth element. Using this knowledge the same above code can be re-written as shown below. Please study this code carefully – especially the for loop.

function averageTemperature ()
{
days = new Array (7);
days[0] = 34; days[1] = 25; days[2] = 35;
days[3] = 27; days[4] = 29; days[5] = 30;
days[6] = 30;

sum = 0;
for (i=0; i<7; i++)
{
sum = sum + days[i];
}
average = sum / 7;
document.write ("The average temperature is " + average);
}

An Example

As we can declare arrays; similarly there are some built into arrays in JavaScript. For example the controls in a form (e.g., textboxes, buttons, etc.) can actually be accessed by form[i]. For example the string in the third text box in an array named formName will be accessed as formName[2].value. Please copy and paste the following code and save it into some file. Then open it into a web browser to see what it does. It will display seven text boxes for you to enter the temperatures. A button will also be displayed to get the average temperature. Go to this address to see the code in work:

<html>
<head>
<title>Simple JavaScript Example</title>
<script language="JavaScript">
<!-- // hiding from old browsers

function averageTemperature (formName)
{
sum = 0;
for (i=0; i<7; i++)
{
aDaysTemperature = parseInt (formName[i].value);
sum = sum + aDaysTemperature;
}

average = sum / 7;
alert ("The average temperature is " + average);
}
// -->
</script>

</head>
<body>
Enter the temperatures and click on the average 
  button: <form name="temperature">
Day 0: <input type="textbox" name="day0"><br>
Day 1: <input type="textbox" name="day1"><br>
Day 2: <input type="textbox" name="day2"><br>
Day 3: <input type="textbox" name="day3"><br>
Day 4: <input type="textbox" name="day4"><br>
Day 5: <input type="textbox" name="day5"><br>
Day 6: <input type="textbox" name="day6"><br><br>
<input type="button" value="Get average!"
 onClick="averageTemperature(temperature)">
</form>
</body>
</html>

In the code used above, the function parseInt() is a built in function in JavaScript that takes a string and returns a number. For example, i = parseInt(“33.56”) will set i equal to 33.56.