Categorizing Values: typeof, instanceof and Beyond (December 2014)

1. Categorizing Values: typeof, instanceof and Beyond NomadJS, 2014-12-16
2. Dr. Axel Rauschmayer, Ecmanauten.de 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 2
3. The basics
4. Values: primitives vs. objects
5. Dr. Axel Rauschmayer, Ecmanauten.de Values: primitive values versus objects Not everything is an object. Quoting the ECMAScript 5.1 specification: • A primitive value is a member of one of the following built-in types:
 Undefined, Null, Boolean, Number, and String; • an object is a member of the remaining built-in type Object 5
6. Dr. Axel Rauschmayer, Ecmanauten.de Main difference: comparison Object – compared by reference: unique identity, only equal to itself. > var obj1 = {}; > var obj2 = {}; > obj1 === obj2 false > obj1 === obj1 true Primitive value – compared by value: equal to all values with same content. > var prim1 = 123; > var prim2 = 123; > prim1 === prim2 true 6
7. Dr. Axel Rauschmayer, Ecmanauten.de Primitive values (short: primitives) • Compared by value (comparing “the content”) • Always immutable • Fixed set of types (can’t define your own) • Categorization: typeof 7
8. Dr. Axel Rauschmayer, Ecmanauten.de Objects • Compared by reference (comparing object identities) • Mutable by default • User-extensible (constructors as pseudo-types) • Categorization: instanceof (most of the time) 8
9. Prototypes and methods
10. Dr. Axel Rauschmayer, Ecmanauten.de Internal properties A special kind of object property: • Not accessible from the language, • but influence 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) 10
11. Dr. Axel Rauschmayer, Ecmanauten.de Terminology: two prototypes 1. Prototype: relationship between objects. • Object inherits properties of prototype. • 㱺 prototype chain of objects 2. Instance prototype: Value of Point.prototype. • Shared [[Prototype]] of all instances of Point 11 dist ··· function() {···} Point.prototype prototype Point x 0 [[Prototype]] y 7 x 8 [[Prototype]] y 5 p1 p2 2 1 1
12. Dr. Axel Rauschmayer, Ecmanauten.de Object Foo Object.prototype Foo.prototype null foo [[Prototype]] [[Prototype]] [[Prototype]] prototype prototype Objects: prototype chain Where do methods come from? 12
13. Dr. Axel Rauschmayer, Ecmanauten.de The prototype chain > var p = Object.getPrototypeOf; > var arr = []; > p(arr) === Array.prototype true > p(p(arr)) === Object.prototype true > p(p(p(arr))) null > [].push === Array.prototype.push true 13
14. Dr. Axel Rauschmayer, Ecmanauten.de Where do methods come from? Primitive values: • Properties are inherited from wrapper constructors: Boolean, Number, String • Ignore: wrapper constructors have their own instances (objects!) > Object(true) instanceof Boolean true > true.toString === Boolean.prototype.toString true 14
15. Categorizing values
16. Dr. Axel Rauschmayer, Ecmanauten.de Four ways of categorizing values 1. Internal property [[Class]] 2. typeof 3. instanceof 4. Array.isArray() 16
17. Dr. Axel Rauschmayer, Ecmanauten.de 1. Internal property [[Class]] Internal own (non-inherited) property of all objects. 17 Value [[Class]] arguments 'Arguments' Instances of built-in constructors 'Boolean', 'Number', 'String',
 'Array', 'Function', 'RegExp', 'Date', 'Error' Global values 'JSON', 'Math' All other objects 'Object'
