1-letter names for variables and functions in jQuery, JavaScript

Question

Hi there,

I was looking at Twitter's static scripts and noticed that all variables and functions where just 1 character long, why and how do they do this? Has it something to do with performance? If so, why don't they give all elements on their website these kind of short names, maybe 2 characters long instead of 1 to avoid any collisions.

Example:

(function (A) {
A.fn.isScreenNameField = function () {
    return this.each(function () {
        var M = A(this);
        var F = A("#signup_username_url");
        var E = A("#screen_name_info");
        var D = A("#avail_screenname_check_indicator");
        var O;
        var C;
        var I;
        var N = M.val();
        var G = N;
        var H = N != "";
        var Q = /[a-zA-Z0-9_]/;

        function K() {
            if (H) {
                F.html(M.val())
            }
        }
        function L() {
            M.trigger("show-info");
            E.hide();
            D.show()
        }
        function B() {
            E.show();
            D.hide()
        }
        function P() {
            G = O;
            jQuery.ajax({
                type: "GET",
                url: "/users/username_available",
                data: {
                    username: O
                },
                dataType: "json",
                success: function (R) {
                    if (C) {
                        var S = R.msg;
                        if (R.valid) {
                            M.trigger("is-valid");
                            F.removeClass("invalid").addClass("valid")
                        } else {
                            M.trigger("is-invalid", R.msg);
                            F.addClass("invalid").removeClass("valid")
                        }
                    }
                },
                beforeSend: null,
                complete: function () {
                    clearTimeout(twttr.timeouts.availabilityTimeout);
                    B()
                }
            })
        }
        function J(R) {
            O = M.val();
            clearTimeout(twttr.timeouts.availabilityTimeout);
            C = O.match(Q);
            if (!C) {
                G = O;
                B();
                return
            }
            if (O == G) {
                return
            }
            L();
            twttr.timeouts.availabilityTimeout = setTimeout(P, 2000)
        }
        M.isSignupFormField({
            validateWith: function (R) {
                if (isBlank(R)) {
                    return _("Please enter a user name")
                } else {
                    P()
                }
            },
            allowInput: Q
        });
        M.keyup(function (R) {
            if (jQuery.inArray(R.keyCode, [16, 17, 18, 20, 27, 33, 34, 35, 37, 38, 39, 40, 144]) == -1) {
                if (M.val() != "") {
                    H = true
                } else {
                    M.trigger("show-info")
                }
                K();
                J()
            }
        });
        M.bind("value-changed", P);
        M.bind("custom-validate", P)
    })P
}
})

Answer 1

This script has been "minified", an automated technique of replacing variables with shorter names, without changing functionality. See JSMin, for example. The goal is to reduce download times and bandwidth when sending the script to a client.

Answer 2

Javascript is client-side, so you have to load the script. Less text to download mean better performance, I'd think.

Answer 3

Many javascript projects run their code through a 'minifier' to make the code smaller. This improves the time the browser takes to download the library. Most projects also supply a non-minified version for developers to read:

Example here: http://docs.jquery.com/Downloading_jQuery#Current_Release

Answer 4

Could be many reasons as to why they do this, to name a common one:

Decrease the filesize of the scripts as alot of people use twitter.

Answer 5

They run their scripts through something like http://developer.yahoo.com/yui/compressor/ in order to reduce their size, and therefore the time the need to load.

This is all done in order to decrease the websites load times.
In recent years this topic has become something like a new field, especially due to things like the talks from Steve Stouders: http://stevesouders.com/