JavaScript can be easy with CoffeeScript a nice Idea

Recently, I got chance to view Coffee Script. If you are not aware what is Coffee script then don’t worry this post will help you to understand it.

 

I am pretty much sure once you work with this 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”

 

It means that it is a simple little language which convert the your simple coffee script statement in Java script. This conversion is seamless.  As I mentioned above Coffee Script is simple, easy to Understand , readable , maintainable and reliable.

 

Now, you are thinking it might be slow  so this is not the case. It is fast.

 

The only thing which we need to take care when we will working on this is White Space as it is very sensitive for white space. So , we need to do extra precautions when working on it.

 

I think we discuss lot of theory not it is time to do some practical.

 

Although, we can use Visual studio as well. In visual studio we have to add .Coffee extension’s file.

for this post demo I am using  Live coffee script IDE which is http://fiddlesalad.com/coffeescript/   

 

so, let’s open the Live IDE 

IDE1

 

Or we can use http://coffeescript.org/  “Try coffeescript” tab as well

 

IDE2

 

Now let’s understand it by few examples

So We don’t need to use semi colon “;” symbol for statement terminator CoffeeScript is using white-Space delimiter and also we don’t need to use curly braces “{}”  we can use indent or new line instead of “{}”.

Let’s understand this by an example suppose you want to write a JavaScript function with following features

1. Accept 2 parameter a & b

2. Add a &  b value and assign in a new variable which is C

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

4. if  C’s value is less than 100 then show alert message  “Less than 100”

5. If C’s value is equal to 100 then show alert message “ Equal to 100”

 

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

example_JavaScript_1

 

if same thing you want to achieve in CoffeeScript then you need to write code as shown below. If you see there is no curly braces & semi colon.

CoffeeScript_Example_1

 

I am pretty much sure after seeing above example you might be excited to know more about it. 

To make you excited let write a simple CoffeeScript below and then we will compare it with JavaScript code which we usually write.

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

CoffeeScript2

 

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

JavaScript_2

 

I am pretty much sure you are now super excited to know more about CoffeeScript.

I hope this tutorial might be helpful and interesting.

 

RJ

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s