Over a million developers have joined DZone.

JavaScript Can Be Easy With CoffeeScript

DZone's Guide to

JavaScript Can Be Easy With CoffeeScript

Recently, I got a chance to check out CoffeeScript. It's simple, easy to understand, readable, maintainable, and reliable... and, I'm thinking you might want to hear about it!

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.


Recently, I got a chance to check out CoffeeScript. If you are not aware what CoffeeScript is, then don’t worry, this post will help you to understand it.

I am pretty sure once you work with it, you will fall in love with this language.

So, without wasting time let me tell you what Coffeescript.org says:

“CoffeeScript is a little language that compiles into JavaScript.”

So, it's a simple little language which converts your CoffeeScript statement into JavaScript. This conversion is seamless. As I mentioned above, Coffee Script is simple, easy to understand, readable, maintainable, and reliable.

Now, maybe you are thinking it's probably slow... this is not the case. It is indeed fast.

The only thing which we need to beware of when working with it is the white space as it is very sensitive to white space. So, we need to take extra precautions when working with it.

I think we have discussed enough theory... now it is time to show some practical applications.

Practical Parts

In order to use Visual Studio, we have to add .Coffee extension’s file.

For this post, I am using the Live coffee script IDE which is here: http://fiddlesalad.com/coffeescript/   

So, let’s open the Live IDE: 


Or, we can go to: http://coffeescript.org/ and click the “Try CoffeeScript” tab as well.


Now, let’s understand it through a few examples.

So, we don’t need to use a semicolon ";" symbol for statement terminator as CoffeeScript is using white-space delimiter, and also we don’t need to use curly braces "{}" because we can use an indent or new line instead of "{}".


Let’s understand this through an example. Suppose you want to write a JavaScript function with the following features:

1. Accept 2 parameters A & B

2. Add A & B value and assign it a new variable which is C

3. Now add a condition... If  C’s value is greater than 100 then show an alert message: "more than 100"

4. If C’s value is less than 100 then show an alert message: "Less than 100"

5. If C’s value is equal to 100 then show an alert message: "Equal to 100"

Now suppose we need to create the above function in JavaScript then we need to write code as shown in the below figure:


To achieve the same thing in CoffeeScript, you need to write the code as shown below. As you can see, there are no curly braces or semicolons.


I am pretty sure that after seeing the above example, you might be excited to know a little more about it. 

To continue with the excitement, let's write a simple CoffeeScript code snippet below and then compare it with the JavaScript code which we usually write.

Here our objective is to create a Vehicle class with a constructor and mileage.


Now, to achieve the same thing in JavaScript, we need to write code as shown in the below figure.


So yeah, you can see how much quicker and cleaner writing in CoffeeScript can be!

I hope you enjoyed this quick tutorial.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

ide ,braces ,visual studio ,coffeescript ,white space ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}