{"id":69,"date":"2018-01-09T07:00:14","date_gmt":"2018-01-09T14:00:14","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=69"},"modified":"2018-02-01T11:48:57","modified_gmt":"2018-02-01T18:48:57","slug":"beware-of-typeof","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/01\/09\/beware-of-typeof\/","title":{"rendered":"Beware of typeof<\/code>"},"content":{"rendered":"

The typeof<\/code> operator in JavaScript is full of strange quirks. Before I show you what to watch out for let's take a look at what it does correctly.<\/p>\n

First of all, typeof<\/code> will always return a string that (supposedly) describes what follows it. Here are some examples that work as expected, with the resulting string shown in a comment following each statement:<\/p>\n

typeof undefined; \/\/ 'undefined'\r\ntypeof true; \/\/ 'boolean'\r\ntypeof 42; \/\/ 'number'\r\ntypeof 'foo'; \/\/ 'string'\r\ntypeof function () {}; \/\/ 'function'\r\ntypeof { foo: bar }; \/\/ 'object'\r\n<\/code><\/pre>\n
So far, so good. But what about using typeof<\/code> on an array?<\/p>\n
typeof [foo, bar]; \/\/ 'object'\r\n<\/code><\/pre>\n
Well, okay, arrays are technically<\/em> objects in JavaScript, so that's cool, I guess.<\/p>\n
What about null<\/code>?<\/p>\n
typeof null; \/\/ 'object'\r\n<\/code><\/pre>\n
So that's, uh, also an object? Okay, sure.<\/p>\n
What about a class?<\/p>\n
typeof class baz {}; \/\/ 'function'\r\n<\/code><\/pre>\n
So a class is a function? Again, technically true, but maybe not the result we were expecting.<\/p>\n
What about NaN<\/code>, which literally stands for "not a number"?<\/p>\n
typeof NaN; \/\/ 'number'\r\n<\/code><\/pre>\n
Oh, JavaScript, you precious thing.<\/p>\n
Now that you know to watch out for those unexpected results, let's talk about how to get some more useful information from unknown types.<\/p>\n
The Object<\/code> class in JavaScript has a toString<\/code> method prototype that can be called directly to produce a string that's a bit more descriptive and useful:<\/p>\n
Object.prototype.toString.call(undefined); \/\/ '[object Undefined]'\r\nObject.prototype.toString.call(true); \/\/ '[object Boolean]'\r\nObject.prototype.toString.call(42); \/\/ '[object Number]'\r\nObject.prototype.toString.call('foo'); \/\/ '[object String]'\r\nObject.prototype.toString.call(function () {}); \/\/ '[object Function]'\r\nObject.prototype.toString.call({ foo: bar }); \/\/ '[object Object]'\r\nObject.prototype.toString.call([foo, bar]); \/\/ '[object Array]'\r\nObject.prototype.toString.call(null); \/\/ '[object Null]'\r\n<\/code><\/pre>\n
Much better. We can now tell the difference between an object, an array, and null<\/code>!<\/p>\n
Alas, this method still falls short when it comes to classes and NaN<\/code>:<\/p>\n
Object.prototype.toString.call(class baz {}); \/\/ '[object Function]'\r\nObject.prototype.toString.call(NaN); \/\/ '[object Number]'\r\n<\/code><\/pre>\n
The class situation makes sense; classes in JavaScript are really just fancy syntax for special functions<\/a>, but it would be nice to see something like [object Class]<\/code> returned here all the same.  Oh well.<\/p>\n
So, be careful when using typeof<\/code>, and use Object.prototype.toString.call()<\/code> if you need something a bit more descriptive.<\/p>\n","protected":false},"excerpt":{"rendered":"
An examination of some unusual JavaScript behavior and how to (mostly) work around it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":10,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":324,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/69\/revisions\/324"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}