JavaScript & CoffeScript - A comparison

What is JavaScript?

JavaScript is a scripting language for Web pages, but it's used in many non-browser environments too. JavaScript runs on the client side of the web, which makes the webside dynamic and smooth.

What is CoffeeScript?

CoffeeScript is a also a scripting language that compiles into JavaScript. The main aspect is to writing JavaScript code better by providing you with a more consistent and succinct syntax, as well as by avoiding the "bad parts" and the messy nature of the JavaScript language.

So which one to choose. Both have some pros and cons.

JavaScript pros:

• Its Awesome (basically you can do anything you want)
• Javascript is relatively fast to the end user
• Extended functionality to web pages
• Largest community of developers

JavaScript cons:

• Strange syntax
• Messy codes. Lots of curly braces, function keywords and semicolons
• Hard to manage
• Many lines of codes for simple work.

CoffeeScript pros:

• Easy function and lambda definitions.
• Syntactically significant whitespace.
• straight forward class definitions
• Easy to manage.

CoffeeScript cons:

• Debugging complexity
• Compile complexity
• Smaller development community
• Slower

JavaScript Syntax vs. CoffeeScript Syntax:

JavaScript:

$(function() {
  $("body").html("JS Rules!");
})

CoffeeScript:

$ ->
  $("body").html "Coffee Rocks!"

Here are two basic rules to remember:

• Whitespace matters: There are no curly braces in CoffeeScript. Instead, indentations are used.
• No parentheses. Functions that take arguments do not need parentheses around them as you can see in the code above.

If you wanted to declare a function that takes arguments, in JavaScript it would be like so:

function say(something) {
  alert(something);
}

But in CoffeeScript, it’s like this:

say = (something) ->
	alert something

To see the differences between these two, I make a simple Stopwatch app in RoR. You can easily found it here. https://github.com/mmkarim/Stopwatch

There are two stop wathches. One working with JavaScript and another Working with CoffeeScript.

The JavaScript part looks like this:

$(document).ready(function(){
  document.getElementById("start").onclick = start;
  document.getElementById("resume").onclick = resume;
  document.getElementById("stop").onclick = stop;
})

var count;
var tick=null;
var running = false;

function display()
{
  var micro = count/100;
  var sec = parseInt(micro%60);
  var min = parseInt(micro/60) % 60;
  var hr =  parseInt(micro/3600);
  micro = count%100;

  var hr_zero="",min_zero="",sec_zero="",micro_zero="";

  if(hr<10)
    hr_zero ="0";
  if(min<10)
    min_zero ="0";
  if(sec<10)
    sec_zero ="0";
  if(micro<10)
    micro_zero ="0";

  document.getElementById("hour").innerHTML = hr_zero+hr;
  document.getElementById("minute").innerHTML = min_zero+min;
  document.getElementById("second").innerHTML = sec_zero+sec;
  document.getElementById("micro").innerHTML = micro_zero+micro;
}

function countdowns() {
  display();
  count++;
  tick = setTimeout("countdowns()", 10);
}

function start()
{
  count=0;
  clearTimeout(tick);
  running=true;
  countdowns();
}

function resume()
{
  if(tick!=null && !running)
  {
    running=true;
    countdowns();
  }
}

function stop()
{
  running = false;
  clearTimeout(tick);
}

And the Coffee part looks like this:

count = 0
tick = null
running = false

display = ->
  micro = count / 100
  sec = parseInt(micro % 60)
  min = parseInt(micro / 60) % 60
  hr = parseInt(micro / 3600)
  micro = count % 100
  hr_zero = ""
  min_zero = ""
  sec_zero = ""
  micro_zero = ""
  hr_zero = "0"  if hr < 10
  min_zero = "0"  if min < 10
  sec_zero = "0"  if sec < 10
  micro_zero = "0"  if micro < 10
  document.getElementById("chour").innerHTML = hr_zero + hr
  document.getElementById("cminute").innerHTML = min_zero + min
  document.getElementById("csecond").innerHTML = sec_zero + sec
  document.getElementById("cmicro").innerHTML = micro_zero + micro

countdowns = ->
  display()
  count++
  tick = setTimeout ( ->
    countdowns()
  ), 10

start = ->
  count = 0
  clearTimeout tick
  running = true
  countdowns()

resume = ->
  if tick? and not running
    running = true
    countdowns()

stop = ->
  running = false
  clearTimeout tick

$(document).ready ->
  document.getElementById("cstart").onclick = start
  document.getElementById("cresume").onclick = resume
  document.getElementById("cstop").onclick = stop

Works the same, Only syntax different.

There are lots of websites that convert JS to Coffee and vice-versa. You can easily see the differences of syntax between these two.

If we want to announce a winner between JS and Coffee, we have to first answer a vital question.

Do you like C-style syntax or Ruby-style syntax?

CoffeeScript was designed in the vein of Python and Ruby, so if you hate those languages then you will probably hate CoffeeScript. But if you like Ruby-style syntax, you'll also love CoffeScript's syntax. A developer will be more productive in the language that they like programming in.

So the winner is..... it depends on you. (Happy Coding)