Using jQuery with CoffeeScript

I’ve been playing with CoffeeScript recently, for no other reason than to satisfy my intrigue. Of course, one of the first things I wanted to work out was how to use jQuery with my CoffeeScripts.

jQuery ready handler in CoffeeScript

As you know, all your jQuery methods should be hooked to jQuery’s .ready() event handler. If you’re averse to the odd keystroke, you’re probably already using the shorthand alternative $(function(){ });.

This can be achieved in CoffeeScript simply by using $ ->. Really, that’s it, but I personally prefer to use the slightly longer-hand jQuery -> which I think makes it a bit clearer that the following lines of your CoffeeScript are using jQuery.

So, in CoffeeScript we use:

jQuery ->
  ### your code here ###

Which in JavaScript compiles to:

jQuery(function(){
  /* your code here */
});

Wrapping jQuery plugins in a closure

As explained in the jQuery plugin authoring guidelines, all plugins should be wrapped in a closure. Here’s the cool thing: in CoffeeScript we don’t even need to do that.

As CoffeeScript already safely wraps everything in a closure, all we need to do is set $ = jQuery at the top of our code.

So, in CoffeeScript we simply do:

$ = jQuery
$.fn.myFunction = ->
  ### your code here ###

Which in JavaScript compiles nicely to:

(function(){
  var $;
  $ = jQuery;
  $.fn.myFunction = function() {
    /* your code here */
  };
}).call(this)

For what it’s worth, and as a bit of an aside, the benefits gained from learning and using CoffeeScript are a bit debatable if all you’re looking to do is throw a few lines of jQuery together. That said, if you are using CoffeeScript you’ll probably want to to use it with jQuery too, so hopefully these two tips will prove useful to some.

8 responses

Juan Schwindt responded on with…

Instead of using:

jQuery ->

I use:

jQuery ($) ->

This way I can use $ in my code without worrying about naming collision.

Jack Dempsey responded on with…

Nice post Aaron. I’ve come across many of the same tips–I think they’ll really make things easier for people getting into using CoffeeScript and jQuery.

One other point that’s been a bit tricky and seemingly ever present is related to the closure bit you mentioned.

I’ve taken to putting

root = exports ? this

at the top of lib files as it will make things easier if I ever recycle into using them in Node, and also acts as a nice reminder that I have a root object to use, and if I don’t assign to it, that variable or function will not be accessible from the outside.

Aaron Russell responded on with…

Thanks for the tip, Jack. I haven’t dug too deeply into Node yet (it’s on my list of things to do), so to get round the closure issue you mention, and to expose objects to my other javascripts, I’ve been attaching them to the window object.

Matt responded on with…

Is it still true that CoffeeScript automatically wraps your code in a closure? I pasted the example code above into CoffeeScript’s parser (the one on their website) and noticed that the resulting JavaScript was not wrapped in a closure. Should we be using “do” (e.g. do ($) -> [your code here]) or just wrapping the code manually (e.g. (($) -> [your code here])(jQuery)???

Aaron Russell responded on with…

@Matt - The JavaScript CoffeeScript compiler (used on the CoffeeScript site) doesn’t automatically wrap everything in an enclosure, but the real command line compiler does (unless you explicitly tell it not to). That’s a little bit confusing I know, but that’s how it is.

Ken Burgett responded on with…

Hi Aaron,

Thanks for the tips on CoffeeScript and JQuery. As a newbie to both, I can use all the examples I can find.

Do you have any examples of CoffeeScript using Ajax with JSON to talk to a rails controller?

Aaron Russell responded on with…

@Ken

I have no specific tips on using Coffeescript with Rails per-se, other than to recommend checking out Backbone.js - Rails, Backbone and Coffeescript play wonderfully with each other :)

Eugene responded on with…

This post was one of the few on the net a while ago, I read it and started digging CS + jQuery. Now I compose a set of tutorials with sample code running on the lesson pages. Check it out!

Comments are closed

Responses for this article have now been disabled. You can still email me directly through the contact form.