As I mentioned in the previous blog post, CoffeeScript is a neat little language that compiles down to JavaScript code. Its syntax is heavily inspired by Ruby and next to bringing a lot of nice language features to the table, it also requires less amount of code than writing the equivalent directly in JavaScript. For this blog post, we’ll dive into some of this syntactic sugar by discussing variables and functions.
Variables
Declaring a variable in CoffeeScript is done like this:
There’s no need to use the var keyword like in JavaScript. In fact, using the var keyword results in a compiler error. We also don’t need to provide a semi-colon at the end of the statement. These are added automatically for you during compilation. When we omit semi-colons in JavaScript, the engine also tries to add them at runtime but this behavior can cause a lot of grief. CoffeeScript correctly adds them for us, and although we no longer need to type in semi-colons, we’re still able to do so if we want to.
The variable declaration from above translates into the following JavaScript:
The resulting code here is actually quite interesting. When we want to declare a local variable in JavaScript and we forget to specify the var keyword, then this variable ends up becoming a global variable instead.
This can no longer happen just by accident when using CoffeeScript as it wraps all generated JavaScript in a self-executing function and by automatically emitting the var keyword before the variable name. We’re still able to create global variables but the only way is to declare them explicitly.
The use of global variables is strongly discouraged when using JavaScript. As a result, the same goes for CoffeeScript as well.
Functions
The tedious function keyword in JavaScript is not part of the CoffeeScript syntax. Instead it uses an arrow to define a function.
The syntax for defining a function in CoffeeScript is an (optional) list of parameters, followed by an arrow and then the function body. In this case, the code for the entire function is put on the same line. Multiple lines are also possible off course, but then the code for the function body needs to be properly indented as the CoffeeScript compiler uses significant whitespace to delimit blocks of code. This is not only for functions, but also for conditions, loops, try/catch statements, etc. … . Also notice that we no longer need to specify any parenthesis for the passed arguments when calling our log function.
The code for this simple example is translated into the following JavaScript code:
Did you notice that the result of the call to console.log is returned to the caller of our log function? CoffeeScript simply returns the last expression of each function by default unless we explicitly use the return keyword.
CoffeeScript also provides a nice and useful keyword in case that we have a function without any parameters that we want to invoke directly.
The do keyword just executes a function directly without having to assign it to a variable and invoke it on the next line. The resulting JavaScript code is a call to console.log wrapped in a self-executing function:
In JavaScript we have both function expressions and function declarations. You can read this blog post to learn more about both these concepts. CoffeeScript only supports function expressions.
The first line of code for this example will give us the following compiler error:
TypeError: undefined is not a function
In order to get this code to compile, we need to change this code to the following:
CoffeeScript also supports default parameter values, but this feature is implemented in a different way than what we’ve been used to see to in other programming languages.
In other programming languages, a default value for a parameter is used when a value is omitted in the function call. CoffeeScript takes this a bit further and also uses a default value if null or undefined is explicitly specified in the function call. This might look weird at first, but this also implies that the optional parameters do not have to appear last in the parameter list.
podcast = 'Astronomy cast'Fascinating language, isn’t it?
There is much more to be said about functions in CoffeeScript, but I will discuss those features in the next couple of blog posts.
Until next time
