Simple Types






Simple Types

JavaScript is a trim language, with just enough functionality to do the jobno more, no less. However, as I've said before, it is a confusing language in some respects.

For instance, there are just three simple data types: string, numeric, and boolean. Each is specifically differentiated by the literal it contains: string, numeric, and boolean. However, there are also built-in objects known as number, string, and boolean. These would seem to be the same thing, but aren't: the first three are classifications of primitive values, while the latter three are complex constructions with a type of their own: object.

Rather than mix type and object, in the next three sections, we'll look at each of the simple data types, how they're created, and how values of one type can be converted to others. In Chapter 4, we'll look at these and other built-in JS objects, and the methods and properties accessible with each.

The String Data Type

A string variable was demonstrated in Figure. Since JavaScript is a loosely typed language, there isn't anything to differentiate it from a variable that's a number or a boolean, other than the literal value assigned it when it's initialized and the context of the use.

A string literal is a sequence of characters delimited by single or double quotes:

"This is a string"
'But this is also a string'

There is no rule as to which type of quote you use, except that the ending quote character must be the same as the beginning one. Any variation of characters can be included in the string:

"This is 1 string."
"This is--another string."

Not all characters are treated equally within a string in JavaScript. A string can also contain an escape sequence, such as \\n for end-of-line terminator.

An escape sequence is a set of characters in which certain characters are encoded in order to include them within the string. The following snippet of code assigns a string literal containing a line-terminator escape sequence to a variable. When the string is used in a dialog window, the escape sequence, \\n, is interpreted literally, and a new line is published:

var string_value = "This is the first line\nThis is the second line";

This results in:

This is the first line
This is the second line

The two different types of quotes, single and double, can be used interchangeably if you need to include a quote within the quoted string:

var string_value = "This is a 'string' with a quote."

or:

var string_value = 'This is a "string" with a quote.'

You can also use the backslash to denote that the quote in the string is meant to be taken as a literal character, not an end-of-string terminator:

var string_value = "This is a \"string\" with a quote."

To include a backslash in the string, use two backslashes in a row:

var string_value = "This is a \\string\\ with a backslash."

The result of this line of code is a string with two backslashes, one on either side of the word string.

There is also a JavaScript function, escape, that encodes an entire string, converting ASCII to URL Encoding (ISO Latin-1 [ISO 8859-1]), which can be used in HTML processing. This is particularly important if you're processing data for web applications. Figure demonstrates how escape works with a couple of different strings.

