Question

I’m fairly new to JavaScript and I’m cleaning up some JavaScript code I downloaded. One of the inconsistencies in this code is mixed usage of both this and the local variable that that references it.

An example code snippet (private method within a jQuery UI widget):

_populateLists: function(options) {
    //do stuff with this

    var that = this;
    options.each(function(index) {
        //use both this AND that, they are different in this scope
    });

    //here this and that are the same thing
    //I want to be consistent, is one preferable over the other?
},

In many places throughout the code, where the scope is such that this === that, there is mixed usage, even within the same line of code.

For the sake of readability and maintainability, is it preferable to use this or that?

Note: I realize a lot of these types of things depend on developer preference. But before I decide to rewrite the code to use one over the other, I’d like to understand any reasoning if/why one would be preferred over the other.

EDIT: In this script, I think the only reason this is being assigned to a local variable is so that it can be referred to from within the inner closure.

Answer 1

The reason that the value of this is commonly assigned to a local variable is so that you can close over that value and use it inside a nested function.

this is a special variable and somewhat different from normal local variables in that it is automatically set to the object upon which a function was called (if any); otherwise, the global object. However, this intrinsic value of this is somewhat muddied by jQuery’s liberal use of call and apply, which allow the caller to specify the value of this.

In a nested function, this does not inherit the value of its parent’s this in the same way it would inherit a parent’s local variables through the scope chain.

Because of this, we have to stash the value of this in a local variable if we need it inside a nested function, such as the each callback in your example.

var a = { fn: function() {
    // here, `this` is the object `a`
    var x = this;
    function b() {
        // here, `this` is `window` because `b` is invoked with no context
        // ...but we still have access to `x`, whose value would be `a`
    }
    b();
}};

a.fn(); // by invoking `fn` as a property of `a`, we implicitly set `fn`'s
        // `this` to `a`.

// Compare to:
var f = a.fn;
f();    // we now invoke `fn` with no context, so its `this` will be `window`.
a.fn.call(window); // or by specifying context explicitly

Of course, when you’re still in the parent scope, this will still equal that (or self or whatever). At first glance, it may seem like there’s no difference between the two, but there is one important performance impact:

Minification. If you assign this to a local variable, all references to that variable can be reduced to one character. References to this cannot. Compare this minified output:

function a() {this.w=1;this.x=2;this.y=3;this.z=4;}
function b() {var t=this;t.w=1;t.x=2;t.y=3;t.z=4;}

With 4 references to this, you save bytes by using a variable. If you have to capture this for an inner function anyway, using the local variable instead of this in the outer function gets you savings even with a single reference.