Why do most JavaScript frameworks use such short variable names?

Question

I have been told to use a meaningful variable name for years. However, every time I've tried to debug some JavaScript code and dig in to the third party framework, I found that every JavaScript framework would have variable names like a , ac , b , c .

Why are such short variable names common practice? It seems like it would harm maintainability.

Answer 1

Its called minification. Its done in all languages but mostly JavaScript to remove all unnecessary characters from source code. Its mostly JavaScript because large JavaScript files can be made much smaller thereby loading quicker in the browser.

Most JavaScript libraries have a version available for developers that is not minified so that debugging can be done and then in production the minified version is used to reduce the transfer overhead.

When writing code you should always use sensible variables, but that's only so the developer can read it, the browser doesn't care.

Answer 2

You are most likely looking at minified javascript. This is the result of passing the original (and hopefully more readable) source code through a minification tool .

Answer 3

What you are seeing could be a minified version of the actual javascript. it is done so that the size of the file is reduced for performance reasons.

A good example is the jQuery library, you can look at the development version and minified version

Answer 4

What you're probably looking at is minimized code. Minimizers rewrite the Javascript to take the minimum amount of space, so it will download as quickly as possible -- unnecessary whitespace is removed, variables and functions are replaced with short names, and some other tricks are used.

Answer 5

It might be the javascript you're debugging is minified. There's no way to convert a minified javascript to original code with meaningful names written by the author. You just use your instinct and analyzing skills to understand others code even if the keywords there are unreadable.

Answer 6

As the others have said, it's the minified version. My contribution to this thread is simply to show an example.

take this example:

(function () {
    "use strict";
    var foo = function () {
        return;
    };
    var bar = foo;
    var baz = bar;
})();

And run it through jscompress.com . The result will be

(function(){"use strict";var e=function(){return};var t=e;var n=t})()