18. Dr. Axel Rauschmayer, Ecmanauten.de Reading [[Class]] Indirect access via Object.prototype.toString(), which returns: someObj '[object '+someObj.[[Class]] +']' undefined '[object Undefined]' null '[object Null]' Compare: > /abc/.toString() '/abc/' > Object.prototype.toString.call(/abc/) '[object RegExp]' 18
19. Dr. Axel Rauschmayer, Ecmanauten.de Tool function getClass() function getClass(x) { var str = Object.prototype.toString.call(x); var match = /^\[object (.*)\]$/.exec(str); if (match) { return match[1]; } else { return str; } } Use case: whenever instanceof doesn’t work (explained later). 19
20. Dr. Axel Rauschmayer, Ecmanauten.de Tool function getClass() > getClass(null) 'Null' > getClass([]) 'Array' > getClass(JSON) 'JSON' > function Foo() {} > getClass(Foo) 'Function' > getClass(new Foo()) 'Object' 20
21. Dr. Axel Rauschmayer, Ecmanauten.de 2. typeof 21 Operand Result undefined 'undefined' null 'object' (bug) boolean value 'boolean' number value 'number' string value 'string' function 'function' (has property [[Call]]) all other values 'object'
22. Dr. Axel Rauschmayer, Ecmanauten.de Is a value an object? function isObject(v) { return (typeof v === 'object' && v !== null) || typeof v === 'function'; } 22
23. Dr. Axel Rauschmayer, Ecmanauten.de 3. instanceof 23 Object Foo Object.prototype Foo.prototype null foo [[Prototype]] [[Prototype]] [[Prototype]] prototype prototype
24. Dr. Axel Rauschmayer, Ecmanauten.de instanceof Categorize objects. Syntax: v instanceof C Semantics: function myInstanceof(v, C) { return C.prototype.isPrototypeOf(v); } 24
25. Dr. Axel Rauschmayer, Ecmanauten.de Crossing frames Each frame has own global environment 㱺 problems with instanceof. <head> <script> 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 } </script> </head> <body> <iframe srcdoc="<script>window.parent.test([])</script>"> </iframe> </body> 25
26. Dr. Axel Rauschmayer, Ecmanauten.de 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]'; } 26
27. Warning: WTFs ahead
28. Built-in instance prototypes
29. Dr. Axel Rauschmayer, Ecmanauten.de 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 29
30. Dr. Axel Rauschmayer, Ecmanauten.de 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 30
31. Dr. Axel Rauschmayer, Ecmanauten.de Array.prototype An array (except for instanceof): > Array.prototype [] > Array.prototype.length 0 > getClass(Array.prototype) 'Array' > Array.isArray(Array.prototype) // uses [[Class]] true 31
32. Dr. Axel Rauschmayer, Ecmanauten.de RegExp.prototype It’s the empty regular expression (equivalent to non- capturing empty group): > RegExp.prototype /(?:)/ > new RegExp('') /(?:)/ The empty regular expression matches everything: > RegExp.prototype.test('abc') true > RegExp.prototype.test('') true 32
33. Dr. Axel Rauschmayer, Ecmanauten.de 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' 33
34. Instances with [[PrimitiveValue]]
35. Dr. Axel Rauschmayer, Ecmanauten.de [[PrimitiveValue]] Constructors whose instances have the property [[PrimitiveValue]]: • Boolean • Number • String • Date Things to note: • Instance prototypes also have [[PrimitiveValue]]. • Method valueOf() returns value of [[PrimitiveValue]]. 35
36. Dr. Axel Rauschmayer, Ecmanauten.de Boolean.prototype > getClass(Boolean.prototype) 'Boolean' > Boolean.prototype.valueOf() // [[PrimitiveValue]] false > getClass(new Boolean(false)) 'Boolean' > Boolean.prototype == false true > Boolean(Boolean.prototype) true 36
37. Dr. Axel Rauschmayer, Ecmanauten.de Number.prototype > getClass(Number.prototype) 'Number' > Number.prototype.valueOf() 0 > getClass(new Number(0)) 'Number' > Number.prototype == 0 true 37
38. Dr. Axel Rauschmayer, Ecmanauten.de String.prototype > getClass(String.prototype) 'String' > String.prototype.valueOf() '' > getClass(new String('')) 'String' > String.prototype == '' true 38
39. Dr. Axel Rauschmayer, Ecmanauten.de Dates Dates wrap numbers. Quoting the ECMAScript 5.1 specification: • 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 specific instant of time. • Time is measured in ECMAScript in milliseconds since 01 January, 1970 UTC. 39
40. Dr. Axel Rauschmayer, Ecmanauten.de 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 40
41. Recommendations
42. Dr. Axel Rauschmayer, Ecmanauten.de 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 () { ··· }; ··· 42
43. Dr. Axel Rauschmayer, Ecmanauten.de Recommendations: normal code If you can’t avoid categorization: • Use typeof and instanceof • Normally ignore [[Class]] and Array.isArray() Careful with typeof: • 'function' versus 'object' • typeof null 43
44. Dr. Axel Rauschmayer, Ecmanauten.de Recommendations: values crossing frames If values cross frames: • instanceof is not reliable, anymore. • Consider [[Class]] and Array.isArray() Avoid if possible, e.g. via window.postMessage() 44
45. Dr. Axel Rauschmayer, Ecmanauten.de 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. 45
46. Thank you! Slides: speakerdeck.com/rauschma
47. Dr. Axel Rauschmayer, Ecmanauten.de Resources • In-depth article on categorization: “Categorizing values in JavaScript” • Using objects as constructors, not functions: “Prototypes as classes – an introduction to JavaScript inheritance” • “Values” – chapter in “Speaking JavaScript” 47
48. Bonus slides
49. Dr. Axel Rauschmayer, Ecmanauten.de The property constructor 49 … … push function() {...} [[Prototype]] constructor Array.prototype prototype Array length 2 1 'b' 0 'a' [[Prototype]] ['a', 'b'] …
50. Dr. Axel Rauschmayer, Ecmanauten.de The property constructor Prototypes point back to their constructor: > function Foo() { } > Foo.prototype.constructor === Foo true > RegExp.prototype.constructor === RegExp true Inherited by instance: find out who created it. > new Foo().constructor [Function: Foo] > /abc/.constructor [Function: RegExp] 50
51. Dr. Axel Rauschmayer, Ecmanauten.de constructor use case: switch try { ... } catch (e) { switch (e.constructor) { case SyntaxError: ... break; case CustomError: ... break; ... } } // Warning: only detects direct instances 51
52. Dr. Axel Rauschmayer, Ecmanauten.de constructor use case: name of constructor function Foo() {} var f = new Foo(); console.log(f.constructor.name); // 'Foo' // Warning: not supported in all engines 52
53. Dr. Axel Rauschmayer, Ecmanauten.de constructor use case: clone current instance SuperConstr.prototype.createCopy = function () { return new this.constructor(...); }; 53