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'This chapter gives an overview of JavaScript’s type system.
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.
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):
Objectfoo="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.
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
undefinedIn 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.
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:
null, and undefined.
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
trueIn 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.
The following are all of the primitive values (primitives for short):
true, false (see Chapter 10)
1736, 1.351 (see Chapter 11)
'abc', "abc" (see Chapter 12)
undefined, null (see undefined and null)
Primitives have the following characteristics:
The “content” is compared:
> 3 === 3 true > 'abc' === 'abc' true
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.)
All nonprimitive values are objects. The most common kinds of objects are:
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 firstName
is '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 numeric
indices. 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:
Identities are compared; every object has its own identity:
> ({} === {}) // two different empty objects
false
> var obj1 = {};
> var obj2 = obj1;
> obj1 === obj2
trueYou 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
123JavaScript 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 undefinedundefined 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.
Uninitialized variables are undefined:
> var foo; > foo undefined
Missing parameters are undefined:
> function f(x) { return x }
> f()
undefinedIf you read a nonexistent property, you get undefined:
> var obj = {}; // empty object
> obj.foo
undefinedAnd functions implicitly return undefined if nothing has been explicitly returned:
> function f() {}
> f()
undefined
> function g() { return; }
> g()
undefined
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')
nullIn the following sections we review how to check for undefined and null individually, or to check if either exists.
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.
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){...}
false, 0, NaN, and '' are also considered false.
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:
As a result, Eich added undefined as an additional nonvalue to the language. It coerces to NaN:
> Number(undefined) NaN > 5 + undefined NaN
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):
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.
Compare with void 0, which is always (the correct) undefined (see The void Operator):
if(x===void0)// always safe
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'
falseAs 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'
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 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')
falseWrapper 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
falseWrap a primitive by invoking a wrapper constructor:
newBoolean(true)newNumber(123)newString('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 don’t have their own methods and borrow them from wrappers:
>'abc'.charAt===String.prototype.charAttrue
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(typeofthis);// objectconsole.log(thisinstanceofString);// 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(typeofthis);// stringconsole.log(thisinstanceofString);// false};''.strictMethod();// call the above method
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'
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:
varformData={width:'100'};// You think formData.width is a number// and get unexpected resultsvarw=formData.width;varouter=w+20;// You expect outer to be 120, but it’s notconsole.log(outer===120);// falseconsole.log(outer==='10020');// true
In cases such as the preceding one, you should convert to the appropriate type early on:
varw=Number(formData.width);
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.
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
trueNote 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).
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:
input is primitive, return it (there is nothing more to do).
input is an object. Call input.valueOf(). If the result is primitive, return it.
input.toString(). If the result is primitive, return it.
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().
> 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({})
NaNThe 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.