CoffeeScript

CoffeeScript is a programming language that compiles to JavaScript. The main rule of CoffeeScript is “It is just JavaScript” and indeed, it is just that. So, why use it? Because it adds a lot of syntactic sugar to the language and lets you use the best of JavaScript in a much easier way.

What CoffeeScript does is to transcompile its code to JavaScript so that you will run that file in your app. It doesn’t make any interpretation at the runtime so, there is no delay to do that. The compiled file is usually clean and easy to read and will work in any JS runtime.

INSTALLATION INSTRUCTIONS

First thing you need the Node.js utility if you want to have the command line. Although it is not mandatory because the compiler itself does not depend on Node.js it is recommended to have it and makes installation much easier. So, once you have Node.js installed just install it with npm with the following syntax:

npm install -g coffee-script

 However, if you want to install it as a dependency and not globally, use the following one:

npm install --save coffee-script

 DIFFERENCES WITH JAVASCRIPT

Although CoffeeScript is just JavaScript, there are a few differences we want to stand out. First thing, you don’t need the semicolon to end expressions, you can just end the line and move to the next one but you can still use the semicolon if you want to put more than one expression in a single line. To delineate the blocks of code you will use significant whitespace. Another difference is the use of indentation. Instead of just being a beautiful way to type code, in CoffeeScript you will use it to surround blocks of code for if statements, functions and more and you will no longer need curly braces { } which are pretty annoying to use. You won’t need parentheses to invoke functions when passing arguments either. Although the code is still JavaScript, the syntactic sugar is really sweet.

VARIABLES

You don’t need to use the word “var” to declare variables on CoffeeScript. You just name the variable and equal sign and then the value you want to give to your variable. For example:

year = 1956

age = 60

As simple as that.

STRINGS

Declaring strings is made via quotes. This has been imported from other languages using the same syntax, for example:

first_name = “Hugo”

If you want to concatenate strings you just have to use the + symbol between them as for example:

Full_name = first_name + “ Reyes”

There is another way to do the same, by using the # symbol and curly braces as for example:

full_name = "#{first_name} Reyes"

Either way will have the same result, Hugo Reyes. Bear in mind there is a difference between quotes ‘ ‘ and double quotes “ “. If you use the single quotes ‘ ‘ it will display the text as it is typed inside it. For example the above code with single quotes:

full_name = ‘#{first_name} Reyes’

This will produce the string #{first_name} Reyes instead of Hugo Reyes.

FUNCTIONS

To declare a function, you will have to name it, then an equal sign and then what we call the thin arrow represented by -> as in the example:

square = (x) -> x * x
cube = (x) -> square(x) * x
When this code is compiled to JavaScript it will produce the following code:
var cube, square;
square = function(x) {
 return x * x; };
cube = function(x) {
return square(x) * x;
};

As you can see, we have typed less to do the same. This is really great to save our time and effort.

ARRAYS

There are different ways to define arrays in CoffeeScript. The commas are now optional when the values are in the same lines or as long as there is a white space between them. You can also combine both styles if you want as in:

woah = [
  0, 1, 9
  6, 5, 4
  8, 0, 0
]

It is just up to you and which one of them is more legible in the application you are using.

OBJECTS

Objects may be declared the same way they are in JavaScript but there are some other fancy ways to do it in CoffeeScript like for example not to use the curly braces as in the following example:

kids =
  brother:
    name: "Max"
    age:  11
  sister:
    name: "Ida"
    age:  9

As you see, we have used indentation instead of curly braces and trailing commas. It is important to use indentation correctly and use the white spaces because if not the nested structure will not result as expected.

RANGES

There is no native object for ranges in JavaScript and these have been added to CoffeeScript as in the following example:

week_days = [1..7]

Any two numbers separated by two periods .. and in between brackets will be considered a range. Since there is no range object in JavaScript these will be compiled to an array with all the values. Ranges can be used to countdown too if the first number is higher than the second one. As for example

countdown = [10..0]

This can also be used to splice or split arrays in a very easy way. If we use two dots .. it will include the whole range and with three dots … the range excludes the final number. When used for an array, the first number is defaulted to 0 and the final number defaulted to the size of the array. This can be shown in a practical example:

numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
start   = numbers[0..2]
middle  = numbers[3...-2]
end     = numbers[-2..]
copy    = numbers[..]

 Which equals to the following once we translate it to JavaScript:

var copy, end, middle, numbers, start;

numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
start = numbers.slice(0, 3);
middle = numbers.slice(3, -2);
end = numbers.slice(-2);
copy = numbers.slice(0);

And we can also use this syntax to replace the values of an array with new ones by splicing it:

 numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 numbers[3..6] = [-3, -4, -5, -6]

CONDITIONALS

Any conditional like if or else statements no longer need the curly brackets or parentheses and we will delimitate them with indentation instead. This goes in the same line as any other block expressions in CoffeeScript. This is very refreshing as you can see in the following example:

mood = greatlyImproved if singing
 if happy and knowsIt
  clapsHands()
  chaChaCha()
else
  showIt()
date = if friday then sue else jill
When we compile this code to JavaScript we will get the following:
var date, mood;
if (singing) {
  mood = greatlyImproved;
}
if (happy && knowsIt) {
  clapsHands();
  chaChaCha();
} else {
  showIt();
}
date = friday ? sue : jill;

No brackets, no curly brackets, no parentheses and no semicolons.

SPLATS

