StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In JavaScript everything is an object (or may at least be treated as an object), except <a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noreferrer">primitives</a> (booleans, null, numbers, strings and the value <code>undefined</code> (and symbol in ES6)):</p> <pre><code>console.log(typeof true); // boolean console.log(typeof 0); // number console.log(typeof ""); // string console.log(typeof undefined); // undefined console.log(typeof null); // object console.log(typeof []); // object console.log(typeof {}); // object console.log(typeof function () {}); // function </code></pre> <p>As you can see objects, arrays and the value <code>null</code> are all considered objects (<code>null</code> is a reference to an object which doesn't exist). Functions are distinguished because they are a special type of <em>callable</em> objects. However they are still objects.</p> <p>On the other hand the literals <code>true</code>, <code>0</code>, <code>""</code> and <code>undefined</code> are not objects. They are primitive values in JavaScript. However booleans, numbers and strings also have constructors <code>Boolean</code>, <code>Number</code> and <code>String</code> respectively which wrap their respective primitives to provide added functionality:</p> <pre><code>console.log(typeof new Boolean(true)); // object console.log(typeof new Number(0)); // object console.log(typeof new String("")); // object </code></pre> <p>As you can see when primitive values are wrapped within the <code>Boolean</code>, <code>Number</code> and <code>String</code> constructors respectively they become objects. The <code>instanceof</code> operator only works for objects (which is why it returns <code>false</code> for primitive values):</p> <pre><code>console.log(true instanceof Boolean); // false console.log(0 instanceof Number); // false console.log("" instanceof String); // false console.log(new Boolean(true) instanceof Boolean); // true console.log(new Number(0) instanceof Number); // true console.log(new String("") instanceof String); // true </code></pre> <p>As you can see both <code>typeof</code> and <code>instanceof</code> are insufficient to test whether a value is a boolean, a number or a string - <code>typeof</code> only works for primitive booleans, numbers and strings; and <code>instanceof</code> doesn't work for primitive booleans, numbers and strings.</p> <p>Fortunately there's a simple solution to this problem. The default implementation of <code>toString</code> (i.e. as it's natively defined on <code>Object.prototype.toString</code>) returns the internal <code>[[Class]]</code> property of both primitive values and objects:</p> <pre><code>function classOf(value) { return Object.prototype.toString.call(value); } console.log(classOf(true)); // [object Boolean] console.log(classOf(0)); // [object Number] console.log(classOf("")); // [object String] console.log(classOf(new Boolean(true))); // [object Boolean] console.log(classOf(new Number(0))); // [object Number] console.log(classOf(new String(""))); // [object String] </code></pre> <p>The internal <code>[[Class]]</code> property of a value is much more useful than the <code>typeof</code> the value. We can use <code>Object.prototype.toString</code> to create our own (more useful) version of the <code>typeof</code> operator as follows:</p> <pre><code>function typeOf(value) { return Object.prototype.toString.call(value).slice(8, -1); } console.log(typeOf(true)); // Boolean console.log(typeOf(0)); // Number console.log(typeOf("")); // String console.log(typeOf(new Boolean(true))); // Boolean console.log(typeOf(new Number(0))); // Number console.log(typeOf(new String(""))); // String </code></pre> <p>Hope this article helped. To know more about the differences between primitives and wrapped objects read the following blog post: <a href="http://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/" rel="noreferrer" title="The Secret Life of JavaScript Primitives | JavaScript, JavaScript...">The Secret Life of JavaScript Primitives</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload