Take the 2-minute tour ×

I'm diving into web development and, as I inspect the source of some web pages, I see people referencing "/scripts/compiled.js", which tells me people are compiling their javascript code.

  1. What are the benefits of compiling javasript code?
  2. What are the popular tools used for compiling javascript code?

Thanks so much in advance for your help!

share|improve this question
? compilation means turning into machine code....if you have .js by definition it is not compiled. What type of twilight zone have I found myself in? en.wikipedia.org/wiki/Compiled –  user1637281 Jan 5 '13 at 21:55

6 Answers 6

up vote 6 down vote accepted

Compilation of JavaScript code (usually cross-compilation from JavaScript to JavaScript) allows you to detect certain classes of error statically (i.e. without having to run the code) whereas JavaScript for the most part defers all such checks to runtime: this means that rarely executed parts of your script that use a variable incorrectly will only be detected if the code is ever executed. A compiler can detect many usages at compile time before the code is even deployed.

This kind of type checking is achieved by performing type inference: i.e. the compiler propagates known type information about a variable based on the point at which a variable's value is assigned throughout the program's various code paths and determines if the variable is used in a consistent fashion in other areas of the program. Obviously, due to the highly dynamic nature of JavaScript, this type inference is not perfect but it can still be useful.

JavaScript compilers can also perform minimization in order to reduce the size of a script to a minimum by renaming variables and method names etc. in order to minimize bandwidth usage as well as merge multiple scripts into a single file for ease of downloading.

  • Google's Closure is an example of a JavaScript-to-JavaScript cross-compiler.
  • Morfik produce another JavaScript-to-JavaScript cross-compiler which, I think, I predates Closure.

Philosophical Edit: Compilers or cross-compilers that generate JavaScript as their target are effectively treating JavaScript as the "machine language" of the web browser and this is very similar in essence to compilers that emit C as a portable intermediate language. The line between preprocessor and compiler can be a grey one but I would suggest that something that tokenizes, parses and semantically analyses source code and emits some intermediate or machine language at the backend is more correctly considered a compiler than a preprocessor which usually performs only simple text substitution or macro expansion.

share|improve this answer
+1 for Closure. It does a remarkable job of detecting errors and problems before your code ever gets a chance to misbehave or fail utterly in a browser. Love it. –  Adam Crossland Sep 23 '10 at 16:53
I also use the closure compiler in advanced mode to understand my code a bit better. I diff the pretty-printed output from compiling in simple/advanced code to see what it removed. This helps find unused code in the application. –  Annie Sep 23 '10 at 17:00

"Compiled" code is often minified and compressed. Compressing removes whitespace and minification will attempt to remap functions and variables to smaller names. It is not a traditional compiler which will turn it into machine or bytecode.

function Foo(count, width)
    setWidth(width / 2);

will turn into

function c(aa,ba){a(aa);b(ba/2);}

Readability is far reduced but can have a significant savings on file size. There are a couple good online minification tools that you can try out.

share|improve this answer

The code is not being compiled, it's being minified.

EDIT: some people in this thread still call it compiled, so I guess that term stands and I'll strike my previous statement :P

The goal of this is typically 2 parts:

  • Reduce the size of your javascript

This is typically done by removing line breaks, extra white space, & potentially rewriting some of your code to make it smaller—var awesome_variable = 1;var a=1;. This depends on which minification tool you use.

  • Reduce the number of requests to the server

The less requests you make, the faster your page will load.

A few of the popular ones are:

YUI Compressor — This is both a JS and CSS minification tool


Google Closure — This will do the rewriting process I spoke of above, I'm not sure if others do the same

If you are working within some sort of framework, there might be other tools that will "wrap" these tools. For instance, with Rails, there's Jammit. It can be used with either YUI or Closure, will let you continue to develop as you always have, and upon deployment to production, will minify & package all of your assets. Jammit does more than what your question asks for, but was the first that came to mind.

share|improve this answer

"Compiling" is a misnomer. On the web, it almost always refers to "compression", which basically removes unnecessary whitespace and squeezes variable names. (of course, many tools do more than this)

The main benefit of doing this is that it reduces file size, and hence download times, at the cost of losing human-readability.

Two popular tools off the top of my head:

share|improve this answer

Compilation in terms of JavaScript means something slightly different: It usually refers to a file where all the JS used on a site is collected into one file and minimized, not compilation as we understand from compiled languages (that compile to machine language or bytecode).

share|improve this answer

JavaScript can't be compiled. What they're doing is one of two things: obfuscating and minimizing.

Obfuscating is when variables and function names in code are converted from something meaningful like bindClickListener to something like a. This makes code difficult for humans to read and copy.

Minimizing is simply reducing the amount of whitespace to get the file as compact as possible, such that less bandwidth is consumed for each request (and thus the page loads faster).

share|improve this answer
I'd absolutely love to see a comment that explains the downvote. –  Matt Huggins Sep 23 '10 at 16:56
The downvote is not mine, but JavaScript absolutely can be compiled. Closure does this, JScript .NET does this and there are others. Closure, admittedly, has JavaScript as its target "machine code" but it is still very much a compiler in the sense that cross-compilers are also compilers. –  Richard Cook Sep 23 '10 at 16:58
I would call that minified/obfuscated still. –  Matt Huggins Sep 23 '10 at 17:08
@Matt: Agreed that what most tools do is minification, but the statement that "JavaScript can't be compiled" is false. Any language can be compiled into a binary. @Richard: It would be more appropriate to call Closure a preprocessor rather than a compiler in the usual sense. –  casablanca Sep 23 '10 at 17:12
+1 for taking the time to comment. Thanks Matt, and I learned a couple things from your post, despite the semantics. –  BeachRunnerFred Sep 23 '10 at 17:18

Your Answer