This is a very convenient way to accept multiple values as arguments for any method. It can do the same as in the old way but with this system you will save a lot of time and typing. Take a look at the following code in CoffeeScript, we will create a method so that the first one will get the gold medal, the second one will get the silver medal and the rest will get nothing.

gold = silver = rest = "unknown"
awardMedals = (first, second, others...) ->
  gold   = first
  silver = second
  rest   = others
contenders = [
  "Michael Phelps"
  "Liu Xiang"
  "Yao Ming"
  "Allyson Felix"
  "Shawn Johnson"
  "Roman Sebrle"
  "Guo Jingjing"
  "Tyson Gay"
  "Asafa Powell"
  "Usain Bolt"
]

 awardMedals contenders...

alert "Gold: " + gold
alert "Silver: " + silver
alert "The Field: " + rest

 This looks much clearer than the JavaScript counterpart:

var awardMedals, contenders, gold, rest, silver,
  slice = [].slice;
gold = silver = rest = "unknown";
awardMedals = function() {
  var first, others, second;
  first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
  gold = first;
  silver = second;
  return rest = others;
};
contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"];
awardMedals.apply(null, contenders);
alert("Gold: " + gold);
alert("Silver: " + silver);
alert("The Field: " + rest);

LOOPS INTO COMPREHENSIONS

Loops are replaced in CofeeScript by comprehensions. These comprehensions are usually over objects, arrays and ranges but when they are compiled, they turn into loops. The good thing about comprehensions is that they are expressions and then they can be assigned or returned, something you can’t do with loops.

Although they are not magic, they can fit into any place you would usually use a loop like for example each/forEach, map or select/filter. If we use it in combination with ranges look at the following code:

countdown = (num for num in [10..1])

And the above translates into the following when we compile it to JavaScript:

var countdown, num;
 countdown = (function() {
  var i, results;
  results = [];
  for (num = i = 10; i >= 1; num = --i) {
    results.push(num);
  }
  return results;
})();

This is a huge save. What CoffeeScript is doing in the above example is to collect the results to a variable because it has been assigned to the comprehension. Bear in mind that sometimes you will use a look just for the side effects, when this is the case beware not to return the results of the comprehension. To do this you will just have to add a return value like true or null to the bottom of the function.

But comprehensions go beyond that and can be used to iterate over the values or keys of an object by using the keyword of to point out the comprehension the properties of the object and not the values contained in an array.

The while loop is the only low level loop available on CoffeeScript and basically it does the same as the while expression in JavaScript but it also acts as an expression and returns an array with all the values collected in the iteration of the loop. Also, the word until can be replaced by while not and the loop keyword can be used with while true.

CoffeeScript also provides a do keyword to invoke a passed function and forward any arguments. This is because when you use JavaScript loops for function generation, it is very usual to wrap everything so the loop variables are enclosed and the functions we are generating aren’t sharing the final values. This can be seen in the following example:

 for filename in list
  do (filename) ->
    fs.readFile filename, (err, contents) ->
      compile filename, contents.toString()

 Which translates to the following once we run into the compiler:

var filename, fn, i, len;
fn = function(filename) {
  return fs.readFile(filename, function(err, contents) {
    return compile(filename, contents.toString());
  });
};
for (i = 0, len = list.length; i < len; i++) {
  filename = list[i];
  fn(filename);
}

CLASSES

Declaring a class in CoffeeScript is very easy compared to what we are used to doing in JavaScript. Basically you need to write the keyword class and then the name of your class. The constructor method can be written with the word constructor and a colon, remember to use a white space before the method name and then use the thin arrow ->.

class Car
  constructor: ->

If you want to initiate a new instance, use the word new and then the class name with an equal sign in the middle of both words, as in this example:

cool_car = new Car

Nothing to do with the verbose way to do it in JavaScript. This is much similar to what we are used in more object oriented languages like C#.

Inheritance is also much easier to implement than before by the means of the keyword extends. Take a look at the following sample:

class Chevrolet extends Car

class Kia extends Car

So, now let’s imagine the class Car has a method named go with the noise of the car:

class Car
  constructor: (@pilot) ->
  go: (noise) ->
    console.log noise

So, now we will make each car to implement go and call the super method with their different noises:

class Chevrolet extends Car
  go: ->
    super "RRRRRRRRRRRR"
class Kia extends Car
  go: ->
    super "beep beep"
hugo = new Chevrolet "Doc"
niggel = new Kia "nig"
hugo.go()
niggel.go()

EXISTENTIAL OPERATOR

Checking for the existence of variables in JavaScript is quite difficult. No matter what you do, every method fails for zero, false or an empty string. The existential operator in CoffeeScript is ? and returns true unless the variable is null or undefined. Check the following example:

solipsism = true if mind? and not world?
speed = 0
speed ?= 15
 footprints = yeti ? "bear"

CONCLUSION

CoffeeScript is a nice syntax sweetener for JavaScript. We can do the same we can do in JavaScript but with less typing and less time. There are some new objects added like the class object that makes class creation and inheritance something much simpler than before. The conditionals are much better managed and the comprehensions are really useful. Overall, it is much better to write your code in CoffeeScript than plain JavaScript however you should not forget this is just JavaScript so, you need to learn JavaScript first and then CoffeeScript because if not there will be a lot of misunderstanding in the long run. This is something for the expert JavaScript programmer, who wants an aid to his or her coding but it is not a programming language you should start learning unless you already can do some coding in plain JavaScript.