Categorizing values: typeof, instanceof and beyond

Categorizing values
typeof, instanceof and beyond
Dr. Axel Rauschmayer
2ality.com
2013-07-06
Spain.js 2013, Madrid

View Slide

About me
Axel Rauschmayer:
Editor of JavaScript Weekly
Blogger at 2ality.com
Co-organizer of MunichJS (JavaScript user group)
Dr. Axel Rauschmayer (2ality.com) Categorizing values 2013-07-06 2 / 46

View Slide

About this talk
A lesson in JavaScript:
What kinds of values exist?
How are values categorized?
Structure:
1 Basics: primitives vs. objects, typeof, instanceof.
2 Advanced: typeof and instanceof are not always enough.
3 WTFs: weird aspects of categorization.
4 Best practices

View Slide

The basics

View Slide

Values

View Slide

Values
Values: primitive values versus objects
Not everything is an object. Quoting the ECMAScript 5.1 speciﬁcation:
A primitive value is a member of one of the following built-in types:
Undeﬁned, Null, Boolean, Number, and String;
an object is a member of the remaining built-in type Object

View Slide

Values
Main diﬀerence: comparison
Object: unique identity, only equal to itself.
> var obj1 = {};
> var obj2 = {};
> obj1 === obj2
false
> obj1 === obj1
true
Primitive value: equal to all values with the same content.
> var prim1 = 123;
> var prim2 = 123;
> prim1 === prim2
true

View Slide

Values
Primitive values (short: primitives)
Compared by value (comparing “the content”)
Always immutable
Fixed set of values
typeof

View Slide

Values
Objects
Compared by reference (comparing object identities)
Mutable by default
User-extensible
instanceof (most of the time)

View Slide

Values
Internal properties
A special kind of object property:
Not accessible from the language,
but inﬂuence how it works.
Names are written in [[double square brackets]].
Example: [[Extensible]] – can properties be added?
Check: Object.isExtensible(obj)
Set to false: Object.preventExtensions(obj)

View Slide

Values
JavaScript terminology: the two prototypes
Prototype: Prototype-of relationship between objects.
Internal property [[Prototype]]
Value: the prototype object or null
Read: Object.getPrototypeOf()
Set, while creating an object: Object.create()
Instance prototype: Value of Constr.prototype (of a constructor
Constr).
The common [[Prototype]] of all instances of Constr.

View Slide

Categorizing values

View Slide

Categorizing values
Four ways of categorizing values
1 Internal property [[Class]]
2 typeof
3 instanceof
4 Array.isArray()

View Slide

Categorizing values
1. Internal property [[Class]]
Internal own (non-inherited) property of all objects. Values:
arguments:
"Arguments"
Instances of built-in constructors:
"Boolean", "Number", "String",
"Array", "Function", "RegExp", "Date", "Error"
Global values:
"JSON", "Math"
All other objects:
"Object"

View Slide

Categorizing values
Reading [[Class]]
Indirect access via Object.prototype.toString(), which returns:
undefined [object Undefined]
null [object Null]
Object obj [object + obj.[[Class]] + ]
Compare:
> /abc/.toString()
/abc/
> Object.prototype.toString.call(/abc/)
[object RegExp]
Tool function:
function getClass(x) {
var str = Object.prototype.toString.call(x);
return /^\[object (.*)\]$/.exec(str)[1];
}

View Slide

Categorizing values
getClass() in action
> getClass(null)
Null
> getClass([])
Array
> getClass(JSON)
JSON
> function Foo() {}
> getClass(Foo)
Function
> getClass(new Foo())
Object

View Slide

Categorizing values
2. typeof
Mainly: categorize primitives.
Operand Result
undefined undefined
null object bug!
Boolean value boolean
Number value number
String value string
Function function callable object (has property [[Call]])
All other values object

View Slide

Categorizing values
Determine: is a value an object?
function isObject(v) {
return (typeof v === object && v !== null)
|| typeof v === function ;
}

View Slide

Categorizing values
3. instanceof
Categorize objects.
Syntax:
value instanceof Constr
Semantics:
function myInstanceof(value, Constr) {
return Constr.prototype.isPrototypeOf(value);
}

View Slide

