JavaScript Can Be Easy With CoffeeScript

Datetime:2016-08-23 02:51:57          Topic: CoffeeScript  JavaScript           Share

Introduction

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 " {} " .

Example

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.





About List