Further Topics in JavaScript

For example, if you pass a number to the document.write method, JavaScript automatically converts that value into its equivalent string representation.. Similarly, if you test a string

Chapter 11 Further Topics in

had they been covered earlier Now that you have read through the and are experienced with the core JavaScript language, you are

he more advanced and detailed concepts presented here You may prefer, however, to move on to other chapters and learn about the specifics of client-side JavaScript before returning to this chapter

11.1 Data Type Conversion

We've seen that JavaScript is an untyped language (or, perhaps more accurately, a loosely typed or dynamically typed language) This means, for example, that we don't have to specify the data type of a variable when we declare it Being untyped gives JavaScript the flexibility and simplicity that are desirable for a scripting language (although those

features come at the expense of rigor, which is important for the longer, more complex programs often written in stricter languages such as C and Java) An important feature of JavaScript's flexible treatment of data types is the automatic type conversions it performs For example, if you pass a number to the document.write( ) method, JavaScript

automatically converts that value into its equivalent string representation Similarly, if you test a string value in the condition of an if statement, JavaScript automatically converts that string to a boolean value to false if the string is empty and to true

otherwise

The basic rule is that when a value of one type is used in a context that requires a value of some other type, JavaScript automatically attempts to convert the value as needed So, for example, if a number is used in a boolean context, it is converted to a boolean If an object is used in a string context, it is converted to a string If a string is used in a numeric context, JavaScript attempts to convert it to a number Table 11-1

JavaScript

This chapter covers miscellaneous JavaScript topics that would have bogged down

previous chapters

preceding chapters

t prepared to tackle

summarizes each of these conversions it shows the conversion that is performed when a particular type of value is used in a particular context The sections that follow the table provide more detail about type conversions in JavaScript

Table 11-1 Automatic data type conversions

Value Context in which value is used

String Number Boolean Object

Undefined

Table 11-1 Automatic data type conversions

Value Context in which value is used

String Number Boolean Object

Nonempty

string As is

Numeric value of string or

String object

object

object

object Infinity "Infinity" As is true Number

object Negative

infinity "-Infinity" As is true

Number object Any other String value of

true Number

object

object Boolean

