var me = this; convention

Once in a while the topic of using the var me = this; convention is brought up. Some people love it, some people hate it and some people don't understand it. Usually the people who love it or hate it understand the convention (or may not fully understand it) but there seems to be quite a few people who do not understand it. I use the variable me as an example but you could name it anything and it won't change it, even to the beloved var that = this; and what I will say will still hold true. The decision on whether to use var me = this; is purely for minification and therefore saving bytes. However, it could also cost you bytes if you don't realize what you are doing or maybe think you will need to use it when you start coding and don't go back to clean your code up. Let's start experimenting!

Control

Let's look at a control method that you may have somewhere in your code:

saveSomething : function(foo, status, scope) {
    this.foo = foo;

    this.myObj = {
        mitch : status
    };

    this.onSave.call(scope);
}

If we look at this, we use this 4 times. All looks great so far! We have a method that saves the first two arguments and then calls a method.

New Feature!

So our control saveSomething method has been working quite well but we realize that we should do some error checking, we can make the scope argument optional and we decide we need to pass a method in the onSave method call. Let's look at an example of how we can do it and then circle back to see if we can do a little better:

saveSomething : function(foo, status, scope) {
    var myObj = this.myObj;

    scope = scope || this;

    if (!myObj) {
        myObj = this.myObj = {};
    }

    this.foo = foo;

    myObj.mitch = status;

    this.onSave.call(scope, this.saveSomethingCallback);
}

So here we created a variable myObj to equate to this.myObj. However, this.myObj may be undefined so we added an if statement to check and if it is undefined (or falsey) set the myObj variable and this.myObj property to an Object. Also, we made scope default to this with the scope = scope || this; so if the scope argument is undefined (or falsey) it will then equate to this making it an optional argument (IMO a little more robust). Lastly we pass the saveSomethingCallback method in the onSave call as an argument to be executed later in our code.

Minification

So now we have a little better of a method but it can get better! When we deploy our code we should always minify our code so it's as small as can be reducing what the client has to download but still maintain code functionality. This does many things but what I want to talk about is how it minifies variables. This small example:

var foo = 'bar';

can get minified to

var a='bar';

which saves 4 bytes as foo got renamed to a and the spaces before and after the equal sign got trimmed. Thinking back to our saveSomething method we can think that this will get minified to something like a just like the foo variable got renamed. Unfortunately, this (and other JavaScript keywords like delete or new) will not get minified. To combat this, we can create a variable to cache this and that variable can then get minified. This is where the var me = this; convention comes into play as we are going to cache this to the me variable and me will get minified:

saveSomething : function (foo, status, scope) {
    var me    = this,
        myObj = me.myObj;

    scope = scope || me;

    if (!myObj) {
        myObj = me.myObj = {};
    }

    me.foo = foo;

    myObj.mitch = status;

    me.onSave.call(scope, me.saveSomethingCallback);
}

We put the me = this in the variable block at the beginning of the method and replaced all this instances with me. We can now minify it and save 3 bytes per this instance for a total of 18 bytes (this was used 6 times in the saveSomething method before we applied the me = this convention and 6 x 3 = 18). However me = this also costs us some bytes, in fact in this example it cost us 8 bytes not including the spaces between me and this as they will get trimmed when it's minified. So in total we saved 10 bytes after the var me = this convention which doesn't account for much but if you have a sizable app it can add up and if you ask me, every bit saved counts.

Trouble!

This convention doesn't come without a dark side. Applying this convention without counting the bytes that the me = this takes up and what you will save after minification will cost you bytes. If we go way back to the first saveSomething method and applied the var me = this; convention we will have costed some bytes:

saveSomething : function(foo, status, scope) {
    var me = this;

    me.foo = foo;

    me.myObj = {
        mitch : status
    };

    me.onSave.call(scope);
}

The var me = this; would cost us 11 bytes (it would be var a=this; after minification). For every instance of this we replaced we save 3 bytes and we had 3 instances so we save 9 bytes but the me variable line cost us 11 so we saved -2 bytes which is bad. We are trying to save bytes not add them.

Two Types

In these examples you saw the me variable get created by itself and in a variable block. If you have me = this in a variable block where there are other variables it costs less as we don't have to add the var keyword. Let's look at the byte cost:

var me = this;
var a=this; //minified

The minified version costs 11 bytes so you would have to use this 4 or more times to save bytes in the long run.

var me  = this,
    foo = 'bar';
var a=this,b='bar'; //minified

a=this, costs 7 bytes so you would have to use this 3 or more times to save bytes in the long run.

Review

Using the var me = this; convention is purely to save some byte because this cannot be minified but me can. The savings won't be drastic but every little bit helps but you have to be cautious as it could cost you bytes. If you ask me, this is a code style issue also and code style (quality) should be just as high of a priority as what your code is doing. I take my code style very seriously so lining colons and equal signs up and also applying me = this wherever it will save a byte is very important to me.

A downside to this, which is just a visual annoyance, is in your IDE you probably have syntax highlighting and keywords usually get a blue (or other color depending ont he IDE) highlight but me will not so you can't easily visually see the scope. My eyes simply have been trained to see me easily but I do miss seeing this highlighted. The syntax highlighting in the above examples show this.

Results may vary.