The beauty of this

I’d argue that you won’t love Javascript until you know about the “this” reference, and how to work with it. If you’ve done object oriented programming, you’re probably familiar with the “this” reference in some other language. But if you’re thinking that it works the same in Javascript as in your language of choice, you’re probably wrong, and you’re in for a wonderful surprise. Let’s start with a basic examle.

function thisTest() {
  alert(this);
}
thisTest();

This will alert “[object Window]“. That’s because the thisTest function is a global function, and all global variables are assigned to the window object. So the code above is the same as:

window.thisTest = function() {
  alert(this);
}
window.thisTest();

The only difference is that in the latter example, our function is an anonymous function that is assigned to a variable, and the first one is a named function.

So now that we know that a global function is assigned to the window object, we can take it a step further. Take this code:

var color = 'red';
function tellColor() {
  alert(color);
}

It can be written like this instead:

window.color = 'red';
function tellColor() {
  alert(window.color);
}

This is better, because we clearly state that it’s a global variable we’re using. Since you should be very careful about using global variables, we want it to be very obvious in the code that the variable is global. But we take it even a step further, by doing:

window.color = 'red';
function tellColor() {
  alert(this.color);
}

So why is this better, you might wonder? Because we’re not explicitly using a global variable, and here’s why:

window.color = 'red';
window.tellColor = function() {
  alert(this.color);
}

var other_colors = {};
// Could also be var other_colors = new Object();
other_colors.color = 'green';
other_colors.tellColor = window.tellColor;
other_colors.tellColor();

This code will alert “green”, because of how Javascripts “this” reference work. So let’s go through the code. First, we define an object, “other_colors”. Then we assign the color property to that object, and then we assign the function. Now that part may be a bit strange, since we’re working with a function without calling it, we’re passing it around. This works because everything in Javascript is an object, even functions. And we can pass objects around, and assign them to variables, which is just what we’re doing here.

And when were assigning other_colors.tellColor to window.tellColor, it’s still the same function, but the “this” reference points to different objects in other_colors.tellColor and window.tellColor.

This allows you to write highly reusable code, since you can use the exact same function, but assign it to different objects and get different results. So if you’re familiar with the concept of inheritance, mixins and traits in OO, you can see how you can implement it in Javascript, it’s basically just copying function pointers from one object to another.

Iterating over this

Since everything in Javascript is an object, basically everything can be iterated over, and especially the “this” reference. Like this:

// Just a simple namespace
var ns = {};
ns.foo = 'bar';
ns.baz = 'foo';
ns.iterator = function() {
  for(var k in this) {
    alert(k +' => '+ this[k];
  }
}
ns.iterator();

This code will alert:

foo => bar
baz => boo
iterator => function() {
  for(var k in this) {
    alert(k +' => '+ this[k];
  }
}

Because of how Javascript works, you can access object properties both with object.property, and object['property']. So this code will iterate over all properties in the object which the iterator function is attached to and alert the property name and the property value, even our iterator function gets alerted.

To really get the best from Javascript, you should also read up on how closures work.