Object toString( ) valueOf( ) or toString(

11.1.1 Object-to-Primitive Conversion

Table 11-1 specifies how JavaScript objects are converted to primitive values Several

additional discussion, however First, note that whenever a non-null context, it converts to true This is true for all objects (including all arrays and functions), even wrapper objects that represent

the following objects convert

totrue when used in a boolean context:

details of this conversion require

object is used in a boolean primitive values that convert to false For example, all of

[1]

[1]

Note, though, that in JavaScript 1.1 and 1.2 these objects all convert to false , which is ECMAScript compliant

new Boolean(false) // Internal value is false, but object converts to true

new Number(0)

new String("")

new Array( )

Table 11-1 shows that objects are converted to num

method of the object Most objects inherit the defau

bers by first calling the valueOf( )

ltvalueOf( ) method of Object, which simply returns the object itself Since the default valueOf( ) method does not return a primitive value, JavaScript next tries to convert the object to a number by calling itstoString( ) method and converting the resulting string to a number

s

empty string, which (as you can see in the table) converts to the number zero! Also, if an array has a single element that is a number n, the array converts to a string representation

t, NaN.[2]

This leads to interesting results for arrays Recall that the toString( ) method of array converts the array elements to strings, then returns the result of concatenating these strings, with commas in between Therefore, an array with no elements converts to the

ofn, which is then converted back to n itself If an array contains more than one elemen

or if its one element is not a number, the array converts to

[2] Note, however, that in JavaScript 1.1 and 1.2, when an array is used in a numeric context it is converted to its length

Table 11-1 specifies how an object is converted when used in a string context and how it

is converted when used in a numeric context However, there are a couple of places in JavaScript where the context is ambiguous! The + operator and the comparison operators (<,<=,>, and >=) operate on both numbers and strings, so when an object is used with one of these operators, it is not clear whether it should be converted to a number or a string In most cases, JavaScript first attempts to convert the object by calling its

e case, JavaScript then tries to convert the object to a string by calling its toString( )

d with the + toString( )

because Date has both toString( ) and valueOf( ) methods When a Date is used with +, you almost always want to perform a string concatenation But when using a Date with the comparison operators, you almost always want to perform a numeric comparison to determine which of two times is earlier than the other

Most objects either don't have valueOf( ) methods or don't have valueOf( ) methods that return useful results When you use an object with the + operator, you usually get

valueOf( ) method If this method returns a primitive value (usually a number), that value is used Often, however, valueOf( ) simply returns the unconv rted object; in this method

There is only one exception to this conversion rule: when a Date object is use

perator, conversion is performed with the method This exception exists o

string concatenation rather than addition When you use an object with a comparison operator, you usually get string comparison rather than numeric comparison

An object that defines a custom valueOf( ) method may behave differently If you define a valueOf( ) method that returns a number, you can use arithmetic and other operators with your object, but adding your object to a string may not behave as you

expect: the toString( ) method is no longer called, and a string representation of the number returned by valueOf( ) is concatenated to the string

Finally, remember that valueOf( ) is not called toNumber( ): strictly speaking, its job

is to convert an object to a reasonable primitive value, so some objects may have

valueOf( ) methods that return strings

11.1.2 Explicit Type Conversions

Table 11-1 listed the automatic data type conv

possible to explicitly convert values from one

ersions that JavaScript performs It is also type to another JavaScript does not define

a cast operator as C, C++, and Java do, but it does provide similar facilities for converting

g(

e type For example, you could convert any value x to a string with String(x)

ject(y)

here are a few other tricks that can be useful for performing explicit conversions To convert a value to a string, concatenate it with the empty string:

var x_as_string = x + "";

To force a value to a number, subtract zero from it:

var x_as_number = x - 0;

And to force a value to boolean, use the ! operator twice:

rt data to whatever type is required, explicit conversions are usually unnecessary hey are occasionally helpful,

and more precise

11.1.3 Converting Numbers to Strings

ed in JavaScript Although it usually happens automatically, there are a couple of useful ways to explicitly

data values

As of JavaScript 1.1 (and the ECMA-262 standard), Number( ) , Boolean( ),Strin ), and Object( ) may be called as functions as well as being invoked as constructors When invoked in this way, these functions attempt to convert their arguments to the appropriat

and convert any value y to an object with Ob

T

var x_as_boolean = !!x;

Because of JavaScript's tendency to automatically conve

T however, and can also be used to make your code clearer

The number-to-string conversion is probably the one most often perform

perform this conversion We saw two of them above:

var string_value = String(number); // Use the String( ) constructor var string_value = number + ""; // Concatenate with the empty string

Another technique for converting numbers to strings is with the toString( ) method:

ThetoString( ) method of the Number object (primitive numbers are converted to

nal argument that

fy the argument, the conversion is done in base 10 But you can also convert numbers in other bases (between

2 and 36).[3]

as a function

string_value = number.toString( );

Number objects so that this method can be called) takes an optio

specifies a radix, or base, for the conversion If you do not speci

For example:

an implementation-defined string for any radix other than 10 Thus, conforming implementations may simply ignore the argument and always return a base-10 result In practice, implementations from Netscape and Microsoft do honor the requested radix

var n = 17;

binary_string = n.toString(2); // Evaluates to "10001"

octal_string = "0" + n.toString(8); // Evaluates to "021"

hex_string = "0x" + n.toString(16); // Evaluates to "0x11"

A shortcoming of JavaScript prior to JavaScript 1.5 is that there is no built-in way to convert a number to a string and specify the number of decimal places to be included, or

to specify whether exponential notation should be used This can make it difficult to display numbers that have traditional formats, such as numbers that represent monetary values

ECMAScript v3 and JavaScript 1.5 solve this problem by adding three new number-to-string methods to the Number class toFixed( ) converts a number to a string and displays a specified number of digits after the decimal point It does not use exponential notation.toExponential( ) converts a number to a string using exponential notation, with one digit before the decimal point and a specified number of digits after the decimal point.toPrecision( ) displays a number using the specified number of significant digits It uses exponential notation if the number of significant digits is not large enough

to display the entire integer portion of the number Note that all three of these methods round the trailing digits of the resulting string as appropriate Consider the following examples:

var n = 123456.789;

n.toFixed(0); // "123457"

n.toFixed(2); // "123456.79"

n.toExponential(1); // "1.2e+5"

n.toExponential(3); // "1.235e+5"

n.toPrecision(4); // "1.235e+5"

n.toPrecision(7); // "123456.8"

var number = string_value - 0;

The trouble with this g-to-number conversion is strict It works only with base- s, and although it does allow leading and trailing spaces,

both intege

parseInt(

11.1.4 Converting Strings to Numbers

We've seen that strings that represent numbers are automatically converted to actual numbers when used in a numeric context As shown earlier, we can make this conversion explicit:

var number = Number(string_value);

sort of strin

10 number

that it is overly allow any non-space character

ore flexible conversion

tions convert and retu

o appear in the string following the number

use parseInt( ) and parseFloat( ) ber at the beginning

n-numbers parseInt( ) parse

rs and floating-point numbers If

) interprets it as a hexadecimal

nly integers, while parseFloat( ) parse

a string begins with "0x" or "0X", number.[4] For example:

(but not "0x" or "0X"), parseInt( ) may parse it as an octal

[4]

leading zeros, un

parseFloa 4 meters"); // Ret

arseInt("12.34"); // Returns 12

arseInt("0xFF"); // Returns 255

parseInt( ) can even take a second argument specifying the radix (base) of the number

to be parsed Legal values are between 2 and 36 For example:

parseInt("11", 2); // Returns 3 (1*2 + 1)

parseInt("ff", 16); // Returns 255 (15*16 + 15)

parseInt("zz", 36); // Returns 1295 (35*36 + 35)

parseInt("077", 8); // Returns 63 (7*8 + 7)

parseInt("077", 10); // Returns 77 (7*10 + 7)

IfparseInt( ) or parseFloat( ) cannot convert the specified string to a number, it returns NaN:

parseInt("eleven"); // Returns NaN

parseFloat("$72.47"); // Returns NaN

ript specification s

cimal number Because the behavior is

less you explicitly specify the radix to be used!

"3 blind mice"); //

