JavaScript & CoffeScript - A comparison
Bài đăng này đã không được cập nhật trong 3 năm
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)
All rights reserved