buy the book to support the author.

Chapter 8. Values

JavaScript has most of the values that we have come to expect from programming languages: booleans, numbers, strings, arrays, and so on. All normal values in JavaScript have properties.^[9] Each property has a key (or name) and a value. You can think of properties like fields of a record. You use the dot (.) operator to access properties:

> var obj = {}; // create an empty object
> obj.foo = 123;  // write property
123
> obj.foo  // read property
123
> 'abc'.toUpperCase()  // call method
'ABC'

JavaScript’s Type System

This chapter gives an overview of JavaScript’s type system.

JavaScript’s Types

JavaScript has only six types, according to Chapter 8 of the ECMAScript language specification:

An ECMAScript language type corresponds to values that are directly manipulated by an ECMAScript programmer using the ECMAScript language. The ECMAScript language types are:- Undefined, Null- Boolean, String, Number, and- Object

Therefore, constructors technically don’t introduce new types, even though they are said to have instances.

Static Versus Dynamic

In the context of language semantics and type systems, static usually means “at compile time” or “without running a program,” while dynamic means “at runtime.”

Static Typing Versus Dynamic Typing

In a statically typed language, variables, parameters, and members of objects (JavaScript calls them properties) have types that the compiler knows at compile time. The compiler can use that information to perform type checks and to optimize the compiled code.

Even in statically typed languages, a variable also has a dynamic type, the type of the variable’s value at a given point at runtime. The dynamic type can differ from the static type. For example (Java):

Object foo = "abc";

The static type of foo is Object; its dynamic type is String.

JavaScript is dynamically typed; types of variables are generally not known at compile time.

Static Type Checking Versus Dynamic Type Checking

If you have type information, you can check whether a value used in an operation (calling a function, applying an operator, etc.) has the correct type. Statically type-checked languages perform this kind of check at compile time, while dynamically type-checked languages do so at runtime. A language can be both statically type-checked and dynamically type-checked. If a check fails, you usually get some kind of error or exception.

JavaScript performs a very limited kind of dynamic type checking:

> var foo = null;
> foo.prop
TypeError: Cannot read property 'prop' of null

Mostly, however, things silently fail or work. For example, if you access a property that does not exist, you get the value undefined:

> var bar = {};
> bar.prop
undefined

Coercion

In JavaScript, the main way of dealing with a value whose type doesn’t fit is to coerce it to the correct type. Coercion means implicit type conversion. Most operands coerce:

> '3' * '4'
12

JavaScript’s built-in conversion mechanisms support only the types Boolean, Number, String, and Object. There is no standard way to convert an instance of one constructor to an instance of another constructor.

Warning

The terms strongly typed and weakly typed do not have generally meaningful definitions. They are used, but normally incorrectly. It is better to instead use statically typed, statically type-checked, and so on.

Primitive Values Versus Objects

JavaScript makes a somewhat arbitrary distinction between values:

• The primitive values are booleans, numbers, strings, null, and undefined.
• All other values are objects.

A major difference between the two is how they are compared; each object has a unique identity and is only (strictly) equal to itself:

> var obj1 = {};  // an empty object
> var obj2 = {};  // another empty object
> obj1 === obj2
false
 
> var obj3 = obj1;
> obj3 === obj1
true

In contrast, all primitive values encoding the same value are considered the same:

> var prim1 = 123;
> var prim2 = 123;
> prim1 === prim2
true

The following two sections explain primitive values and objects in more detail.

Primitive Values

The following are all of the primitive values (primitives for short):

• Booleans: true, false (see Chapter 10)
• Numbers: 1736, 1.351 (see Chapter 11)
• Strings: 'abc', "abc" (see Chapter 12)
• Two “nonvalues”: undefined, null (see undefined and null)

Primitives have the following characteristics:

• Compared by value
• The “content” is compared:

> 3 === 3
true
> 'abc' === 'abc'
true

• Always immutable
• Properties can’t be changed, added, or removed:

> var str = 'abc';
 
> str.length = 1; // try to change property `length`
> str.length      // ⇒ no effect
3
 
> str.foo = 3; // try to create property `foo`
> str.foo      // ⇒ no effect, unknown property
undefined

(Reading an unknown property always returns undefined.)

• A fixed set of types
• You can’t define your own primitive types.

Objects

