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.

Run your JavaScript through this tool and see what happens: http://jscompress.com/ — Marty, Jul 30 '13 at 03:26
Why this downvoted a lot? Although minification is one of common sense for JavaScript developers, but not for the others. — Mics, Jul 30 '13 at 03:37

score 5 · Accepted Answer · answered Jul 30 '13 at 03:30

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.

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

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.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 30 '13 at 03:25

Lucas

8,035
2
32
45

Arun P Johny · Answer 3 · 2013-07-30T03:47:19.043

1

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

edited Jul 30 '13 at 03:47

answered Jul 30 '13 at 03:25

Arun P Johny

384,651
66
527
531

score 1 · Answer 4 · answered Jul 30 '13 at 03:26

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.

score 1 · Answer 5 · answered Jul 30 '13 at 03:29

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.

score 0 · Answer 6 · answered Jul 30 '13 at 03:42

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})()

Why do most JavaScript frameworks use such short variable names?

6 Answers6