"In Javascript everything is an object!" Mmm, Wrong.

I touched on this a little in my Dot versus Bracket notation post. Most people will tell you that in javascript, everything is an object. That is not actually true, but the way javascript behaves fools you into thinking it is.

An object in javascript is best thought of as a simple hashmap of key-value pairs where the key is always a valid string identifier and the value can be anything including a string, an array, a function, or even other objects.

Quite a few of the things you use every day in javascript are actually primitives, not objects. String, Number and Boolean are primitive values and as such are actually immutable. But you are fooled into thinking they are objects because of how javascript behaves under the covers.

Each time you attempt to use a primitive, javascript silently creates a wrapper object of that type when code attempts to access or use any property of that primitive. The terminology for this is called "auto-boxing" or just "boxing".

So for example if I create a variable and assign it a string value, the type of that variable is "string", not "object";

// Create a primitive variable with "foobar" as the value.
var foo = "foobar";

console.log(typeof foo);
> "string"

If we then perform method calls on that "string" primitive, it will first convert the variable into an auto-boxed string wrapper object and call the requested method. The temporary object is only available to that property access and does not replace primitive. As such, once the method has return it's results it will dispose of the String wrapper object entirely and return the primitive that was generated.

// Create a primitive variable with "bar" as the value, from the foo primitive.
var bar = foo.substring(3,6);

console.log(typeof bar);
> "string"

Why is this important? A primary consequence of this is that it looks like you can assign properties to a primitive like you can an object or function, and in fact it will allow you to do it but it does not actually do anything and you can never retrieve those properties.

// Create a primitive variable with "foo" as the value.
var foo = "foo";
// Now assign a property of foo with the value "bar" -- Note it allows it.
foo.bar = "bar";

> undefined

This happens because when you call a method on the foo primitive, it is first converted into a String object wrapper which allows you to assign properties - thus the lack of errors. The return results of setting foo.bar is returned immediately as "bar" for use by the assignment operator and then the String object wrapper is destroyed which destroys the .bar property since the typeof foo is back to being a primitive. Strings, Numbers and Booleans all behave this way.

Functions on the other hand don't behave this way because they inherit from Object.prototype which makes them first order Objects as far as javascript is concerned. This means that functions can do anything an object can do, to include having randomly assigned properties;

// Create a function
var foo = function() {};
foo.bar = "bar";

> "bar"

This simple fact is the basis of all of javascript's power and how most people use it and abuse it without even knowing whats going on behind the scenes. Personally I believe things like this is what makes javascript an extremely misunderstood and powerful language.

Categories: Software Development | Tags: javascript

Portrait photo for Jason Ellis Jason Ellis

The CTO of Grok Interactive and is a calm, considerate problem solver that has been working as a software engineer in the industry for over 15 years. He enjoys rapid application and web development and has created all manner of rich web applications using RoR, PHP, JS, Java, JSON, XML, AJAX, XHTML, CSS and every other trendy acronym you care to mention.



We provide a free consultation to discover competitive advantages for your business. Contact us today to schedule an appointment.