Using the escape function to escape strings

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Convert Object to String</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[

var sOne = escape("http://oreilly.com");
document.writeln("<p>" + sOne + "</p>");

var sTwo = escape("http://burningbird.net/index.php?pagename=$1&page=$2");
document.writeln("<p>" + sTwo + "</p>");

//]]>
</script>
</body>
</html>

The result of the program is the following two escaped strings:

http%3A//oreilly.com

http%3A//burningbird%2Cnet/index.php%3Fpagename%3D%241%26page%3D%242

Characters that are escaped are spaces, colons, slashes, and other characters meaningful in an HTML context. To return the string to the original, use the unescape function on the modified string.

Though handy enough, the problem with escape is that it doesn't work with non-ASCII characters. There are, however, two functionsencodeURI and decodeURIthat provide encoding beyond just the ASCII character set. The encoding that's followed is shown in Figure, replicated from the Mozilla Core JavaScript 1.5 Reference.

Characters subject to URI encoding
TypeIncludes
Reserved characters; , / ? : @ & = + $
Unescaped charactersAlphabetic, decimal digits, - _ . ! ~ * ' ( )
Score#


If the body of the JavaScript block in Figure is replaced with the following:

var sURL = "http://oreilly.com/this_is_a_value&some-value='some value'";
sURL = encodeURI(sURL);
document.writeln("<p>" + sURL + "</p>");

Here's the resulting string printed to the page:

http://oreilly.com/this_is_a_value&some-value='some%20value'

The function decodeURI can then be used to retrieve the original, nonescaped string.

There are two other functions for URI encodingencodeURIComponent and decodeURIComponentthat are used in Ajax operations because they also encode &, +, and =, but we'll look at those in Chapter 13.

You can also include Unicode characters in a string by preceding the four-digit hexadecimal value of the character with \\u. For instance, the following outputs the Chinese (simplified) ideogram for "love":

document.writeln("\u7231");

What displays is somewhat browser-dependent; however, most of the more commonly used browsers now have adequate Unicode support.

Learn more about Unicode and access relevant charts at http://www.unicode.org/.


The empty string is a special case; it's commonly used to initialize a string variable when it's defined. Following are examples of empty strings:

var string_value = '';
var string_value = "";

Which quote character you use makes no difference to the JavaScript engine. What's more important is to use one or the other consistently.


These are all demonstrations of how to explicitly create a string variable, and variations of string literals that incorporate special characters. The values within a specific variable can also be converted from other data types, depending on the context.

If a numeric or Boolean variable is passed to a function that expects a string, the value is implicitly converted to a string first, before the value is processed:

var num_value = 35.00;
alert(num_value);

In addition, when variables are added, depending on the context, nonstring values are also converted to strings. You've seen this in action when nonstring values are added (concatenated) to a string to be published in a dialog window:

var num_value = 35.00;
var string_value = "This is a number:" + num_value;

You can also explicitly convert a variable to a string using string (toString in ECMAScript). If the value being converted is a boolean, the resulting string is a text representation of the Boolean value: "true" for true; "false" for false. For numbers, the string is, again, a string representation of the number, such as "123.06" for 123.06, depending on the number of digits and the precision (placement of the decimal point). A value of NaN (Not a Number, discussed later) returns "NaN".

Figure shows the results of using String on different data types.

toString conversion table
InputResult
Undefined "undefined"
Null "null"
Boolean If true, then "true"; if false, then "false"
Number See chapter text
String No conversion
Object A string representation of the default representation of the object


The last item in Figure discusses how a string conversion works with an object. Within the ECMAScript specification, the conversion routines first call the toPrimitive function, before the type conversion. The toPrimitive function calls the DefaultValue object method, if any, and returns the result. For instance, using toString on the String object itself returns a value of the following in some browsers:

[object Window]

This can be useful if you wish to drill into the value held in a variable for debugging purposes.

The Boolean Data Type

The boolean data type has two values: true and false. They are not surrounded by quotes; in other words, "false" is not the same as false.

The function Boolean (ToBoolean in ECMAScript) can convert another value to boolean true or false, according to Figure.

ToBoolean conversion table
InputResult
Undefined false
Null false
Boolean Value of value
Number Value of false if number is 0 or NaN; otherwise, TRue
String Value of false if string is empty; otherwise, true
Object TRue


The Number Data Type

Numbers in JavaScript are floating-point numbers, but they may or may not have a fractional component. If they don't have a decimal point or fractional component, they're treated as integersbase-10 whole numbers in a range of 253 to 253. Following are valid integers:

-1000
0
2534

The floating-point representation has a decimal, with a decimal component to the right. It could also be represented as an exponent, using either a superscript or exponential notation. All of the following are valid floating-point numbers:

0.3555
144.006
-2.3
442
19.5e-2 (which is equivalent to 19.5-2)

Though larger numbers are supported, some functions can work only with numbers in a range of 2e31 to 2e31 (2,147,483,648 to 2,147,483,648); as such, you should limit your number use to this range.

There are two special numbers: positive and negative infinity. In JavaScript, they are represented by Infinity and -Infinity. A positive infinity is returned whenever a math overflow occurs in a JS application.

In addition to base-10 representation, octal and hexadecimal notation can be used, though octal is newer and may be confused for hexadecimal with older browsers. A hexadecimal number begins with a zero, followed by an x:

-0xCCFF

Octal values begin with zeros, and there is no leading x:

0526

You can convert strings or booleans to numbers; two functions, parseInt and parseFloat, manage the conversion depending on the type of number you want returned.

The parseInt function returns the integer portion of a number in a string, whether the string is formatted as an integer or floating point. The parseFloat function returns the floating-point value until a nonnumeric character is reached. In Figure, three strings containing numeric values are passed to either parseInt or parseFloat, and the values are written to the page.

Converting strings to numbers using different global functions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Convert String to Number</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
<script type="text/javascript">
//<![CDATA[

var sNum = "1.23e-2";
document.writeln(parseFloat(sNum));

var fValue = parseFloat("1.45inch");
document.writeln("<p>" + fValue + "</p>");

var iValue = parseInt("33.00");
document.writeln("<p>" + iValue + "</p>");

//]]>
</script>
</p>
</body>
</html> 

Using Firefox as a browser, the values printed out are:

0.0123
1.45
33

Notice with the first value, the number is printed out in decimal notation rather than the exponential notation of the original string value. Also note that parseInt truncates the fractional component of the number.

The parseInt function can convert an octal or hexadecimal number back to base-10 representation. There is a second parameter to the function, base, which is 10 or base 10, by default. If any other base is specified, in a range from 2 to 36, the string is interpreted accordingly. If you replace the document output JavaScript in Figure with the following:

var iValue = parseInt("0266",8);
document.writeln("<p>" + iValue + "</p>");

var iValue = parseInt("0x5F",16);
document.writeln("<p>" + iValue + "</p>");

These octal and hexidecimal values are printed out to the page:

182

95

In addition to parseInt and parseFloat, the Number function also converts numbers. The type returned after conversion is dependent on the representation: floating-point strings return floating-point numbers; integer strings, integers. Conversion to numbers from each type is shown in Figure.

Conversion from other data types to numbers
InputResult
Undefined NaN
Null 0
Boolean If true, the result is 1; otherwise 0
Number Straight value
String See chapter text
Object Numeric representation of the default representation of the object


In addition to converting strings to numbers, you can also test the value of a variable to see if it's infinity through the IsFinite function. If the value is infinity or NaN, the function returns false; otherwise, it returns true.

There are other functions that work on numbers, but they're associated with the Number object, discussed in Chapter 4. For now, we'll continue to look at the primitive types with two special JavaScript types: null and undefined.

Null and Undefined

The division between literals, simple data types, and objects is blurred in JavaScript, nowhere more so then when looking at two that represent nonexistence or incomplete existence: null and undefined.

A null variable is one that has been defined, but hasn't been assigned a value. The following is an example of a null variable:

alert(sValue); // results in JavaScript error because sValue is not declared first

In this example, the variable sValue has not not been declared either through the use of the var keyword or by being passed as a parameter to a function. If the variable has been declared but not initialized, it is considered undefined.

var sValue;
alert(sValue); // no error, and a window with the word 'undefined' is opened

A variable is not null and not undefined when it is both declared and given an initial value:

var sValue = "";

When using several JS libraries and fairly complex code, it's not unusual for a variable to not get set, and trying to use it in an expression can have adverse effectsusually a JavaScript error. One approach to test variables if you're unsure of their state is to use the variable in a conditional test, such as the following:

if (sValue) ... // if not null and initialized, expression is true; otherwise false

We'll look at conditional statements in the next chapter, but the expression consisting of just the variable sValue evaluates to TRue if sValue has been declared and initialized; otherwise, the result of the expression is false:

if (sValue) // not true, as variable has not been declared, and is therefore null

var sValue;
if (sValue) // variable is not null, but it's still not true, as variable has not been defined (initialized with a value)

var sValue = 1;
if (sValue) // true now, as variable has been set, which automatically declares it

Using the null keyword, you can specifically test to see whether a value is null:

if (sValue == null)

In JavaScript, a variable is undefined, even if declared, until it is initialized. It differs from null in that using a null value as a parameter to a function results in an error, while using an undefined variable usually does not:

alert(sValue); // JS error results, "Error: sValue is not defined"
var sValue; // no JS error and the window reads, "undefined" which is the value of the object

A variable can be undeclared but initialized, in which case it is not null and not undefined. However, in this instance, it's considered a global variable, and as discussed earlier, not specifically declaring variables with var causes problems more often than not.

Though not related to existence, there is a third unique value related to the type of a variable: NaN, or Not A Number. If a string or Boolean variable cannot be coerced into a number, it's considered NaN and treated accordingly:

var nValue = 1.0;
if (nValue == 'one' ) // false, the second operand is NaN

You can specifically test whether a variable is NaN with the isNaN function:

if (isNaN(sValue)) // if string cannot be implicitly converted into number, return true

By its very nature, a null value is NaN, so it is undefined.

Author and respected technologist Simon Willison gave an excellent talk at O'Reilly's 2006 ETech conference titled, "A (Re)-Introduction to JavaScript." You can view his slides at his web site, http://simon.incutio.com/slides/2006/etech/javascript/js-tutorial.001.html. The whole presentation is a very worthwhile read, but my favorite is the following line:

0, "", NaN, null, and undefined are falsy. Everything else is truthy.

In other words, zero, null, NaN, and the empty string are inherently false; everything else is inherently true.


For the most part, JavaScript developers create code in such a way that we know a variable is going to be defined ahead of time and/or given a value. In most instances, we don't explicitly test to see whether a variable is set, and if so, whether it's assigned a value.

However, when using large and complex JS libraries, and applications that can incorporate web service responses, it becomes increasingly important to test variables that originate and/or are set outside of our controlnot to mention to be aware of how null and undefined variables behave when accessed in the application.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows