A Cup Of Coffeescript: An Overview

  • Cubettech
  • Web App Development
  • 9 years ago

Coffeescript OverviewCoffeeScript is a programming language that compiles into javascript.Coffeescript has become  popular among node and rails communities.On using coffeescript, code in .coffee files are not interpreted at run time, like JavaScript, but are compiled into .js files.It is prettymuch like javascript but with distinct syntax .

Why coffeescript ?

Since javascript is a widely accepted language which provides rich features, the question arises why we need to change to coffeescript. Coffeescript uses the main features of javascript without learning the less known features and provides a “syntactic sugar” to javascript. Coffeescript doesn’t have semicolons and curly braces instead, indentations are used so whitespace matters.Thus we need only to write less code that increases speed and readability.


To install, first we need to  have a working copy of the latest stable version of Node.js.Then  we can install CoffeeScript globally with npm:

npm install -g coffee-script

When you need CoffeeScript as a dependency, install it locally:


npm install --save coffee-script

After installation, we can execute coffee command to execute scripts to compile .coffee to js files and provide an interactive REPL.coffee command takes many options such as complie and print etc.

-c, –compile Compile a .coffee script into a .js JavaScript file of the same name.
-m, –map Generate source maps alongside the compiled JavaScript files. Adds sourceMappingURL directives to the JavaScript as well.


Compile a directory tree of .coffee files in src into a parallel tree of .js files in lib:
coffee –compile –output lib/ src/

Watch a file for changes, and recompile it every time the file is saved:
coffee –watch –compile experimental.coffee

Also we can use  browser-based CoffeeScript compiler by adding the coffeescript js file in the html page.

Creating variables

Variables in coffeescript are declared without the var keyword.Simply name your variable, an equals sign, and then the value.


 year= 2015

Functions are declared by naming the function, equals sign, and then a special function symbol (->).

consider the javascript function

var square; square = function(x) { return x * x; };

will be written in coffeescript as:

  square = (x) -> x * x

If, Else, Unless, and Conditional Assignment

If/else statements can be written without the use of parentheses and curly brackets. As with functions and other block expressions, multi-line conditionals are delimited by indentation. There’s also a handy postfix form, with the if or unless at the end.

var area; if (length) { area = total; }

the above code can be written in coffeescript as

area = total if length


if (qty && rate) {  totalValue();  totalIncome(); } else {  showTotal(); }

can be written in coffeescript as

if qty and rate  totalValue()  totalIncome() else  showTotal()

Loops and Comprehensions

Most of the loops  in CoffeeScript will be comprehensions over arrays, objects, and ranges. Comprehensions replace (and compile into) for loops, with optional guard clauses and the value of the current array index. Unlike for loops, array comprehensions are expressions, and can be returned and assigned.


var ref,len,j,food; ref = ['toast', 'cheese', 'wine']; for (j = 0, len = ref.length; j < len; j++) { food = ref[j]; eat(food); }

the above code can be written in coffeescript as

eat food for food in ['toast', 'cheese', 'wine']

Surprising or not CoffeeScript at the end of the day is JavaScript, beside some extra predefined functionalities offered.It’s made JavaScript development magnitudes more enjoyable and accessible.CoffeeScript can be fairly simple to programmers who began with JavaScript and also to the people who are from a Python and Ruby background. But those who comes from other background might feel a little different. Still, CoffeeScript is definitely worth a shot for every programmer so give it a try.

Know More About This Topic from our Techies

Got a similar project idea?

Connect with us & let’s start the journey!

Questions about our products and services?

We're here to support you.

Staff augmentation is a flexible workforce strategy companies adopt to meet specific project needs or address skill gaps.

Begin your journey!
Need more help?