Javascript Objects 101

Javascript, IMO is probably the language that has one of the lowest barriers to entry for anyone looking to get into programming. Plus, it’s also highly practical. You can build web applications with it and it has a lot of carry-over to other languages. Unlike traditional Object Oriented Languages, Javascript has a blend of Functional and OO-styles in it.

Me, personally, I’ve found Functional programming to be a lot easier to understand and reason about than Object Oriented programming. So let’s get started.

A collection of Keys and Values

At it’s core a Javascript Object is just a collection of keys and values. You can create a Javascript object like so:

var a = {};

Here “a” is the name of the Object you created. You can store keys and values in it, in a straight forward manner:

a[‘name’] = ‘John Doe’;

Now “a” has a key called “name” whose value is John Doe. You can extract values from the object easily as well:

console.log(a[‘name’]);

You can alternately use the dot-operator for property access:

console.log(a.name);

Unlike the dot-operator you can use the square-brackets look up when you need to look up a key by a variable name:

var keyName = ‘name’;
console.log(a[keyName]);

Objects can have functions as values as well (they needn’t be just string literals or primitives):

a.sayHi = function() {
 console.log(“Hi There”);
};
a.sayHi();

The dreaded “this” reference

One of the hardest things to grok and strangely one of the first things you will run into, is the “this” reference. Let’s do the straight-forward case first for what the “this” reference evaluates to:

The “getInfo” function uses the “this” reference pretty liberally to get info of the object it’s printing and this is pretty straightforward. Things get a little more complicated when you want to call a function in whose context you want to access the “this” operator. Example:

Here the printActorInfo function uses the “this” reference to access the “leadActor” property. Notice how we don’t just use the function invocation directly, i.e. we don’t just call “printActorInfo();”. Instead we use the “call” function to set the “this” reference inside the function call “printActorInfo.call(movie);”. Read this as, call the “printActorInfo” function while setting the “this” reference to the “movie” object, for just this one invocation.

Capturing the “this” reference

A common technique Javascript programmers use, is to capture the this reference in a variable, most commonly called “that” or “self” and you maybe wondering why is this. Here’s why:

This code is exactly like the one before, with the exception being that we are printing the info with a delay of one second (this is happening with setTimeout). If you run this, it will print “undefined” for the leadActor name. Why is this?

It’s because within the context of the anonymous function we are passing to setTimeout as the first argument, the “this” is different that the one that was in the outer context. To make it clear:

function simple() {
 var thisOne = this;
 setTimeout(function() {
 var thisTwo = this;
}, 1000);
};

Here “thisOne” and “thisTwo” are not the same. Take sometime and ensure you get “this” (pun-intended :)).

So how do we fix this. Here’s how most JS engineers solve this:

The points of interest are line #12, “var that = this;” and line #14. Where we print “that.leadActor”.

And, that’s that :)

This should give you most of the basics you need to get moving forward in JS. More on the way!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.