that, self or me — which one to prefer in JavaScript?

Question

While coding JavaScript sometimes you store the reference of object this in a local variable for different purposes (to set proper scope, to help code obfuscators, etc.). There are coders who prefer aliasing this to that to make it obvious its intention. Other guys use self since it's pointing to the object itself. I even saw source codes where me held the reference and it still makes sense. Certainly there are other ones.

Which one should I prefer? Is there a convention on which to use or is it only the matter of taste.

Answer 1

There's an orange in your apple basket there, this has a very specific contextual meaning. The choice is really between self and me of those options. Between those...you choose, it doesn't matter either way only personal preference.

this refers to the context your in, so it's not really an "option" without introducing a lot of confusion and easy to make errors. I see self used much more than me (in example code, frameworks, libraries, etc). It's just preference, but I agree self is more attractive, not sure why...again just my preference.

Answer 2

I personally use that, but anything else that's clear is fine.

I wouldn't use self because the global variable/window-property self already exists as a reference to window. Although it's totally useless (so no-one is likely to care that you're shadowing it), it slightly increases the risk of silly errors going un-noticed:

var se1f= this;         // mis-spelled (perniciously). or maybe you just forgot to write line
onclick= function() {
    self.foo= 1;        // whoops, just wrote to `window`!
};

whereas:

var thot= this;
onclick= function() {
    that.foo= 1;        // error thrown
};

Slightly contrived, but JavaScript's so sloppy with letting errors slide you don't really want to make it any more so.

Answer 3

Well personally I'm trying to get better at making the variable mean something a little more than "that thing I need later". Often you need those temporary variables in situations that get a little gnarly; there might be two or more layers of temporary this stashes to keep track of.

Thus, for example in a jQuery setup, I might use something to note the element type that a temporary this stash should hold:

$('form').each(function() {
  var $form = $(this);
  $form.find('input:checkbox').each(function() {
    var $checkbox = $(this);
    // ...
  });
});

Using the "$" prefix on the variables is a nice way to keep track of whether the object has been "jQuery-ized" or not :-)