All nonprimitive values are objects. The most common kinds of objectsare:

• Plain objects (constructor Object) can be created by object literals (see Chapter 17):

{
    firstName: 'Jane',
    lastName: 'Doe'
}

The preceding object has two properties: the value of property firstNameis 'Jane', and the value of property lastName is 'Doe'.

• Arrays (constructor Array) can be created by array literals (see Chapter 18):

[ 'apple', 'banana', 'cherry' ]

The preceding array has three elements that can be accessed via numericindices. For example, the index of 'apple' is 0.

• Regular expressions (constructor RegExp) can be created by regular expression literals (see Chapter 19):

/^a+b+$/

Objects have the following characteristics:

• Compared by reference
• Identities are compared; every object has its own identity:

> ({} === {})  // two different empty objects
false
 
> var obj1 = {};
> var obj2 = obj1;
> obj1 === obj2
true

• Mutable by default
• You can normally freely change, add, and remove properties (see Dot Operator (.): Accessing Properties via Fixed Keys):

> var obj = {};
> obj.foo = 123; // add property `foo`
> obj.foo
123

• User-extensible
• Constructors (see Layer 3: Constructors—Factories for Instances) can be seen as implementations of custom types (similar to classes in other languages).

undefined and null

JavaScript has two “nonvalues” that indicate missing information, undefined and null:

• undefined means “no value” (neither primitive nor object). Uninitialized variables, missing parameters, and missing properties have that nonvalue. And functions implicitly return it if nothing has been explicitly returned.
• null means “no object.” It is used as a nonvalue where an object is expected (as a parameter, as a member in a chain of objects, etc.).

undefined and null are the only values for which any kind of property access results in an exception:

> function returnFoo(x) { return x.foo }
 
> returnFoo(true)
undefined
> returnFoo(0)
undefined
 
> returnFoo(null)
TypeError: Cannot read property 'foo' of null
> returnFoo(undefined)
TypeError: Cannot read property 'foo' of undefined

undefined is also sometimes used as more of a metavalue that indicates nonexistence. In contrast, null indicates emptiness. For example, a JSON node visitor (see Transforming Data via Node Visitors) returns:

• undefined to remove an object property or array element
• null to set the property or element to null

Occurrences of undefined and null

Here we review the various scenarios where undefined and null occur.

Occurrences of undefined

Uninitialized variables are undefined:

> var foo;
> foo
undefined

Missing parameters are undefined:

> function f(x) { return x }
> f()
undefined

If you read a nonexistent property, you get undefined:

> var obj = {}; // empty object
> obj.foo
undefined

And functions implicitly return undefined if nothing has been explicitly returned:

> function f() {}
> f()
undefined
 
> function g() { return; }
> g()
undefined

Occurrences of null

• null is the last element in the prototype chain (a chain of objects; see Layer 2: The Prototype Relationship Between Objects):

> Object.getPrototypeOf(Object.prototype)
null

• null is returned by RegExp.prototype.exec() if there was no match for the regular expression in the string:

> /x/.exec('aaa')
null

Checking for undefined or null

In the following sections we review how to check for undefined and null individually, or to check if either exists.

Checking for null

You check for null via strict equality:

if (x === null) ...

Checking for undefined

Strict equality (===) is the canonical way of checking for undefined:

if (x === undefined) ...

You can also check for undefined via the typeof operator (typeof: Categorizing Primitives), but you should normally use the aforementioned approach.

Checking for either undefined or null

Most functions allow you to indicate a missing value via either undefined or null. One way of checking for both of them is via an explicit comparison:

// Does x have a value?
if (x !== undefined && x !== null) {
    ...
}
// Is x a non-value?
if (x === undefined || x === null) {
    ...
}

Another way is to exploit the fact that both undefined and null are considered false (see Truthy and Falsy Values):

// Does x have a value (is it truthy)?
if (x) {
    ...
}
// Is x falsy?
if (!x) {
    ...
}

Warning

false, 0, NaN, and '' are also considered false.

The History of undefined and null

A single nonvalue could play the roles of both undefined and null. Why does JavaScript have two such values? The reason is historical.

JavaScript adopted Java’s approach of partitioning values into primitives and objects. It also used Java’s value for “not an object,” null. Following the precedent set by C (but not Java), null becomes 0 if coerced to a number:

