1
1
0
JavaScript: Arrays
2008 Pearson Education, Inc. All rights reserved.
With sobs and tears he sorted out
Those of the largest size . . .
Lewis Carroll
Attempt the end, and never stand to doubt;
Nothings so hard, but search will find it out.
Robert Herrick
Now go, write it before them in a table,
and note it in a book.
Isaiah 30:8
Tis in my memory lockd,
And you yourself shall keep the key of it.
William Shakespeare
2008 Pearson Education, Inc. All rights reserved.
OBJECTIVES
In this chapter you will learn:
To use arrays to store lists and tables of
values.
To declare an array, initialize an array and
refer to individual elements of an array.
To pass arrays to functions.
To search and sort an array.
To declare and manipulate
multidimensional arrays.
2008 Pearson Education, Inc. All rights reserved.
10.1
Introduction
10.2
Arrays
10.3
Declaring and Allocating Arrays
10.4
Examples Using Arrays
10.5
Random Image Generator Using Arrays
10.6
References and Reference Parameters
10.7
Passing Arrays to Functions
10.8
Sorting Arrays
10.9
Searching Arrays: Linear Search and Binary Search
10.10
Multidimensional Arrays
10.11
Building an Online Quiz
10.12
Wrap-Up
10.13
Web Resources
2008 Pearson Education, Inc. All rights reserved.
10.1 Introduction
Arrays
Data structures consisting of related data items
Sometimes called collections of data items
JavaScript arrays
dynamic entities that can change size after they are
created
2008 Pearson Education, Inc. All rights reserved.
10.2 Arrays
An array is a group of memory locations
All have the same name and normally are of the same type
(although this attribute is not required in JavaScript)
Each individual location is called an element
An element may be referred to by giving the
name of the array followed by index of the
element in square brackets ([])
2008 Pearson Education, Inc. All rights reserved.
10.2 Arrays (Cont.)
The first element in every array is the zeroth element.
The ith element of array c is referred to as c[i-1].
Array names follow the same conventions as other
identifiers
A subscripted array name
can be used on the left side of an assignment to place a new value into an
array element
can be used on the right side of an assignment operation to use its value
Every array in JavaScript knows its own length, which it
stores in its length attribute and can be found with the
expression arrayname.length
2008 Pearson Education, Inc. All rights reserved.
Fig. 10.1 | Array with 12 elements.
2008 Pearson Education, Inc. All rights reserved.
Common Programming Error 10.1
It is important to note the difference between
the seventh element of the array and array
element seven. Because array subscripts
begin at 0, the seventh element of the array
has a subscript of 6, while array element seven
has a subscript of 7 and is actually the eighth
element of the array. This confusion is a
source of off-by-one errors.
2008 Pearson Education, Inc. All rights reserved.
10
Fig. 10.2 |
Precedence and
associativity of
the operators
discussed so
far.
2008 Pearson Education,
Inc. All rights reserved.
11
10.3 Declaring and Allocating Arrays
JavaScript arrays are Array objects.
Creating new objects using the new operator is
known as creating an instance or instantiating an
object
Operator new is known as the dynamic memory
allocation operator
2008 Pearson Education, Inc. All rights reserved.
12
Common Programming Error 10.2
Assuming that the elements of an array are
initialized when the array is allocated may
result in logic errors.
2008 Pearson Education, Inc. All rights reserved.
13
10.4 Examples Using Arrays
Zero-based counting is usually used to iterate
through arrays
JavaScript reallocates an Array when a value is
assigned to an element that is outside the bounds
of the original Array
Elements between the last element of the original
Array and the new element have undefined
values
2008 Pearson Education, Inc. All rights reserved.
Fig. 10.3 |
Initializing the
elements of an
array (Part 1 of
3).
14
Operator new allocates
an Array called n1 with
five elements
Operator new allocates an
empty Array called n2
Zero-based counting used in
for loop to set each elements
value equal to its subscript
Five elements added and
initialized in n2, which
dynamically expands
2008 Pearson Education,
Inc. All rights reserved.
Fig. 10.3 |
Initializing the
elements of an
array (Part 2 of
3).
15
Outputs the subscript and value
of every array element in a table
2008 Pearson Education,
Inc. All rights reserved.
16
Fig. 10.3 | Initializing the elements of an array (Part 3 of 3).
2008 Pearson Education, Inc. All rights reserved.
17
Software Engineering Observation 10.1
JavaScript automatically reallocates an Array
when a value is assigned to an element that is
outside the bounds of the original Array .
Elements between the last element of the
original Array and the new element have
undefined values.
2008 Pearson Education, Inc. All rights reserved.
18
Common Programming Error 10.3
Referring to an element outside the Array
bounds is normally a logic error.
2008 Pearson Education, Inc. All rights reserved.
19
Error-Prevention Tip 10.1
When using subscripts to loop through an
Array, the subscript should never go below 0
and should always be less than the number of
elements in the Array (i.e., one less than the
size of the Array ). Make sure that the loopterminating condition prevents the access of
elements outside this range.
2008 Pearson Education, Inc. All rights reserved.
20
10.4 Examples Using Arrays (Cont.)
Arrays can be created using a comma-separated
initializer list enclosed in square brackets ([])
The arrays size is determined by the number of values in
the initializer list
The initial values of an array can be specified as
arguments in the parentheses following new
Array
The size of the array is determined by the number of
values in parentheses
2008 Pearson Education, Inc. All rights reserved.
21
Fig. 10.4 |
Declaring and
initializing
arrays (Part 1 of
3).
Creates an array with four
elements, all of which are
defined
Creates an array with four
elements, all of which are
defined in an initializer list
Creates an array with four
elements, two of which reserve
space for values to be specified
later
2008 Pearson Education,
Inc. All rights reserved.
22
Fig. 10.4 |
Declaring and
initializing
arrays (Part 2 of
3).
2008 Pearson Education,
Inc. All rights reserved.
23
Fig. 10.4 | Declaring and initializing arrays (Part 3 of 3).
2008 Pearson Education, Inc. All rights reserved.
24
10.4 Examples Using Arrays (Cont.)
forin statement
Enables a script to perform a task for each element in an array
Process is known as iterating over the elements of an array
2008 Pearson Education, Inc. All rights reserved.
Fig. 10.5 |
Summing
elements of an
array (Part 1 of
2).
25
Sums the values of all the
elements in theArray
by iterating through the
elements in order
Sums the values of all the
elements in theArray by
having JavaScript automatically
iterate over its elements
2008 Pearson Education,
Inc. All rights reserved.
Fig. 10.5 |
Summing
elements of an
array (Part 2 of
2).
26
2008 Pearson Education,
Inc. All rights reserved.
27
Error-Prevention Tip 10.2
When iterating over all the elements of an
Array, use a forin statement to ensure that
you manipulate only the existing elements of
the Array. Note that a forin statement skips
any undefined elements in the array.
2008 Pearson Education, Inc. All rights reserved.
28
Fig. 10.6 | Dicerolling program
using an array
instead of a
switch (Part 1 of
2).
Creates a frequency array with
each elements index
corresponding to a face value (we
leave index 0 uninitialized because
the lowest face value is 1)
Randomly picks a face of the die
and increments the value of the
element with the corresponding
index in the frequency array
2008 Pearson Education,
Inc. All rights reserved.
29
Outputs results in a table
Fig. 10.6 | Dicerolling program
using an array
instead of a
switch (Part 2 of
2).
2008 Pearson Education,
Inc. All rights reserved.
10.5 Random Image Generator Using
Arrays
30
Random image generator
Uses a pictures array to store the names of the image files as strings
Accesses the array using a randomized index
2008 Pearson Education, Inc. All rights reserved.
31
Fig. 10.7 |
Random image
generation
using arrays
(Part 1 of 2).
Creates an array with the names
of the images to choose from
Randomly selects an element
from the array and appends
its value to .gif\ to
create the src attributes
value
2008 Pearson Education,
Inc. All rights reserved.
32
Fig. 10.7 | Random image generation using arrays (Part 2 of 2).
2008 Pearson Education, Inc. All rights reserved.
10.6 References and Reference
Parameters
33
Two ways to pass arguments to functions (or methods)
pass-by-value
pass-by-reference
Pass-by-value
a copy of the arguments value is made and is passed to the called function
In JavaScript, numbers, boolean values and strings are passed to
functions by value.
Pass-by-reference
The caller gives the called function direct access to the callers data and allows it to modify
the data if it so chooses
Can improve performance because it can eliminate the overhead of copying large amounts of
data, but it can weaken security because the called function can access the callers data
2008 Pearson Education, Inc. All rights reserved.
10.6 References and Reference
Parameters (Cont.)
34
All objects are passed to functions by reference
Arrays are objects in JavaScript, so Arrays are passed to
a function by reference
a called function can access the elements of the callers original Arrays.
Name of an array
actually a reference to an object that contains the array elements and
the length variable
2008 Pearson Education, Inc. All rights reserved.
35
Error-Prevention Tip 10.3
With pass-by-value, changes to the copy of the
called function do not affect the original
variables value in the calling function. This
prevents the accidental side effects that so
greatly hinder the development of correct and
reliable software systems.
2008 Pearson Education, Inc. All rights reserved.
36
Software Engineering Observation 10.2
Unlike some other languages, JavaScript does
not allow the programmer to choose whether
to pass each argument by value or by
reference. Numbers, boolean values and
strings are passed by value. Objects are passed
to functions by reference. When a function
receives a reference to an object, the function
can manipulate the object directly.
2008 Pearson Education, Inc. All rights reserved.
37
Software Engineering Observation 10.3
When returning information from a function
via a return statement, numbers and boolean
values are always returned by value (i.e., a
copy is returned), and objects are always
returned by reference (i.e., a reference to the
object is returned). Note that, in the pass-byreference case, it is not necessary to return the
new value, since the object is already modified.
2008 Pearson Education, Inc. All rights reserved.
38
10.7 Passing Arrays to Functions
Pass an array as an argument to a function
Specify the name of the array (a reference to the array) without brackets
Although entire arrays are passed by reference, individual numeric
and boolean array elements are passed by value exactly as simple
numeric and boolean variables are passed
Such simple single pieces of data are called scalars, or scalar quantities
To pass an array element to a function, use the subscripted name of the element as an
argument in the function call
join method of an Array
Returns a string that contains all of the elements of an array, separated by the string
supplied in the functions argument
If an argument is not specified, the empty string is used as the separator
2008 Pearson Education, Inc. All rights reserved.
Fig. 10.8 |
Passing arrays
and individual
array elements
to functions
(Part 1 of 3).
39
Passes array a to function
modifyArray by reference
Passes array element a[3] to
function modifyElement by
value
2008 Pearson Education,
Inc. All rights reserved.
Fig. 10.8 |
Passing arrays
and individual
array elements
to functions
(Part 2 of 3).
Creates a string
containing all the
elements in
theArray,
separated by
40
Multiplies each element in
theArray by 2, which persists
after the function has finished
Multiplies the array element by
2, but only for the duration of
the function
2008 Pearson Education,
Inc. All rights reserved.
41
Fig. 10.8 | Passing arrays and individual array elements to functions (Part 3 of 3).
2008 Pearson Education, Inc. All rights reserved.
42
Software Engineering Observation 10.4
JavaScript does not check the number of
arguments or types of arguments that are
passed to a function. It is possible to pass any
number of values to a function. JavaScript will
attempt to perform conversions when the
values are used.
2008 Pearson Education, Inc. All rights reserved.
43
10.8 Sorting Arrays
Sorting data
Putting data in a particular order, such as ascending or descending
One of the most important computing functions
Array object in JavaScript has a built-in method sort
With no arguments, the method uses string comparisons to determine the sorting order of
the Array elements
Method sort takes as its optional argument the name of a function (called the comparator
function) that compares its two arguments and returns a negative value, zero, or a positive
value, if the first argument is less than, equal to, or greater than the second, respectively
Functions in JavaScript are considered to be data
They can be assigned to variables, stored in Arrays and passed to functions just like other
data
2008 Pearson Education, Inc. All rights reserved.
44
Fig. 10.9 |
Sorting an array
with sort (Part
1 of 2).
Passes function
compareIntegers to method
a.sort to arrange the elements
of a in ascending numerical
order
2008 Pearson Education,
Inc. All rights reserved.
Defines a function
comparing integers
to be passed to
method sort (to
replace the default
string comparison
function)
45
Fig. 10.9 |
Sorting an array
with sort (Part
2 of 2).
2008 Pearson Education,
Inc. All rights reserved.
46
Software Engineering Observation 10.5
Functions in JavaScript are considered to be
data. Therefore, functions can be assigned to
variables, stored in Arrays and passed to
functions just like other data types.
2008 Pearson Education, Inc. All rights reserved.
10.9 Searching Arrays: Linear Search and
Binary Search
47
Linear search algorithm
Iterates through the elements of an array until it finds an element that
matches a search key, and returns the subscript of the element
If the key is not found, the function returns -1
If the array being searched is not in any particular order, it is just as
likely that the value will be found in the first element as the last
On average, the program will have to compare the search key with half
the elements of the array
2008 Pearson Education, Inc. All rights reserved.
48
Fig. 10.10 |
Linear search of
an array (Part 1
of 3).
Creates a new array to search
Initializes each array element
with a value double its index
2008 Pearson Education,
Inc. All rights reserved.
49
Fig. 10.10 |
Linear search of
an array (Part 2
of 3).
Calls function linearSearch on
array a with the value input by the user
Iterates through every element of
the array until the key is found
If the key is encountered, the
index of the element with the key
as its value is returned
If the key is not found, -1 is
returned
2008 Pearson Education,
Inc. All rights reserved.
50
Fig. 10.10 |
Linear search of
an array (Part 3
of 3).
When the Search button is
pressed, calls function
buttonPressed
2008 Pearson Education,
Inc. All rights reserved.
10.9 Searching Arrays: Linear Search and
Binary Search (Cont.)
51
Binary search algorithm
More efficient than the linear search algorithm
Requires that the array be sorted
Tests the middle element in the array and returns the index if it matches the search key
If not, it cuts the list in half, depending on whether the key is greater than or less than the
middle element, and repeats the process on the remaining half of the sorted list
The algorithm ends by either finding an element that matches the search key or reducing the
subarray to zero size
Tremendous increase in performance over the linear search
For a one-billion-element array, this is the difference between an average of 500 million
comparisons and a maximum of 30 comparisons
The maximum number of comparisons needed for the binary search
of any sorted array is the exponent of the first power of 2 greater
than the number of elements in the array
2008 Pearson Education, Inc. All rights reserved.
52
Fig. 10.11 |
Binary search of
an array (Part 1
of 5).
2008 Pearson Education,
Inc. All rights reserved.
53
Fig. 10.11 |
Binary search of
an array (Part 2
of 5).
Calls function binarySearch with
arguments a and the key
specified by the user
While the search has not checked
all values, find the midpoint of the
unchecked region
Displays the portion of the array
currently being examined
2008 Pearson Education,
Inc. All rights reserved.
If the middle elements value is
10.11 |
the key, return itsFig.
subscript
54
Binary search of
an array (Part 3
Otherwise, if of
the5).
middle
elements value is higher than
the key, we only need to search
the bottom half of the array
Otherwise, if the middle
elements value is lower than the
key, we only need to search the
higher half of the array
If weve covered the whole array
without encountering the key,
return -1
2008 Pearson Education,
Inc. All rights reserved.
55
Fig. 10.11 |
Binary search of
an array (Part 4
of 5).
2008 Pearson Education,
Inc. All rights reserved.
56
Fig. 10.11 | Binary search of an array (Part 5 of 5).
2008 Pearson Education, Inc. All rights reserved.
57
10.10 Multidimensional Arrays
To identify a particular two-dimensional
multidimensional array element
Specify the two subscripts
By convention, the first identifies the elements row, and the second
identifies the elements column
In general, an array with m rows and n columns is called
an m-by-n array
Two-dimensional array element accessed using an element
name of the form a[ i ][ j ]
a is the name of the array
i and j are the subscripts that uniquely identify the row and column
Multidimensional arrays are maintained as arrays of
arrays
2008 Pearson Education, Inc. All rights reserved.
58
Fig. 10.12 | Two-dimensional array with three rows and four columns.
2008 Pearson Education, Inc. All rights reserved.
59
10.10 Multidimensional Arrays (Cont.)
Multidimensional arrays can be initialized in declarations
like a one-dimensional array, with values grouped by row
in square brackets
The interpreter determines the number of rows by counting the number
of sub initializer
The interpreter determines the number of columns in each row by
counting the number of values in the sub-array that initializes the row
The rows of a two-dimensional array can vary in length
A multidimensional array in which each row has a
different number of columns can be allocated dynamically
with operator new
2008 Pearson Education, Inc. All rights reserved.
60
Fig. 10.13 |
Initializing
multidimensional
arrays (Part 1 of
2).
Initializes array1 with an
initializer list of sub initializer lists
Initializes array2 with rows of
different lengths
Nested forin statements traverse
the arrays by iterating through the
sets of one-dimensional arrays, then
through the elements of each of
those one-dimensional arrays
2008 Pearson Education,
Inc. All rights reserved.
61
Fig. 10.13 |
Initializing
multidimensional
arrays (Part 2 of
2).
2008 Pearson Education,
Inc. All rights reserved.
62
10.11 Building an Online Quiz
XHTML form elements can be accessed individually
using getElementById or through the elements
property of the containing form object
elements property
contains an array of all the forms controls
Property checked of a radio button
true when the radio button is selected
false when the radio button is not selected
2008 Pearson Education, Inc. All rights reserved.
63
Fig. 10.14 |
Online quiz
graded with
JavaScript
(Part 1 of 3).
Checks to see if the second radio button
of the myQuiz form is selected
2008 Pearson Education,
Inc. All rights reserved.
myQuiz.elements[0]
64
myQuiz.elements[1]
Fig. 10.14 |
Online quiz
graded with
JavaScript
(Part 2 of 3).
myQuiz.elements[2]
myQuiz.elements[3]
2008 Pearson Education,
Inc. All rights reserved.
65
Fig. 10.14 | Online quiz
graded with JavaScript
(Part 3 of 3).
2008 Pearson Education, Inc. All rights reserved.