Categorizing values
Crossing frames
Each frame has own global environment ⇒ problems with instanceof.

 function test(arr) { var iframe = frames[0]; console.log(arr instanceof Array); // false console.log(arr instanceof iframe.Array); // true console.log(Array.isArray(arr)); // true } 


View Slide

Categorizing values
4. Array.isArray()
Uses [[Class]] to determine whether a value is an array.
Original goal: allow JSON.stringify() to safely detect arrays.
But: generally useful when crossing frames.
function isArray(value) {
var str = Object.prototype.toString.call(value);
return str === [object Array] ;
}

View Slide

Warning: WTFs

View Slide

Built-in instance prototypes

View Slide

Object.prototype
It’s an object:
> Object.prototype
{}
> typeof Object.prototype
object
> getClass(Object.prototype)
Object
But it’s not an instance of Object:
> Object.prototype instanceof Object
false
Why? Can’t be its own prototype:
> Object.getPrototypeOf(Object.prototype)
null

View Slide

Function.prototype
It’s a function:
> Function.prototype(1,2,3)
undefined
> typeof Function.prototype // has [[Call]]
function
> getClass(Function.prototype)
Function
It’s not an instance of Function (can’t be its own prototype):
> Function.prototype instanceof Function
false

View Slide

Array.prototype
An array (except for instanceof):
> Array.prototype
[]
> Array.prototype.length
0
> getClass(Array.prototype)
Array
> Array.isArray(Array.prototype) // uses [[Class]]
true

View Slide

RegExp.prototype
It’s the empty regular expression (equivalent to a non-capturing empty
group):
> RegExp.prototype
/(?:)/
> new RegExp( )
/(?:)/
The empty regular expression matches everything:
> RegExp.prototype.test( abc )
true
> RegExp.prototype.test( )
true

View Slide

String.prototype.match
Accepts RegExp.prototype:
> xyz .match(RegExp.prototype)
[ , index: 0, input: xyz ]
Reason: checks its parameter via [[Class]]:
> getClass(RegExp.prototype)
RegExp
> getClass(/abc/)
RegExp

View Slide

Instances with [[PrimitiveValue]]

View Slide

[[PrimitiveValue]]
Constructors whose instances have property [[PrimitiveValue]]:
Boolean
Number
String
Date
Things to note:
Instance prototypes also have [[PrimitiveValue]].
Method valueOf() returns value of [[PrimitiveValue]].

View Slide

Boolean.prototype
> getClass(Boolean.prototype)
Boolean
> Boolean.prototype.valueOf() // returns [[PrimitiveValue]]
false
> getClass(new Boolean(false))
Boolean
> Boolean.prototype == false
true

View Slide

Number.prototype
> getClass(Number.prototype)
Number
> Number.prototype.valueOf()
0
> getClass(new Number(0))
Number
> Number.prototype == 0
true

View Slide

String.prototype
> getClass(String.prototype)
String
> String.prototype.valueOf()
> getClass(new String( ))
String
> String.prototype ==
true

View Slide

Dates
Dates wrap numbers. Quoting the ECMAScript 5.1 speciﬁcation:
A Date object contains a Number indicating a particular instant
in time to within a millisecond. Such a Number is called a time
value. A time value may also be NaN, indicating that the Date
object does not represent a speciﬁc instant of time.
Time is measured in ECMAScript in milliseconds since 01
January, 1970 UTC.

View Slide

Date.prototype
It’s a date:
> getClass(Date.prototype)
Date
It’s an invalid date, wrapping NaN:
> Date.prototype
Invalid Date
> Date.prototype.valueOf()
NaN
Compare:
> new Date(NaN)
Invalid Date
> new Date(NaN).valueOf()
NaN

View Slide

Recommendations

View Slide

Recommendations
Recommendations: normal code
Avoid categorization, if you can. For example, via polymorphism.
Don’t do this:
function bla(x) {
if (x instanceof Foo) {
...
} else if (x instanceof Bar) {
...
} else ...
}
Do this:
Foo.prototype.bla = function () { ... };
Bar.prototype.bla = function () { ... };
...

View Slide

Recommendations
Recommendations: normal code
If you can’t avoid categorization:
Use typeof and instanceof
Ignore [[Class]] and Array.isArray()
Careful with typeof:
function versus object
typeof null

View Slide

Recommendations
Recommendations: values crossing frames
If values cross frames:
instanceof is not reliable, any more.
Consider [[Class]] and Array.isArray()
Avoid if possible, e.g. via window.postMessage()

View Slide

Recommendations
WTFs
Recommendation: use constructors in the canonical way.
Reason: optimizations (hidden classes etc.).
Reason: ECMAScript 6 classes.
Recommendation: ignore that built-in instance prototypes are “primal
instances”.
Clashes with canonical use.
Only confuses beginners.

View Slide

Recommendations
Thank you!

View Slide

Recommendations
Resources
In-depth article on categorization: “Categorizing values in JavaScript”
Using objects as constructors, not functions: “Prototypes as classes –
an introduction to JavaScript inheritance”
Quickly learn a safe subset of JavaScript: “Basic JavaScript: an
introduction to the language ”

View Slide

Bonus slides

View Slide

Bonus slides
Where do values get their methods from?
Instances (objects) of a constructor C: C.prototype
> [].push === Array.prototype.push
true
Primitive values (except undefined and null): from wrapper types.
Booleans: Boolean
> true.toString === Boolean.prototype.toString
true
Numbers: Number
Strings: String
Note: the actual instances of wrapper types are objects.
Recommendation: ignore.

View Slide

Bonus slides
The property constructor
Prototypes point back to their constructor:
> function Foo() { }
> Foo.prototype.constructor === Foo
true
> RegExp.prototype.constructor === RegExp
true
Inherited by instance: ﬁnd out who created it.
> new Foo().constructor
[Function: Foo]
> /abc/.constructor
[Function: RegExp]

View Slide

Bonus slides
Prototype chain
null
↑
Object.prototype
↑
Function.prototype
↑
function () { }
Most objects have Object.prototype in their prototype chain. Avoid it
via:
Object.create(null)

View Slide

Categorizing values: typeof, instanceof and beyond

Categorizing values: typeof, instanceof and beyond

Axel Rauschmayer

More Decks by Axel Rauschmayer

Other Decks in Programming

Featured

Transcript