> Number(null)
0
> 5 + null
5

Remember that the first version of JavaScript did not have exception handling. Therefore, exceptional cases such as uninitialized variables and missing properties had to be indicated via a value. null would have been a good choice, but Brendan Eich wanted to avoid two things at the time:

• The value shouldn’t have the connotation of a reference, because it was about more than just objects.
• The value shouldn’t coerce to 0, because that makes errors harder to spot.

As a result, Eich added undefined as an additional nonvalue to the language. It coerces to NaN:

> Number(undefined)
NaN
> 5 + undefined
NaN

Changing undefined

undefined is a property of the global object (and thus a global variable; see The Global Object). Under ECMAScript 3, you had to take precautions when reading undefined, because it was easy to accidentally change its value. Under ECMAScript 5, that is not necessary, because undefined is read-only.

To protect against a changed undefined, two techniques were popular (they are still relevant for older JavaScript engines):

• Technique 1
• Shadow the global undefined (which may have the wrong value):

(function (undefined) {
    if (x === undefined) ...  // safe now
}());  // don’t hand in a parameter

In the preceding code, undefined is guaranteed to have the right value, because it is a parameter whose value has not been provided by the function call.

• Technique 2
• Compare with void 0, which is always (the correct) undefined (see The void Operator):

if (x === void 0)  // always safe

Wrapper Objects for Primitives

The three primitive types boolean, number, and string have corresponding constructors: Boolean, Number, String. Their instances (so-called wrapper objects) contain (wrap) primitive values. The constructors can be used in two ways:

• As constructors, they create objects that are largely incompatible with the primitive values that they wrap:

> typeof new String('abc')
'object'
> new String('abc') === 'abc'
false

• As functions, they convert values to the corresponding primitive types (see Functions for Converting to Boolean, Number, String, and Object). This is the recommended method of conversion:

> String(123)
'123'

Tip

It’s considered a best practice to avoid wrapper objects. You normally don’t need them, as there is nothing that objects can do that primitives can’t (with the exception of being mutated). (This is different from Java, from which JavaScript inherited the difference between primitives and objects!)

Wrapper Objects Are Different from Primitives

Primitive values such as 'abc' are fundamentally different from wrapper instances such as new String('abc'):

> typeof 'abc'  // a primitive value
'string'
> typeof new String('abc')  // an object
'object'
> 'abc' instanceof String  // never true for primitives
false
> 'abc' === new String('abc')
false

Wrapper instances are objects, and there is no way of comparing objects in JavaScript, not even via lenient equals == (see Equality Operators: === Versus ==):

> var a = new String('abc');
> var b = new String('abc');
> a == b
false

Wrapping and Unwrapping Primitives

There is one use case for wrapper objects: you want to add properties to a primitive value. Then you wrap the primitive and add properties to the wrapper object. You need to unwrap the value before you can work with it.

Wrap a primitive by invoking a wrapper constructor:

new Boolean(true)
new Number(123)
new String('abc')

Unwrap a primitive by invoking the method valueOf(). All objects have this method (as discussed in Conversion to Primitive):

> new Boolean(true).valueOf()
true
> new Number(123).valueOf()
123
> new String('abc').valueOf()
'abc'

Converting wrapper objects to primitives properly extracts numbers and strings, but not booleans:

> Boolean(new Boolean(false))  // does not unwrap
true
> Number(new Number(123))  // unwraps
123
> String(new String('abc'))  // unwraps
'abc'

The reason for this is explained in Converting to Boolean.

Primitives Borrow Their Methods from Wrappers

Primitives don’t have their own methods and borrow them from wrappers:

> 'abc'.charAt === String.prototype.charAt
true

Sloppy mode and strict mode handle this borrowing differently. In sloppy mode, primitives are converted to wrappers on the fly:

String.prototype.sloppyMethod = function () {
    console.log(typeof this); // object
    console.log(this instanceof String); // true
};
''.sloppyMethod(); // call the above method

In strict mode, methods from the wrapper prototype are used transparently:

String.prototype.strictMethod = function () {
    'use strict';
    console.log(typeof this); // string
    console.log(this instanceof String); // false
};
''.strictMethod(); // call the above method

Type Coercion

