Section 1: Introduction
Without arrays, it is cumbersome to set up a list of related variables....
var president01 = "George Washington";
var president02 = "John Adams";
var president03 = "Thomas Jefferson";
var president04 = "James Madison";
var president05 = "James Monroe";
var president06 = "John Quincy Adams";
var president07 = "Andrew Jackson";
var president08 = "Martin Van Buren";
var president09 = "William H. Harrison";
var president10 = "John Tyler";
Using individual variables requires ten different output statements, or forty-plus if you list all presidents:
var outputString="";
outputString += president01 +"\n";
outputString += president02 +"\n";
outputString += president03 +"\n";
outputString += president04 +"\n";
outputString += president05 +"\n";
outputString += president06 +"\n";
outputString += president07 +"\n";
outputString += president08 +"\n";
outputString += president09 +"\n";
outputString += president10 +"\n";
alert(outputString);
An array is an enumerated list of variables. It is a programming construct that allows programmers to replace the above code with this:
var presidentArray = ["George Washington", "John Adams", "Thomas
Jefferson",
"James Madison", "James Monroe", "John Quincy Adams",
"Andrew Jackson", "Martin Van Buren", "William H. Harrison",
"John Tyler" ];
var outputString="";
var len = presidentArray.length;
for (var presCtr = 0; presCtr < len; presCtr ++)
{
outputString += presidentArray[presCtr] + "\n";
}
alert(outputString);
The index (the number in the square brackets) can be a variable, allowing for easy looping through the data structure no matter how many presidents you included.
- Array indexes start at 0.
- The loop above processes the entire president list, regardless of how many presidents are stored in the array.
Definition
- a group of related elements given a common name.
- each element is referenced by its position in the group (index).
- an array is similar to a list of numbered items
Justification
- How data is organized plays an important role in the design process.
- It is sometimes necessary to show relationships among different variables or store and reference variables as a group.
- Many problems have so many components that it is difficult to process them if each one must have a unique field name.
Another Example Situation
- A program is required to store and print 1000 pieces of related data, such as pressure readings from some manufacturing process.
- If individually named variables are used for each data item, then the program must have 1000 unique variable names and 1000 separate print statements to print those individual data items.
- A one-dimensional array is a structured data type that is provided to help programmers code operations such as this with ease.
Section 2: Declaration
There are multiple ways in which to declare an array.
- Literal notation is a form of array declaration introduced in JavaScript 1.2.
-
Using literal notation, the programmer must specify the array name and brackets:
var array_name = [];
Example:
var myArray = [];
You do not have to specify an array size.
- JavaScript will automatically increase the size of the array as needed as items are added to the array.
You can also declare an array like this:
var array_name = new Array();
Example:
var myArray1 = new Array();
var myArray2 = new Array(100);
Section 3: Initialization
As demonstrated above, you can specify an initializer list (between the square brackets) when you declare the array.
- This specifies the initial values of the elements of the array.
- Those values can be changed later, if necessary.
-
For example,
var numberList = [1, 2, 3, 6];
or
var numberList = new Array(1, 2, 3, 6);
You can also initialize array elements individually after an empty array has been declared:
var numberList = [];
numberList[0] = 1;
numberList[1] = 2;
numberList[2] = 3;
numberList[3] = 6;
You can store anything in a JavaScript array; the data does not even have to be the same type.
- Avoid doing it unless you REALLY understand what you are doing!
var myArray = [ 3, 'hello', function() {return 5}, true];
Section 4: Accessing array elements
To access a particular element in an array, use the array name and an index.
array_name[constant or variable]
The index can be a variable, constant, or expression that should evaluate to an integer value, and indicates the location of the element that will be referenced.
Example
var gradeList = [];
gradeList[0] = 98;
Array gradeList is an expandable group of memory locations.
- Each element is accessed by its position in the group.
- If additional grades were entered, an array view might look like this.
gradeList[0] refers to the first element in the group.
gradeList[i-1] refers to the ith element in the group.
The index must evaluate to integer greater than or equal to 0 and less than the length property.
Section 5: Processing arrays
The array length property contains the number of elements in the array.
- The length property is always one higher than the highest accessible index value.
- Since arrays always start at zero, the length property is convenient for loops since it will always be one greater than the actual index.
To process the entire grade list element-by-element, you can use a for loop.
var outputString="";
for (var ctr = 0; ctr < gradeList.length; ctr++)
{
outputString += gradeList[ctr] + "\n";
}
alert (outputString);
If an application requires either processing all elements in the array or stopping if a certain condition is detected, a while loop must be used.
The following example checks all students in a class to determine whether everyone is passing.
- If a failing student is detected, processing can be terminated because it has been determined that everyone is not passing.
- Therefore a while loop is used.
var allPassing = true;
var ctr = 0;
while ((ctr < gradeList.length) && allPassing)
{
if (gradeList[ctr] < 60)
{
allPassing = false;
}
else
{
ctr = ctr + 1;
}
}
Section 6: Example
var studentGrade = ["F", "B", "C", "A", "F", "C", "A", "A", "C", "B" ];
The statement
studentGrade[4] = "F";
...assigns "F" to the fifth cell in the array studentGrade (again).
The statements
var ID = 6;
studentGrade[ID] = "A";
...again assigns "A" to the seventh cell in the array studentGrade.
The loop
var outputString="";
for (var ID = 0; ID < studentGrade.length; ID++)
{
outputString += studentGrade[ID] + " ";
}
alert (outputString);
...prints all the values in studentGrade: FBCAFCAACB
The loop
var outputString="";
for (var ID = 0; ID < studentGrade.length; ID++)
{
outputString += "Student " + (ID+1) + "Grade " + studentGrade[ID] +
"\n";
}
alert (outputString);
...prints all the values in studentGrade in a more readable form.
- ID is used as the index, but also serves as the student's identification number.
Student 1 Grade F
Student 2 Grade B
:
:
Student 10 Grade B
JavaScript is also capable of processing an entire array at once.
-
It can be used with document.write or alert to "dump" the contents of an
array, separated by commas:
alert (studentGrade);
...prints all the values in studentGrade: F,B,C,A,F,C,A,A,C,B
Section 7: Adding elements to the end of an array
There are various ways to add an element to next available location in an array, but the easiest is to use the Array.length property.
- Array.length is always equal to the first empty index at the end of an array.
myArray[myArray.length] = 'new stuff'; // Adds item to end of Array
Section 8: Bounds checking
If an attempt is made to access an element outside of the array bounds, it is a run-time error. i.e., JavaScript performs bounds checking on array subscripts.
For example, given the declaration
var studentGrade = ["F", "B", "C", "A", "F", "C", "A", "A", "C", "B" ];
a loop like the following
var outputString="";
for (var ID = 0; ID <= studentGrade.length; ID++)
{
outputString += studentGrade[ID] + "\n";
}
alert (outputString);
...will result in an error because the indexes run from 0 to 9 but the loop runs from 0 to 10, and the attempt to access studentGrade[ID] when ID has a value of 10 would be a run-time error.
Section 9: Examples using arrays
Section 10: Array assignment
Assigning an array to a new variable creates a pointer to the original array (see figures below).
- It does not make a separate copy for the new variable.
- In other words, you have simply created another name by which an array can be identified.
-
For example, if you create an array called numArray as follows:
var numArray = [ 'zero', 'one', 'two', 'three', 'four', 'five' ];
...it results in this:
If you then create a new variable and try to copy the new array to it, as follows...
var newArray = numArray;
...it causes this to happen:
Notice that there is only one array, but now it has two names.
-
If you were to assign a new value to one of the locations, that change would be reflected under both names:
newArray[1] = 'new';
...results in
Printing the contents of that array element associated with either name produces the same results:
alert(numArray[1]); // outputs 'new'
alert(newArray[1]); // outputs 'new'
You can make a separate copy of an array in another array variable, but you have to do it manually or use Array.slice().
var numArray = [ 'zero', 'one', 'two', 'three', 'four', 'five' ];
var newArray = numArray.slice();
produces this...
More on Array.slice() in the discussion of array functions (see link at end of notes).
Manual copy:
var numArray = [ 'zero', 'one', 'two', 'three', 'four', 'five' ];
var newArray = [];
for (var ctr = 0; ctr < numArray.length; ctr++)
{
newArray[ctr] = numArray[ctr];
}
produces this...
But this time the assignment statement
newArray[1] = 'new';
...changes only one array.
