This is a brief overview and example of how CoffeeScript works
To see the original documentation go to

My working example is

which can be downloaded at

How CoffeeScript works:
CoffeeScript is a little language that compiles into JavaScript.
This is to reduce the amount of code that you write reducing possible errors and can even speed up your code.

Using the .coffee file extension, CoffeeScript compiles your code into valid javascript

square = (x) -> x * x

compiles to

Running CoffeeScript

Node.js is required to compile the css file

Windows Installer
then install stylus in command Prompt
npm install -g coffee-script
Then to compile your JS file you go to the location of your .coffee file and run
coffee --watch --compile

Linux or Mac Compiler
Either use a pre-compiled binary if one is available, otherwise compile it yourself
install stylus
npm install -g coffee-script
Then to compile your JS file you go to the location of your .coffee file and run
coffee --watch --compile

This will now automatically compile your CoffeeScript to valid javascript everytime you make a change.


Your html is as you normally would build your page.
My example just creates a seperate button for each function call which you can see from my example

I have also added a CSS file to help with the design and included jQuery to help with identifying click events.


If you wish to use jQuery in your code like I have, you need to identify the jQuery document ready function.



setNumber = 42

These are for all the variables that you assign to your javascript file.

Strings with variables

result = "Assigned Number is #{setNumber}"

A clean way to insert any javascript variables into your string.

Multiline strings

result = "Assigned Number is #{setNumber}
which is a value set in the file"

In normal javascript you can not keep on adding text on multiple lines. With CoffeeScript, you can.


Using IF statements are very similar, just no need for braces or semicolons

biggerThan50 = if setNumber > 50 then 'Yes' else 'No'
alert biggerThan50


As you can see, less code is needed to write a switch statement

Try / Catch / Finally


divideByTwo = (x) -> x / 2
alert divideByTwo(12)


list = [1, 2, 3, 4, 5]
alert list



list = [1, 2, 3, 4, 5]
totalval = 0
totalval += value for value in list when value isnt 3
alert totalval


list = [1, 2, 3, 4, 5]
alert list[1..3]


list = [1, 2, 3, 4, 5]
alert list[3..]


Take note of the at the end of the array.

Classes, Inheritance, and Super

Classes gives you allot of power to OOP your javascript to seriously reduce the amount of code that you write and maintain easily

So you commit and push your code updates live.
As simple as that.

As you can see, you can do allot with less code when using CoffeeScript

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *