Chapter 15. JavaScript 4: Objects and
Arrays
Table of Contents
Objectives .............................................................................................................................................. 2
15.1 Introduction .............................................................................................................................. 2
15.2 Arrays ....................................................................................................................................... 2
15.2.1 Introduction to arrays ..................................................................................................... 2
15.2.2 Indexing of array elements ............................................................................................ 3
15.2.3 Creating arrays and assigning values to their elements ................................................. 3
15.2.4 Creating and initialising arrays in a single statement..................................................... 4
15.2.5 Displaying the contents of arrays ................................................................................. 4
15.2.6 Array length ................................................................................................................... 4
15.2.7 Types of values in array elements .................................................................................. 6
15.2.8 Strings are NOT arrays .................................................................................................. 7
15.2.9 Variables — primitive types and reference types .......................................................... 8
15.2.10 Copying primitive type variables ................................................................................. 9
15.2.11 Copying reference type variables................................................................................. 9
15.2.12 Array activities........................................................................................................... 10
15.2.13 Arrays concept map ................................................................................................... 12
15.3 The JavaScript object model .................................................................................................. 13
15.3.1 Introduction to the JavaScript object model ................................................................ 13
15.3.2 Objects in JavaScript ................................................................................................... 13
15.3.3 Naming conventions .................................................................................................... 14
15.3.4 Creating objects and variables referring to objects ...................................................... 15
15.3.5 Object properties and methods .................................................................................... 16
15.3.6 Some important JavaScript objects .............................................................................. 19
15.3.7 The 'Triangle' object .................................................................................................... 21
15.3.8 User defined objects .................................................................................................... 21
15.3.9 Implementing instance variables and methods ............................................................ 23
15.3.10 The JavaScript object search chain ............................................................................ 25
15.3.11 Object activities ......................................................................................................... 28
15.4 Arrays as objects .................................................................................................................... 29
15.4.1 Array method: join ....................................................................................................... 29
15.4.2 Array method: sort ....................................................................................................... 30
15.4.3 Array method: reverse ................................................................................................. 31
15.4.4 Single and multi-dimensional arrays ........................................................................... 32
15.5 Objects as associative arrays .................................................................................................. 33
15.5.1 Enumerating associative arrays with FOR/IN loop statements .................................... 33
15.5.2 Using FOR/IN for numerically index arrays................................................................ 34
15.5.3 Activities and further work .......................................................................................... 36
15.6 Review Questions .................................................................................................................. 41
15.7 Discussion Topics .................................................................................................................. 42
15.8 Answers.................................................................................................................................. 42
15.8.1 Discussions of Exercise 1 ............................................................................................ 43
15.8.2 Discussions of Exercise 2 ............................................................................................ 43
15.8.3 Discussions of Activity 1 ............................................................................................. 44
15.8.4 Discussions of Activity 2 ............................................................................................. 44
15.8.5 Discussions of Exercise 3 ............................................................................................ 45
15.8.6 Discussions of Activity 3 ............................................................................................. 45
15.8.7 Discussions of Activity 4 ............................................................................................. 47
15.8.8 Discussions of Activity 5 ............................................................................................. 47
15.8.9 Discussions of Activity 6 ............................................................................................. 48
15.8.10 Discussions of Activity 7 ........................................................................................... 48
, 15.8.11 Discussions of Activity 8 ........................................................................................... 49
15.8.12 Answers to Review Questions ................................................................................... 51
15.8.13 Contribution to Discussion Topics............................................................................. 51
Objectives
At the end of this chapter you will be able to:
• Understand the basic features of JavaScript arrays;
• Understand the fundamental elements of JavaScript arrays;
• Write HTML files using JavaScript arrays;
• Explain the JavaScript object model;
• Use arrays as objects.
15.1 Introduction
Most high level computer programming languages provide ways for groups of related data to be collected
together and referred to by a single name. JavaScript offers objects and arrays for doing so. JavaScript arrays are
rather different from arrays in many programming languages: all arrays are objects (as in many other languages),
but they are also associative arrays. Also, all objects can also be used as if they, too, are arrays.
This chapteris organised into four sections. It introduces arrays and objects separately, then considers arrays as
objects, then finally considers objects as (associative) arrays. Many important concepts are covered in this unit,
although much of the object technology concepts have been introduced in earlier units.
When working with variables, an important distinction has to be made: is the variable contain the value of a
primitive type, or does it contain a reference to a (non-primitive) collection of data. A thorough grounding in the
concepts covered in this chapter is necessary to both be able to understand the sophisticated Javascipt scripts written
to support complex websites, and to be able to begin developing JavaScript solutions yourself for real world
problems. It is important to work through examples until you understand them; write your own programmes that
use and test your learning. Programming is learnt through doing as much, or more so, than by reading.
15.2 Arrays
15.2.1 Introduction to arrays
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:
Index Value
weekDays[0] "Monday"
weekDays[1] "Tuesday"
weekDays[2] "Wednesday"
weekDays[3] "Thursday"
weekDays[4] "Friday"
weekDays[5] "Saturday"
weekDays[6] "Sunday"
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".
DEFINITION - Array
2
,An array is a tabular arrangement of values. Values can be retrieved by referring to the array name together with
the numeric index of the part of the table storing the desired value.
As you may have spotted, by having a loop with a numeric variable we can easily perform an action on all, or some
sub-sequence, of the values stored in the array.
15.2.2 Indexing of array elements
As can be seen from the above figure, there are seven elements in the weekDays array.
DEFINITION — element
Arrays are composed of a numbered sequence of elements. Each element of an array can be thought of as a row (or
sometimes column) in a table of values.
The seven elements are indexed (numbered) from zero (0) to six (6). Although it might seem strange to start by
numbering the first element at zero, this way of indexing array elements is common to many high-level
programming languages (include C, C++ and Java), and has some computational advantages over arrays that start
at 1.
Note
The index of an array element is also known as its subscript. The terms array index and array subscript can be used
interchangeably. In this unit we consistently use the term index for simplicity.
Exercise 1
Answer the following questions about the weekDays array:
• What is the first element?
• What is the last element?
• What is the 4th element?
• What is the value of the first element?
• What is the value of the 4th element?
• What is the element containing String "Monday"?
• What is the element containing String "Saturday"?
• What is the index of the element containing String "Monday"?
• What is the index of the element containing String "Saturday"?
15.2.3 Creating arrays and assigning values to their
elements
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);
3
, This line declares a new variable called weekDays and makes this new variable refer to a new Array object that can
hold seven elements.
Note
The concept of arrays as objects is discussed later this unit.
The seven statements that follow this line assign the Strings "Monday" - "Sunday" to the array elements
weekDays[0] to weekDays[6] respectively.
15.2.4 Creating and initialising arrays in a single
statement
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.
15.2.5 Displaying the contents of arrays
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( "<b> Weekdays: </b>" + weekDays);
Produces the following output in a browser:
15.2.6 Array length
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);
4
Arrays
Table of Contents
Objectives .............................................................................................................................................. 2
15.1 Introduction .............................................................................................................................. 2
15.2 Arrays ....................................................................................................................................... 2
15.2.1 Introduction to arrays ..................................................................................................... 2
15.2.2 Indexing of array elements ............................................................................................ 3
15.2.3 Creating arrays and assigning values to their elements ................................................. 3
15.2.4 Creating and initialising arrays in a single statement..................................................... 4
15.2.5 Displaying the contents of arrays ................................................................................. 4
15.2.6 Array length ................................................................................................................... 4
15.2.7 Types of values in array elements .................................................................................. 6
15.2.8 Strings are NOT arrays .................................................................................................. 7
15.2.9 Variables — primitive types and reference types .......................................................... 8
15.2.10 Copying primitive type variables ................................................................................. 9
15.2.11 Copying reference type variables................................................................................. 9
15.2.12 Array activities........................................................................................................... 10
15.2.13 Arrays concept map ................................................................................................... 12
15.3 The JavaScript object model .................................................................................................. 13
15.3.1 Introduction to the JavaScript object model ................................................................ 13
15.3.2 Objects in JavaScript ................................................................................................... 13
15.3.3 Naming conventions .................................................................................................... 14
15.3.4 Creating objects and variables referring to objects ...................................................... 15
15.3.5 Object properties and methods .................................................................................... 16
15.3.6 Some important JavaScript objects .............................................................................. 19
15.3.7 The 'Triangle' object .................................................................................................... 21
15.3.8 User defined objects .................................................................................................... 21
15.3.9 Implementing instance variables and methods ............................................................ 23
15.3.10 The JavaScript object search chain ............................................................................ 25
15.3.11 Object activities ......................................................................................................... 28
15.4 Arrays as objects .................................................................................................................... 29
15.4.1 Array method: join ....................................................................................................... 29
15.4.2 Array method: sort ....................................................................................................... 30
15.4.3 Array method: reverse ................................................................................................. 31
15.4.4 Single and multi-dimensional arrays ........................................................................... 32
15.5 Objects as associative arrays .................................................................................................. 33
15.5.1 Enumerating associative arrays with FOR/IN loop statements .................................... 33
15.5.2 Using FOR/IN for numerically index arrays................................................................ 34
15.5.3 Activities and further work .......................................................................................... 36
15.6 Review Questions .................................................................................................................. 41
15.7 Discussion Topics .................................................................................................................. 42
15.8 Answers.................................................................................................................................. 42
15.8.1 Discussions of Exercise 1 ............................................................................................ 43
15.8.2 Discussions of Exercise 2 ............................................................................................ 43
15.8.3 Discussions of Activity 1 ............................................................................................. 44
15.8.4 Discussions of Activity 2 ............................................................................................. 44
15.8.5 Discussions of Exercise 3 ............................................................................................ 45
15.8.6 Discussions of Activity 3 ............................................................................................. 45
15.8.7 Discussions of Activity 4 ............................................................................................. 47
15.8.8 Discussions of Activity 5 ............................................................................................. 47
15.8.9 Discussions of Activity 6 ............................................................................................. 48
15.8.10 Discussions of Activity 7 ........................................................................................... 48
, 15.8.11 Discussions of Activity 8 ........................................................................................... 49
15.8.12 Answers to Review Questions ................................................................................... 51
15.8.13 Contribution to Discussion Topics............................................................................. 51
Objectives
At the end of this chapter you will be able to:
• Understand the basic features of JavaScript arrays;
• Understand the fundamental elements of JavaScript arrays;
• Write HTML files using JavaScript arrays;
• Explain the JavaScript object model;
• Use arrays as objects.
15.1 Introduction
Most high level computer programming languages provide ways for groups of related data to be collected
together and referred to by a single name. JavaScript offers objects and arrays for doing so. JavaScript arrays are
rather different from arrays in many programming languages: all arrays are objects (as in many other languages),
but they are also associative arrays. Also, all objects can also be used as if they, too, are arrays.
This chapteris organised into four sections. It introduces arrays and objects separately, then considers arrays as
objects, then finally considers objects as (associative) arrays. Many important concepts are covered in this unit,
although much of the object technology concepts have been introduced in earlier units.
When working with variables, an important distinction has to be made: is the variable contain the value of a
primitive type, or does it contain a reference to a (non-primitive) collection of data. A thorough grounding in the
concepts covered in this chapter is necessary to both be able to understand the sophisticated Javascipt scripts written
to support complex websites, and to be able to begin developing JavaScript solutions yourself for real world
problems. It is important to work through examples until you understand them; write your own programmes that
use and test your learning. Programming is learnt through doing as much, or more so, than by reading.
15.2 Arrays
15.2.1 Introduction to arrays
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:
Index Value
weekDays[0] "Monday"
weekDays[1] "Tuesday"
weekDays[2] "Wednesday"
weekDays[3] "Thursday"
weekDays[4] "Friday"
weekDays[5] "Saturday"
weekDays[6] "Sunday"
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".
DEFINITION - Array
2
,An array is a tabular arrangement of values. Values can be retrieved by referring to the array name together with
the numeric index of the part of the table storing the desired value.
As you may have spotted, by having a loop with a numeric variable we can easily perform an action on all, or some
sub-sequence, of the values stored in the array.
15.2.2 Indexing of array elements
As can be seen from the above figure, there are seven elements in the weekDays array.
DEFINITION — element
Arrays are composed of a numbered sequence of elements. Each element of an array can be thought of as a row (or
sometimes column) in a table of values.
The seven elements are indexed (numbered) from zero (0) to six (6). Although it might seem strange to start by
numbering the first element at zero, this way of indexing array elements is common to many high-level
programming languages (include C, C++ and Java), and has some computational advantages over arrays that start
at 1.
Note
The index of an array element is also known as its subscript. The terms array index and array subscript can be used
interchangeably. In this unit we consistently use the term index for simplicity.
Exercise 1
Answer the following questions about the weekDays array:
• What is the first element?
• What is the last element?
• What is the 4th element?
• What is the value of the first element?
• What is the value of the 4th element?
• What is the element containing String "Monday"?
• What is the element containing String "Saturday"?
• What is the index of the element containing String "Monday"?
• What is the index of the element containing String "Saturday"?
15.2.3 Creating arrays and assigning values to their
elements
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);
3
, This line declares a new variable called weekDays and makes this new variable refer to a new Array object that can
hold seven elements.
Note
The concept of arrays as objects is discussed later this unit.
The seven statements that follow this line assign the Strings "Monday" - "Sunday" to the array elements
weekDays[0] to weekDays[6] respectively.
15.2.4 Creating and initialising arrays in a single
statement
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.
15.2.5 Displaying the contents of arrays
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( "<b> Weekdays: </b>" + weekDays);
Produces the following output in a browser:
15.2.6 Array length
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);
4
