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 array literals – 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 student1 = 82; var student2 = 97; var student3 = 64; var student4 = 91; var student5 = 88; However, a far more efficient way – as you will soon see – is to use an "array". (Imagine if instead of 5 students, we had 500 students!) 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 in side 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. So, 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 study closely the examples that follow. 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, we could modify the score as follows: students[0] = 87; If we wanted to add the scores of the 4 th and 5 th 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 4 th student is student[3] and the 5 th 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 6 th 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 were not sure what the last index of our array was? Can you think of a technique you might use? var sizeOfMyArray = students.length; students[sizeOfMyArray] = 93; Of course, a more efficient way would be to use ' length ' directly: students[students.length] = 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 );

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