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.^[] 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:

JavaScript’s Type System

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

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

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

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

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

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

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.

All nonprimitive kinds of objectsare:

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

{
    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 ):

/^a+b+$/

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

> ({} === {})  // two different empty objects
false
 
> var 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 ) can be seen as implementations of custom types (similar to classes in other languages).

undefined and null

JavaScript

• 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

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

Occurrences of undefined

Uninitialized variables are undefined:

> var foo;
> foo
undefined

Missing

If you read a nonexistent property, you get undefined:

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

And functions

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

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

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

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

The three primitive types boolean, number, and string have corresponding

• 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!)

Primitive

> typeof 'abc'  // a primitive value
'string'
> typeof new String('abc')  // an object
'object'
false
> 'abc' === new String('abc')
false

Wrapping and Unwrapping Primitives

There

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

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

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
    consolelog(this instanceof String); // false
};
''.strictMethod(); // call the above method

Type Coercion

Type coercion means 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 )
• 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 )
• 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 ).

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

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

> 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():

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

> var s = { toString: function () { return '7'; } };
> String(s)
'7'
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.