Compiling from a CoffeeScript file

Now that you've tried out the CoffeeScript console, let's try compiling a file. The console is great for trying out ideas and rapidly getting feedback from your code, but you'll do most of your work in CoffeeScript files, which you then compile to JavaScript.

Let's start with a very simple CoffeeScript file. CoffeeScript conventionally uses the .coffee extension, so let's name our file setup.coffee.

alert "Welcome!"

Note

The first thing that might jump out at you in this code is the lack of parentheses. In CoffeeScript parentheses are optional when calling a function, unless the function takes no arguments, or they are needed to resolve ambiguity.

Now let's compile this file to JavaScript. Run this from your terminal, in the same directory that holds setup.coffee:

coffee -c setup.coffee

The -c option tells the coffee executable that instead of opening a console, you wish to compile a file. You should now have a file in the same directory named setup.js. This is the result of your compilation. Open it, and you'll see JavaScript code. You might be able to guess what it will look like:

alert("Welcome!");

The CoffeeScript compiler usually creates very readable output (probably more readable than the output of a few programmers you know!). This is a great feature, because it means that if at any time you want to check the compiler's work, or debug, or explore how the compiler achieves something, you can simply open the compiled file in your favorite text editor and read through it. We'll make use of this throughout the book, especially in the next chapter. Be careful though—any changes you make to the JavaScript file will be overwritten the next time you compile. Treat the JavaScript output as read-only.

Tip

While working through the examples, you may see output from your compiler that is slightly different from that printed here. Different versions of CoffeeScript will produce subtle variations in output. These differences are usually superficial, so don't be alarmed. If you compare the two side by side, you will usually be able to find the difference and see that the rest of the code is unchanged.