Type coercion means the implicit conversion of a value of one type to a value of another type. Most of JavaScript’s operators, functions, and methods coerce operands and arguments to the types that they need. For example, the operands of the multiplication operator (*) are coerced to numbers:

> '3' * '4'
12

As another example, if one of the operands is a string, the plus operator (+) converts the other one to a string:

> 3 + ' times'
'3 times'

Type Coercion Can Hide Bugs

Therefore, JavaScript rarely complains about a value having the wrong type. For example, programs normally receive user input (from online forms or GUI widgets) as strings, even if the user has entered a number. If you treat a number-as-string like a number, you will not get a warning, just unexpected results. For example:

var formData = { width: '100' };
 
// You think formData.width is a number
// and get unexpected results
var w = formData.width;
var outer = w + 20;
 
// You expect outer to be 120, but it’s not
console.log(outer === 120);  // false
console.log(outer === '10020');  // true

In cases such as the preceding one, you should convert to the appropriate type early on:

var w = Number(formData.width);

Functions for Converting to Boolean, Number, String, and Object

The following functions are the preferred way of converting a value to a boolean, number, string, or object:

• Boolean() (see Converting to Boolean)
• Converts a value to a boolean. The following values are converted to false; they are the so-called “falsy” values:

• undefined, null
• false
• 0, NaN
• ''

All other values are considered “truthy” and converted to true (including all objects!).

• Number() (see Converting to Number)
• Converts a value to a number:

• undefined becomes NaN.
• null becomes 0.
• false becomes 0, true becomes 1.
• Strings are parsed.
• Objects are first converted to primitives (discussed shortly), which are then converted to numbers.

• String() (see Converting to String)
• Converts a value to a string. It has the obvious results for all primitives. For example:

> String(null)
'null'
> String(123.45)
'123.45'
> String(false)
'false'

Objects are first converted to primitives (discussed shortly), which are then converted to strings.

• Object() (see Converting Any Value to an Object)
• Converts objects to themselves, undefined and null to empty objects, and primitives to wrapped primitives. For example:

> var obj = { foo: 123 };
> Object(obj) === obj
true
 
> Object(undefined)
{}
> Object('abc') instanceof String
true

Note that Boolean(), Number(), String(), and Object() are called as functions. You normally don’t use them as constructors. Then they create instances of themselves (see Wrapper Objects for Primitives).

Algorithm: ToPrimitive()—Converting a Value to a Primitive

To convert a value to either a number or a string, it is first converted to an arbitrary primitive value, which is then converted to the final type (as discussed in Functions for Converting to Boolean, Number, String, and Object).

The ECMAScript specification has an internal function, ToPrimitive() (which is not accessible from JavaScript), that performs this conversion.Understanding ToPrimitive() enables you to configure how objects are converted to numbers and strings. It has the following signature:

ToPrimitive(input, PreferredType?)

The optional parameter PreferredType indicates the final type of the conversion: it is either Number or String, depending on whether the result of ToPrimitive() will be converted to a number or a string.

If PreferredType is Number, then you perform the following steps:

• If input is primitive, return it (there is nothing more to do).
• Otherwise, input is an object. Call input.valueOf(). If the result is primitive, return it.
• Otherwise, call input.toString(). If the result is primitive, return it.
• Otherwise, throw a TypeError (indicating the failure to convert input to a primitive).

If PreferredType is String, steps 2 and 3 are swapped. The PreferredType can also be omitted; it is then considered to be String for dates and Number for all other values. This is how the operators + and == call ToPrimitive().

Examples: ToPrimitive() in action

The default implementation of valueOf() returns this, while the default implementation of toString() returns type information:

> var empty = {};
> empty.valueOf() === empty
true
> empty.toString()
'[object Object]'

Therefore, Number() skips valueOf() and converts the result of toString() to a number; that is, it converts '[object Object]' to NaN:

> Number({})
NaN

The following object customizes valueOf(), which influences Number(), but doesn’t change anything for String():

> var n = { valueOf: function () { return 123 } };
> Number(n)
123
> String(n)
'[object Object]'

The following object customizes toString(). Because the result can be converted to a number, Number() can return a number:

> var s = { toString: function () { return '7'; } };
> String(s)
'7'
> Number(s)
7

^[9] Technically, primitive values do not have their own properties, they borrow them from wrapper constructors. But that is something that goes on behind the scenes, so you don’t normally see it.