Javascript Arrays

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
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.
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
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
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 ([])
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
Fig. 10.1 | Array with 12 elements.
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.
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
12
Assuming that the elements of an array are

initialized when the array is allocated may
result in logic errors.
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
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

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

16
Fig. 10.3 | Initializing the elements of an array (Part 3 of 3).
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.
18
Referring to an element outside the Array

bounds is normally a logic error.
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.
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
21
Fig. 10.4 |
Declaring and
initializing
arrays (Part 1 of
3).
Creates an array with four

elements, all of which are
defined
elements, all of which are
defined in an initializer list
elements, two of which reserve
space for values to be specified
later

22
Fig. 10.4 |
Declaring and
initializing
arrays (Part 2 of
3).

23
Fig. 10.4 | Declaring and initializing arrays (Part 3 of 3).
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
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

Fig. 10.5 |
Summing
elements of an
array (Part 2 of
2).
26

27

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.
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

29
Outputs results in a table
Fig. 10.6 | Dicerolling program

using an array
instead of a
switch (Part 2 of
2).

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
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

32
Fig. 10.7 | Random image generation using arrays (Part 2 of 2).
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
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
35

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.
36

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.
37

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.
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
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

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

41
Fig. 10.8 | Passing arrays and individual array elements to functions (Part 3 of 3).
42

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.
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
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

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).

46
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.
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
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

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

50
Fig. 10.10 |
Linear search of
an array (Part 3
of 3).
When the Search button is
pressed, calls function
buttonPressed

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
52
Fig. 10.11 |
Binary search of
an array (Part 1
of 5).

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

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

55
Fig. 10.11 |
Binary search of
an array (Part 4
of 5).

56
Fig. 10.11 | Binary search of an array (Part 5 of 5).
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
58
Fig. 10.12 | Two-dimensional array with three rows and four columns.
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
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

61
Fig. 10.13 |
Initializing
multidimensional
arrays (Part 2 of
2).

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
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

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]

65
Fig. 10.14 | Online quiz

graded with JavaScript
(Part 3 of 3).

Javascript Arrays

Uploaded by

Copyright:

Available Formats

Javascript Arrays

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Arrays

Uploaded by

Copyright:

Available Formats

1

2008 Pearson Education, Inc. All rights reserved.

With sobs and tears he sorted out

Attempt the end, and never stand to doubt;

Now go, write it before them in a table,

Tis in my memory lockd,

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

Declaring and Allocating Arrays

Examples Using Arrays

Random Image Generator Using Arrays

References and Reference Parameters

Passing Arrays to Functions

Searching Arrays: Linear Search and Binary Search

Building an Online Quiz

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

Each individual location is called an element

2008 Pearson Education, Inc. All rights reserved.

10.2 Arrays (Cont.)

Every array in JavaScript knows its own length, which it

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

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education,

10.3 Declaring and Allocating Arrays

2008 Pearson Education, Inc. All rights reserved.

Common Programming Error 10.2

Assuming that the elements of an array are

2008 Pearson Education, Inc. All rights reserved.

10.4 Examples Using Arrays

2008 Pearson Education, Inc. All rights reserved.

Operator new allocates

Operator new allocates an

2008 Pearson Education,

Outputs the subscript and value

2008 Pearson Education,

Fig. 10.3 | Initializing the elements of an array (Part 3 of 3).

2008 Pearson Education, Inc. All rights reserved.

Software Engineering Observation 10.1

2008 Pearson Education, Inc. All rights reserved.

Common Programming Error 10.3

Referring to an element outside the Array

2008 Pearson Education, Inc. All rights reserved.

Error-Prevention Tip 10.1

2008 Pearson Education, Inc. All rights reserved.

10.4 Examples Using Arrays (Cont.)

The initial values of an array can be specified as

2008 Pearson Education, Inc. All rights reserved.

Creates an array with four

2008 Pearson Education,

2008 Pearson Education,

Fig. 10.4 | Declaring and initializing arrays (Part 3 of 3).

2008 Pearson Education, Inc. All rights reserved.

10.4 Examples Using Arrays (Cont.)

2008 Pearson Education, Inc. All rights reserved.