t("3.1

urns 3 urns 3.14 p

p

11.2 By Value Versus by Reference

ou

ons are performed in that language

e data values These techniques

is the

e and

d the

is the datum is passed to the function; if the

um, the two distinct pieces of data must represent exactly the same value (which

only

y of the value; references to that value are manipulated

In JavaScript, as in all programming languages, there are three important ways that y can manipulate a data value First, you can copy it; for example, by assigning it to a new variable Second, you can pass it as an argument to a function or method Third, you can compare it with another value to see if the two values are equal To understand any programming language, you must understand how these three operati

There are two fundamentally distinct ways to manipulat

are called "by value" and "by reference." When a value is manipulated by value, it

lue of the datum that matters In an assignment, a copy of the actual value is mad

va

that copy is stored in a variable, object property, or array element; the copy an

original are two totally independent valu

ssed by value to a function, a copy of

es that are stored separately When a datum pa

function modifies the value, the change affects only the function's copy of the datum it does not affect the original datum Finally, when a datum is compared by value to another dat

usually means that a byte-by-byte comparison finds them to be equal)

The other way of manipulating a value is by reference With this technique, there is

references to it It is these references that are copied, passed, and compared So, in an assignment made by reference, it is the reference to the value that is assigned, not a copy

s to the

to Both references are equally valid and both

ca the value if the value is changed through one reference, that

e situation is similar when a value

are visible outside the function Finally, when a value is compared to another by

[5]

C programmers and anyone else familiar with the concept of pointers should understand the idea of a reference in this context Note, however, that JavaScript does not support pointers

manipulated by reference, variables do not hold that value directly; they hold only

of the value and not the value itself After the assignment, the new variable refer

same value that the original variable refers

n be used to manipulate

change also appears through the original reference Th

is passed to a function by reference A reference to the value is passed to the function, and the function can use that reference to modify the value itself; any such modifications reference, the two references are compared to see if they refer to the same unique copy of

a value; references to two distinct values that happen to be equivalent (i.e., consist of the same bytes) are not treated as equal

These are two very different ways of manipulating values, and they have important implications that you should understand Table 11-2 summarizes these implications This discussion of manipulating data by value and by reference has been a general one, but the distinctions apply to all programming languages The sections that follow explain how these distinctions apply specifically to JavaScript; they discuss which data types are manipulated by value and which are manipulated by reference

Table 11-2 By value versus by reference

By value By reference

Copy

The value is actually copied;

there are two distinct,

Only a reference to the value is copied If the value is modified through the new reference, that change is also visible through the

independent copies

original reference

Pass

to it have no effect outside the

A reference to the value is passed to the

value through the passed reference, the

A distinct copy of the value is

passed to the function; changes function If the function modifies the

function modification is visible outside the function

Compare

to see if they are the same distinct values are not equal, even if the two

Two distinct values are

compared (often byte by byte)

Two references are compared to see if they refer to the same value Two references to value values consist of the same bytes

11.2.1 Primitive Types and Reference Types

itive types are manipulated by value, and erence types, as the name suggests, are manipulated by reference Numbers and

booleans are primitive types in JavaScript primitive because they consist of nothing

types Arrays and functions, which are specialized types of objects, are therefore also

ry numbers of properties or elements,

by value, as this could involve the inefficien d comparing of large amounts of

should be reference types In fact, though, they are usually considered to be primitive types in JavaScript simply because they are not objects Strings don't actually fit into the primitive versus reference type dichotomy We'll have more to say about strings and their

Th

f

e basic rule in JavaScript is this: prim

re

more than a small, fixed number of bytes that are easily manipulated at the low

(primitive) levels of the JavaScript interpreter Objects, on the other hand, are reference reference types These data types can contain arbitra

so they cannot be manipulated as easily as fixed-size primitive values can Since object

sense to manipulate these types and array values can become quite large, it doesn't make

t copying an memory

What about strings? A string can have an arbitrary length, so it would seem that strings

behavior a little later

The best way to explore the differences between data manipulation by value and by reference is through example Study the following examples carefully, paying attention to the comments Example 11-1 copies, passes, and compares numbers Since numbers are primitive types, this example illustrates data manipulation by value

Example 11-1 Copying, passing, and comparing by value

// First we illustrate copying by value

var n = 1; // Variable n holds the value 1

var m = n; // Copy by value: variable m holds a distinct value 1

// Here's a function we'll use to illustrate passing by value

// As we'll see, the function doesn't work the way we'd like it to function add_to_total(total, x)

{

y of

umbers contained in n and m by value.

The value of n is copied, and that copied value is named total

py of m to that copy of n But adding

affect the original value of n

ad _to_total(n, m);

Now, we'll look at comparison by value

/ In the following line of code, the literal 1 is clearly a distinct

are it to the value held in // n In comparison by value, the bytes of the two numbers are checked to

// see if they are the same

if (n == 1) m = 2; // n contains the same value as the literal 1; m is now 2

Now, consider Example 11-2

total = total + x; // This line changes only the internal cop

total

}

// Now call the function, passing the n

//

within the

// function The function adds a co

// something to a copy of n doesn't

outside

// of the function So calling this function doesn't accomplish

ything.

an

d

/

/

numeric

// value encoded in the program We comp

variable

This example copies, passes, and compares an object Since objects are reference types, these manipulations are performed by reference This example uses Date objects, which you can read more about in the core reference section

of this book

Example 11-2 Copying, passing, and comparing by reference

th variables now refer to the same object

as well

// Here we create an object representing the date of Christmas, 2001 // The variable xmas contains a reference to the object, not the object itself

var xmas = new Date(2001, 11, 25);

// When we copy by reference, we get a new reference to the original object

var solstice = xmas; // Bo

value

// Here we change the object through our new reference to it

solstice.setDate(21);

// The change is visible through the original reference,

xmas.getDate( ); // Returns 21, not the original value of 25

the function can change the contents of the array through

totals[1] = totals[1] + x;

totals[2] = totals[2] + x;

find they are // equal, because they refer to the same object, even though we were

Before we leave the topic of manipulating objects and arrays by reference, we need to

allows a function to assign new values to its arguments and to have those modified values

function A function c ference to erties of th

on overwrites the reference with a reference to a new object hat modification is not visible of the function Readers familiar with the ning of may prefer to say that objects and a e passed by value,

a reference rather than the object itself Example

// The same is true when objects and arrays are passed to functions // The following function adds a value to each element of an array // A reference to the array is passed to the function, not a copy of the array

// Therefore,

// the reference, and those changes will be visible when the function returns.

function add_to_totals(totals, x)

{

totals[0] = totals[0] + x;

}

// Finally, we'll examine comparison by reference

the two variables defined above, we // When we compare

trying

/ to make them refer to different dates:

/

(xmas == solstice) // Evaluates to true

// The two variables defined next refer to two distinct objects, both // of which represent exactly the same date

var xmas = new Date(2001, 11, 25);

var solstice_plus_4 = new Date(2001, 11, 25);

// But, by the rules of "compare by reference," distinct objects are not equal!

(xmas != solstice_plus_4) // Evaluates to true

clear up a point of nomenclature The phrase "pass by reference" can have several

meanings To some readers, the phrase refers to a function invocation technique that

he function This is not the way the term is used in this book

t a reference to an object or array not the object itself is

an use the re modify prop e object or elements

of the array But if the functi

other mea

but the value that is passed is actually

11-3 illustrates th

// This is another version of the add_to_totals( ) function It

doesn't

// work, though, because instead of changing the array itself, it tries

is issue

Example 11-3 References themselves are passed by value

to

// change the reference to the array

function add_to_totals2(totals, x)