Introduction to Arrays
Learning Objectives
By the end of this lecture, you should be able to:
–
–
–
–
–
–
Understand what an array is
Know how to create an array using an array literal
Know how to add elements to an an array
Know how to modify the values of an array
Be familiar with the 'length' property of an array
Recognize the importance of using arrays with JS / jQuery
Arrays
In programming, it is extremely common to find ourselves storing a bunch of related information. For example, suppose we
wanted to keep track of a list of midterm exam grades for a class of 5 students. We could declare 5 separate variables and
store the results like so:
var
var
var
var
var
student1
student2
student3
student4
student5
=
=
=
=
=
82;
97;
64;
91;
88;
However, a far more efficient way is to use an "array".
An array is a special type of variable because it can hold multiple values.
There are a few different ways to create an array.
Here is how to create an array using an array literal :
var students = [82, 97, 64, 91, 88];
As you can see, we place all of our desired values inside square brackets, and separate them with commas.
Another technique is to use the 'new' operator like so:
var students = new Array(82, 97, 64, 91, 88);
//Note the parentheses instead of square brackets
Both techniques are perfectly valid, but for now we will stick with creating our arrays using the 'array literal' technique. In
fact, some programmers believe that we should avoid using the 'new' operator when creating arrays. However, you will see it
from time to time, so you should be aware of it.
Creating a new empty array
Consider the situation when you wish to create a variable -- but don't yet have anything to put inside it. In this case,
you simply create the variable, but do not assign it any value:
var someVariable;
To create an empty array, we do it a little differently:
var myNewArray = [];
That is, we include an equals sign, followed by a pair of square brackets with nothing inside.
Some commands return an array
Consider the situation where you select an entire group of items, such as:
$('img')
If your page has multiple images on it, then this command will select all of the imges.
Now let's store the collection returned by this command like so:
var images = $('img');
Because the variable 'images' is holding a collection of items returned by your jQuery selection, this
variable, is, in fact, an array!
So as you can see, there are other ways of creating arrays. In fact, you will probably find that most of
the arrays that you end up using will be created by this method.
var scores = [79.5, 87, 94, 82.5, 67, 98, 87.5, 81, 74, 91];
Accessing elements of an array
var students = [82, 97, 64, 91, 88];
As you have seen, we view and modify elements of an array using square bracket notation. Be sure
to carefully study the following examples. Also be sure that you type out the examples for yourself
and to experiment with them.
To access an array element, we refer to the array identifier, and then put an "index number" in
square brackets. As we have seen in the past, we count starting with 0 (not 1).
alert(
students[0]
);
//will output 82
Suppose we wanted to award the first student 5 extra points due to bonus work. In that case, we
could modify the score of this student as follows:
students[0] = 87;
If we wanted to add the scores of the 4th and 5th students (i.e. the last two students in our array), we
could do it as follows:
var sumOfLastTwo = students[3] + students[4];
Again, do not forget that arrays are 0-based, so the 4th student is student[3] and the 5th student
is student[4].
Modifying an element of the array
var students = [82, 97, 64, 91, 88];
What do you think would be the effect of: students[0] = 93;
You might be tempted to say that we have just added an element to the beginning of our array. In
fact, all we have done is to modify the value of the first element of our array from 82 to 93.
The 'length' property
var students = [82, 97, 64, 91, 88];
Every array variable has a property associated with it called 'length'. This is the same
'length' property we have seen with String objects.
So to find out how many students are in our array, we could do something like:
alert( students.length
);
//will output 5
Adding elements to an array
var students = [82, 97, 64, 91, 88];
Can you figure out how you might add another element to the array? Suppose you had a 6th student
join your class late in the term, and then score 93 on the exam. How might you include that in your
array?
students[5] = 93;
What if you wanted to output the value of the last item in your array, but didn't know the index of that
element? Can you think of a technique you might use?
var sizeOfMyArray = students.length;
students[sizeOfMyArray-1] = 93;
Perhaps a more efficient way would be to use 'length' directly:
students[students.length-1] = 93;
Another even easier technique is to use a special JavaScript method called push() :
students.push(93);
The push() method adds an item to the very end of the array.
Avoid Gaps
var students = [82, 97, 64, 91, 88];
When adding an element on to our array, it is important that we add it directly to the tail of our
array, that is, without any gaps.
For example, we could add an additional element by writing:
students[274] = 93;
but you would then have a big gap in the array which would almost certainly cause major headaches
down the road. Except for very rare circumstances, you should not have empty spaces in the middle
of an array.
Arrays can hold any data type
Arrays are not limited to numbers. For example, you could have an array of strings like so:
var favoriteAnimals = ["turtle", "frog", "lemon shark"];
Arrays and JavaScript
Why is is so important to use and understand arrays?
In JavaScript / jQuery when we reference an item, we frequently get back a whole collection of things. For
example, consider:
$('img');
This command selects all of the images on the page.
Now consider:
var allImages = $('img');
The variable allImages is an array containing references to every image on the page. For example, the first
image in the page can now be referenced using JavaScript as:
allImages[0]
As an example, we could then output the file name of this image with:
alert( allImages[0].src );
In fact, this only scratches the surface of what we do with arrays. Arrays are a key component of programming and
every programmer must have some fluency with them.
Examples
Arrays are a very involved and detailed topic. However, this will be enough to get us going for now.
Be sure to study and experiment with the following code example.
Example file: arrays_intro.htm
Example file: arrays_page_of_stuff_1.htm