CoffeeScript is a little language that compiles into JavaScript
CoffeeScript is a project by Jeremy Ashkenas that lets you write code in a nice, clean way and compile it into JavaScript that attempts to use “The Good Parts” and which passes JSLint.
Here’s a small, typically-messy JavaScript function ripped out of Ars Technica:
ars.fp.v6.switch_type = function(type) {
$('#news-bar li').removeClass('selected');
$('#news-bar .type li.' + type).addClass('selected');
ars.fp.v6.page = 1;
ars.fp.v6.current_tab = 'all/' + type;
$.cookie('v6-newsbar-tab', ars.fp.v6.current_tab, { path: '/', expires: 365*10 });
ars.fp.v6.get_more_posts(ars.fp.v6.current_tab, true, function(data){
$('#all-stories, #all-etc').replaceWith(data);
ars.setup_time();
ars.fp.v6.hijack_comment_links();
});
};
And here it is ported (more-or-less) to CoffeeScript—I converted the name-spaced variables so you could see how the var declarations get pushed to the top of scope:
switch_type: type =>
$('#news-bar li').removeClass('selected')
$('#news-bar .type .li' + type).addClass('selected')
page: 1
current_tab: 'all/'+type
$.cookie('tab', current_tab, { path: '/', expires: 365*10})
callback: data =>
$('#all-stories, #all-etc').replaceWith(data)
setup_time()
hijack_comment_links()
true.
get_more_posts(current_tab, true, callback).
And here’s what this CoffeeScript looks like compiled back to JavaScript:
(function(){
var switch_type;
switch_type = function() {
var callback, current_tab, page;
$('#news-bar li').removeClass('selected');
$('#news-bar .type .li' + type).addClass('selected');
page = 1;
current_tab = 'all/' + type;
$.cookie('tab', current_tab, {
path: '/',
expires: 365 * 10
});
callback = function(data) {
$('#all-stories, #all-etc').replaceWith(data);
setup_time();
hijack_comment_links();
return true;
};
return get_more_posts(current_tab, true, callback);
};
})();
It doesn’t look too different because I already run all our scripts through JSLint, but there’s some interesting differences.
CoffeeScript bubbles up all your variable declarations to the top of their scopes, as you can see. It also returns the final expression in any function block without me having to do anything. Note inside callback that I had to put true. on the final line to force a return value of true. Otherwise the return value of hijack_comment_links would have been returned.
Overall I found it really easy to write and its definitely really nice to not have to think about semi-colons and commas and doing the function(...) { ... } dance all over the place. The only thing I find weird (which is not too bad really) is the use of the period to end the current block’s scope. You can see how I did this in my inner function callback.
Once or twice while writing this I would add a new line before the final line in a block I’d written previously (which was ended with a period) and found myself wondering why my new line was being stuck outside the function scope.
You’ll also notice it works fine with existing code; I told Coffee nothing about jQuery’s $ or any of the made-up functions I used here. This is really nice if you’re integrating with pure JS libraries outside of your control.
If you’re still interested check out the CoffeeScript website or the project’s github page.