Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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 to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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: 

IDE1

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

IDE2

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:

example_JavaScript_1

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.

CoffeeScript_Example_1

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.

CoffeeScript2

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

JavaScript_2

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

I hope you enjoyed this quick tutorial.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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

Published at DZone with permission of Rajat Jaiswal, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}