Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
Supercharge your skills with expert-authored tech & creative training. Unlimited. Online. Get it now →
May 19, 2011

CoffeeScript in Motion


A snippet of code

jQuery ->
jQuery(function () { 

1. A simple function

Engineering + Creativity

In his book Rise of the Creative Class, Richard Florida defines a list of creative professions that includes graphic designers, sculptors, architects, and…software writers.

It’s hard to think of a better place to see creativity and engineering than in CoffeeScript, a little language that compiles to JavaScript.

CoffeeScript is beautiful. It’s sensibly designed around syntactic indentation. It adds useful features to JavaScript. Most importantly, it’s a very thin layer over JavaScript. For any line of CoffeeScript, one can easily predict the line of JavaScript that the compiler will emit.

CoffeeScript invents some good ideas and steals many others. The number one source I could identify for the most useful ideas in CoffeeScript? Perl.

Yes, Perl. The language that’s guaranteed to produce an audible gasp if mentioned in civilized programming circles today. Yet for ten solid years, Perl was a petri dish of syntactic innovation. Extended regular expressions, destructuring assignment.

Which is why it’s exciting to see syntactic experimentation happening with such vigor in CoffeeScript.

In these video snippets, you’ll see how JavaScript and CoffeeScript compare.

— Geoffrey Grosenbach

Design & Motion Graphics by Paula Lavalle

2. Jasmine’s ‘describe’ function with args

A snippet of code

describe "constructor", ->
describe("constructor", function () {


3. The @ syntax for instance properties

A snippet of code

beforeEach ->
  @dish = new Dish 'Steak $18.99'
beforeEach(function () { = new Dish('Steak $18.99');

“Everybody shows off
And wants to look presentable
But the fact of the matter
Is that accidents are preventable.” — Buck 65

4. An instance method

A snippet of code

add: (dish) ->
  @dishes.push dish
Meal.prototype.add = function(dish) {

5. A full class with constructor

A snippet of code

class Money
  constructor: (rawString) ->
    @cents = @parseCents rawString
Money = (function() {
  function Money(rawString) {
    this.cents = this.parseCents(rawString);
  return Money;

6. Object literal

A snippet of code

toJSON: ->
  title: @title
  price: @price.toString()
function toJSON() {
  return {
    title: this.title,
    price: this.price.toString()


Buy the 75 minute video at PeepCode!

About the Author

is VP of Open Source at Pluralsight. He previously founded PeepCode and is an all around entrepreneur, developer, designer, teacher and athlete. Follow him on Twitter at @topfunky.


Pluralsight subscription


Related Posts