The Little Book on CoffeeScript

Chapter 1. CoffeeScript Syntax

Firstly, before we get any further into this section, I want to reiterate that while CoffeeScript’s syntax is often identical with JavaScript’s, it’s not a superset, and therefore some JavaScript keywords, such as function and var, aren’t permitted, and will throw syntax errors. If you’re writing a CoffeeScript file, it needs to be pure CoffeeScript; you can’t intermingle the two languages.

Why isn’t CoffeeScript a superset? Well, the very fact that white space is significant in CoffeeScript programs prevents it from being a superset. And, once that decision’s been made, the team decided you might as well go the full hog and deprecate some JavaScript keywords and features in the name of simplicity and in an effort to reduce many commonly occurring bugs.

What I find mind-blowing, in a meta sort of way, is that the CoffeeScript interpreter itself is actually written in CoffeeScript. It looks like the chicken or egg paradox has finally been solved!

Right, so firstly let’s tackle the basic stuff. There are no semicolons in CoffeeScript, it’ll add them automatically for you upon compilation. Semicolons were the cause of much debate in the JavaScript community, and behind some weird interpreter behavior. Anyway, CoffeeScript resolves this problem for you by simply removing semicolons from its syntax, adding them as needed behind the scenes.

Comments are in the same format as Ruby comments, starting with a hash character:

# A comment

Multiline comments are also supported, and are brought forward to the generated JavaScript. They’re enclosed by three hash characters:

###
  A multiline comment, perhaps a LICENSE.
###

As you’re going through this book’s examples, it may be worth pasting the CoffeeScript into the online compiler showing you the generated JavaScript.

As I briefly alluded to, white space is significant in CoffeeScript. In practice, this means that you can replace curly brackets ({}) with a tab. This takes inspiration from Python’s syntax, and has the excellent side effect of ensuring that your script is formatted in a sane manner; otherwise it won’t even compile!

Variables and Scope

CoffeeScript fixes one of the major bugbears with JavaScript, global variables. In JavaScript, it’s all too easy to accidentally declare a global variable by forgetting to include var before the variable assignment. CoffeeScript solves this by simply removing global variables. Behind the scenes, CoffeeScript wraps up scripts with an anonymous function, keeping the local context, and automatically prefixes all variable assignments with var. For example, take this simple variable assignment in CoffeeScript:

myVariable = "test"

As you can see, the variable assignment is kept completely local; it’s impossible to accidentally create a global variable. CoffeeScript actually takes this a step further, and makes it difficult to shadow a higher-level variable. This goes a great deal to prevent some of the most common mistakes developers make in JavaScript.

However, sometimes it’s useful to create global variables. You can either do this by directly setting them as properties on the global object (window in browsers), or with the following pattern:

exports = this
exports.MyVariable = "foo-bar"

In the root context, this is equal to the global object, and by creating a local exports variable you’re making it really obvious to anyone reading your code exactly which global variables a script is creating. Additionally, it paves the way for CommonJS modules, which we’re going to cover later in the book.