You Don't Know Beans

About CoffeeScript

(This'll Give You A Taste)

Aseem Kishore / June 2013

class Person
    constructor: (@name) ->

    toString: ->
        @name

class Employee extends Person
    constructor: (name, @department) ->
        super name

    toString: ->
        "#{@name} in #{@department}"

alice = new Employee 'Alice Jenkins', 'Engineering'
bob = new Employee 'Bob Spoth', 'Marketing'

console.log "Our employees are #{alice} and #{bob}."

var Employee, Person, alice, bob,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Person = (function() {
  function Person(name) {
    this.name = name;
  }

  Person.prototype.toString = function() {
    return this.name;
  };

  return Person;

})();

Employee = (function(_super) {
  __extends(Employee, _super);

  function Employee(name, department) {
    this.department = department;
    Employee.__super__.constructor.call(this, name);
  }

  Employee.prototype.toString = function() {
    return "" + this.name + " in " + this.department;
  };

  return Employee;

})(Person);

alice = new Employee('Alice Jenkins', 'Engineering');

bob = new Employee('Bob Spoth', 'Marketing');

console.log("Our employees are " + alice + " and " + bob + ".");

Syntax

sum = (a, b) ->
    a + b

x = 5
y = 10

alert sum x, y

var sum, x, y;

sum = function(a, b) {
  return a + b;
};

x = 5;
y = 10;

alert(sum(x, y));

Aside

// Why this?

var sum;

sum = function(a, b) {
  return a + b;
};

// And not this?

function sum(a, b) {
  return a + b;
}

Some of you may have noticed in the compiled JS from the last example that the sum function was named as a variable, rather than declared as a function "expression".

The very first time I saw CoffeeScript, this was the first thing I noticed, and I hated it. I would never write my functions like that. Why does it do that?

Differences

if not found
    lost()

if father instanceof Asian and
   grade isnt 'A'
    disappoint()

if (!found) {
  lost();
}

if (father instanceof Asian && grade !== 'A') {
  disappoint();
}

Differences

switch grade
    when 'A', 'B', 'C'
        pass()
    when 'D'
        warn()
        pass()
    else
        fail()

switch (grade) {
  case 'A':
  case 'B':
  case 'C':
    pass();
    break;
  case 'D':
    warn();
    pass();
    break;
  default:
    fail();
}

Another difference is the switch statement. CoffeeScript uses when and else for keywords instead of case and default, and adds break statements for you automatically.

This also means you can't have partial case fall-throughs, but that's again on purpose, since that's usually a bug and not a best practice.

Differences

if elmt in array
    alert 'found!'

if key of obj
    alert 'found!'

var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

if (__indexOf.call(array, elmt) >= 0) {
  alert('found!');
}

if (key in obj) {
  alert('found!');
}

The last difference is a big one: CoffeeScript's in deals with array elements, not object keys like JavaScript's in.

CoffeeScript provides of for object keys. JavaScript has no simple keyword for array elements, so CoffeeScript compiles to an indexOf() lookup (and polyfills it for IE7-).

Differences

for elmt in array
    console.log elmt

for key, val of obj
    console.log key, val

var elmt, key, val, _i, _len;

for (_i = 0, _len = array.length; _i < _len; _i++) {
  elmt = array[_i];
  console.log(elmt);
}

for (key in obj) {
  val = obj[key];
  console.log(key, val);
}

This translates to loops as well, which is extremely convenient, because looping over an array is so extremely common in JavaScript.

This alone will save you thousands of keystrokes.

At this point, most anti-CoffeeScript-ers will say that ES5 has forEach. No doubt, but let's compare:

array.forEach(function (elmt) {
    // ...
});

vs.

for elmt in array
    # ...

I'll take the latter, personally. =)

Iterate

for elmt, i in array
    console.log i, elmt

for own key, val of obj
    console.log key, val

var elmt, i, key, val, _i, _len,
  __hasProp = {}.hasOwnProperty;

for (i = _i = 0, _len = array.length; _i < _len; i = ++_i) {
  elmt = array[i];
  console.log(i, elmt);
}

for (key in obj) {
  if (!__hasProp.call(obj, key)) continue;
  val = obj[key];
  console.log(key, val);
}

As mentioned, looping with for-in is a big convenience in CoffeeScript. You can also get the array index if you want.

For object key iteration, a widely-known best practice is to filter your object keys with a hasOwnProperty() check, in case the Object prototype has been modified. (You don't usually have to worry about this if you're writing your own application code, but you definitely do if you're writing library code.)

CoffeeScript provides an own keyword that makes doing that really easy, too.

This is a great example of how CoffeeScript's conveniences can also again help you write more robust code. It's not that adding this check is hard; it's that it's tedious. By making these kinds of things easier, CoffeeScript makes it more likely that you'll write better code.

Commas Optional

user =
    name: 'John Smith'
    username: 'john'

    ids:
        facebook: 1234
        twitter: 5678
        google: 9012

    emails: [
        'john@smith.com'
        'jsmith@acme.com'
        'john.smith@gmail.com'
    ]

var user;

user = {
  name: 'John Smith',
  username: 'john',
  ids: {
    facebook: 1234,
    twitter: 5678,
    google: 9012
  },
  emails: ['john@smith.com', 'jsmith@acme.com', 'john.smith@gmail.com']
};

Chain Them 'Rators

if width <= 320
    mobilePortrait()

else if 321 <= width <= 480
    mobileLandscape()

else if 481 <= width <= 768
    tabletPortrait()

else if 769 <= width <= 1024
    tabletLandscape()

else
    desktop()

if (width <= 320) {
  mobilePortrait();
} else if ((321 <= width && width <= 480)) {
  mobileLandscape();
} else if ((481 <= width && width <= 768)) {
  tabletPortrait();
} else if ((769 <= width && width <= 1024)) {
  tabletLandscape();
} else {
  desktop();
}

Where You @

$('a').on 'click', ->
    trackLink @href

$('a').on('click', function() {
  return trackLink(this.href);
});

A big convenience is the @ symbol (called a sigil; comes from Ruby) as a shorthand for this and this property accesses.

You So Fat

$('a').on 'click', (evt) ->
    trackLink @href
    evt.preventDefault()

    # suck it, users:
    setTimeout =>
        window.open @href
    , 1

$('a').on('click', function(evt) {
  var _this = this;

  trackLink(this.href);
  evt.preventDefault();

  return setTimeout(function() {
    return window.open(_this.href);
  }, 1);
});

Another one is the "fat arrow" for binding a function to the current value of this.

JavaScript'ers typically do this either via ES5's bind(), or by self/that/_this variables. CoffeeScript makes it easier.

(It's also smart: it knows when to use one approach vs. the other, e.g. when a closure is readily available vs. when it needs to create one.)

Do (Be Do Be Do)

do ->
    willy = 'nilly'

# alerts 'undefined'
alert typeof willy

(function() {
  var willy;
  return willy = 'nilly';
})();

alert(typeof willy);

Another solid convenience is the do keyword, for invoking a function. When used in conjunction with an arrow sign to define a function, you get the very common IIFE.

Do (Be Do Be Do)

results = {}

for url in urls
    $.get url, (data) ->
        results[url] = data

# oops, closure problem!

var results, url, _i, _len;

results = {};

for (_i = 0, _len = urls.length; _i < _len; _i++) {
  url = urls[_i];
  $.get(url, function(data) {
    return results[url] = data;
  });
}

Do (Be Do Be Do)

results = {}

for url in urls
    do (url) ->
        $.get url, (data) ->
            results[url] = data

var results, url, _fn, _i, _len;

results = {};

_fn = function(url) {
  return $.get(url, function(data) {
    return results[url] = data;
  });
};

for (_i = 0, _len = urls.length; _i < _len; _i++) {
  url = urls[_i];
  _fn(url);
}

The solution to that is to create a closure to "trap" or "remember" the loop variable — and do makes this super easy.

You can pass your loop variable (and anything else) as parameters to the function, and do will pass those same parameters, with their current values, in its call.

Do (Be Do Be Do)

numTimeouts = 0

do (orig=setTimeout) ->
    setTimeout = (func, ms) ->
        numTimeouts++
        orig func, ms

var numTimeouts;

numTimeouts = 0;

(function(orig) {
  var setTimeout;
  return setTimeout = function(func, ms) {
    numTimeouts++;
    return orig(func, ms);
  };
})(setTimeout);

do also comes in handy for wrapping functions, because for any function parameters you declare, you can also specify what value they should get in the call.

Destructure Me, Bro

[x, y] = coords

{count, offset} = opts

var count, offset, x, y;

x = coords[0], y = coords[1];

count = opts.count, offset = opts.offset;

Restructure Me, Bro

res.render 'profile', {
    user
    photos
    csrfToken: req._csrf
}

res.render('profile', {
  user: user,
  photos: photos,
  csrfToken: req._csrf
});

Both Together

lookup = (lat, lng) ->
    # ...
    return [city, state]

for {text, geo} in tweets
    [lat, lng] = geo
    [city] = lookup lat, lng

var city, geo, lat, lng, lookup, text, _i, _len, _ref;

lookup = function(lat, lng) {
  return [city, state];
};

for (_i = 0, _len = tweets.length; _i < _len; _i++) {
  _ref = tweets[_i], text = _ref.text, geo = _ref.geo;
  lat = geo[0], lng = geo[1];
  city = lookup(lat, lng)[0];
}

Existential Crisis

if obj?
    obj.id = getNextId()

if (typeof obj !== "undefined" && obj !== null) {
  obj.id = getNextId();
}

Existential Crisis

setProp = (key, val) ->
    if val?
        _props[key] = val
    else
        delete _props[key]

var setProp;

setProp = function(key, val) {
  if (val != null) {
    return _props[key] = val;
  } else {
    return delete _props[key];
  }
};

Here's a typical example of where you might use the existential operator: managing a data model. E.g. we don't want to save null/undefined values in our key-value store, so we simply delete keys with such values.

And this shows the other way CoffeeScript compiles this: since we're performing this check on a declared variable (a function parameter), it knows it can safely reference the variable directly. (x != null catches undefined, too, but nothing else.)

Existential Crisis

payToll = (numAxes) ->
    numAxes = numAxes ? 2
    return 0.25 * numAxes

payToll()   # 0.50
payToll 0   # 0

var payToll;

payToll = function(numAxes) {
  numAxes = numAxes != null ? numAxes : 2;
  return 0.25 * numAxes;
};

You can use the existential operator as a binary operator, too, like or. That's good for default values where you don't want to override 0, false, or ''.

But watch out — this looks like JavaScript's ternary operator, but isn't. We'll get to ternary expressions in CoffeeScript further on.

Existential Crisis

payToll = (numAxes) ->
    numAxes ?= 2
    return 0.25 * numAxes

payToll()   # 0.50
payToll 0   # 0

var payToll;

payToll = function(numAxes) {
  if (numAxes == null) {
    numAxes = 2;
  }
  return 0.25 * numAxes;
};

And just like how x += 1 is a convenient shorthand for x = x + 1, CoffeeScript lets you write x ?= 1 as a convenient shorthand for x = x ? 1.

(This in fact works for and and or in CoffeeScript, too, which is killer. You'll find yourself writing and= and or= pretty frequently.)

When In Greece

payToll = (numAxes=2) ->
    return 0.25 * numAxes

payToll()   # 0.50
payToll 0   # 0

var payToll;

payToll = function(numAxes) {
  if (numAxes == null) {
    numAxes = 2;
  }
  return 0.25 * numAxes;
};

When In Greece

fetch = (opts={}) ->
    {count, offset} = opts
    count or= 10
    offset or= 0

    # ...

var fetch;

fetch = function(opts) {
  var count, offset;
  if (opts == null) {
    opts = {};
  }
  count = opts.count, offset = opts.offset;
  count || (count = 10);
  offset || (offset = 0);

  // ...
};

Dry Things Up...

if console? and console.log?
    console.log 'enabled'

if ((typeof console !== "undefined" && console !== null) && (console.log != null)) {
  console.log('enabled');
}

Like A Sponge

console?.log? 'enabled'

if (typeof console !== "undefined" && console !== null) {
  if (typeof console.log === "function") {
    console.log('enabled');
  }
}

Like A Sponge

sync = (callback) ->
    # ...
    callback? results

var sync;

sync = function(callback) {
  return typeof callback === "function" ? callback(results) : void 0;
};

Like A Sponge

items?[0]

if (typeof items !== "undefined" && items !== null) {
  items[0];
}

Interpol Action

"#{name} is #{age} years old."

"" + name + " is " + age + " years old."

Interpol Action

"/api/#{users[0].id}/info"

"/api/" + users[0].id + "/info"

Line 'Em Up

$(user).html """
  <a href="#{user.url}">
    <img alt="#{user.name}"
      src="#{user.avatar}">
  </a>
"""

$(user).html("<a href=\"" + user.url + "\">\n    <img alt=\"" + user.name + "\"\n        src=\"" + user.avatar + "\">\n</a>");

CoffeeScript also supports multi-line, indentation-aware, "heredoc" strings. This is extremely convenient for things like HTML, detailed error logs, usage instructions, and more. No more [...].join('\n') or similar.

Like normal strings, double quotes enables interpolation while single quotes don't. Unlike normal strings, you can also leave (up to two consecutive) quote characters unescaped within heredoc strings.

Irregular Expressions

url.match ///
    # absolute; SSL optional:
    https?://

    # simplified domain:
    [a-zA-Z0-9-.]+

    # simplified path:
    /.*
///

url.match(/https?:\/\/[a-zA-Z0-9-.]+\/.*/);

The Ternary Point

view =
    if loggedIn
        'home'
    else
        'landing'

var view;

view = loggedIn ? 'home' : 'landing';

So for example, if (and else) statements are usable as expressions — and this is how you get the equivalent of JavaScript's ternary operator.

The Ternary Point

view = (if loggedIn then 'home' else 'landing')

var view;

view = loggedIn ? 'home' : 'landing';

You can write if statements on one line, by the way, by using the then keyword.

(You don't need the parentheses here; I sometimes put them for clarity, to differentiate from CoffeeScript's postfix form.)

The 'Ol Switcharoo

func = switch req.method
    when 'GET'
        'show'
    when 'POST', 'PATCH'
        'update'
    when 'PUT'
        'replace'
    when 'DELETE'
        'destroy'
    else
        'handle'

var func;

func = (function() {
  switch (req.method) {
    case 'GET':
      return 'show';
    case 'POST':
    case 'PATCH':
      return 'update';
    case 'PUT':
      return 'replace';
    case 'DELETE':
      return 'destroy';
    default:
      return 'handle';
  }
})();

But that wasn't anything new. A better example is the switch statement. This is how you might do some RESTful routing, for example.

Notice how since JavaScript doesn't offer this expressiveness in the language directly, CoffeeScript achieves it by using an IIFE. CoffeeScript is also smart here: if you reference this or arguments in the body, it'll maintain those things in the IIFE via call or apply, respectively.

Try It Out

result =
    try
        readFromCache()
    catch
        generate()

var result;

result = (function() {
  try {
    return readFromCache();
  } catch (_error) {
    return generate();
  }
})();

But my favorite example is try/catch. Often, you want your code to be robust to certain kinds of failures, but you still need some value to proceed either way. Using a try-catch as an expression lets you express that clearly.

Try It Out

result = try
    readFromCache()

result or= generate()

var result;

result = (function() {
  try {
    return readFromCache();
  } catch (_error) {}
})();

result || (result = generate());

And it gets better — you can use try as an expression by itself, without catch.

I often combine that with a default value for safety, in this case to achieve robustness to a falsy value getting into the cache.

Map It Out

names =
    for user in users
        user.name

var names, user;

names = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = users.length; _i < _len; _i++) {
    user = users[_i];
    _results.push(user.name);
  }
  return _results;
})();

Instagram It

names =
  for u in users when u.isAdmin
    u.name

var names, u;

names = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = users.length; _i < _len; _i++) {
    u = users[_i];
    if (u.isAdmin) {
      _results.push(u.name);
    }
  }
  return _results;
})();

And if you add a when clause, you get a filter equivalent built-in, too.

Comprehend Me?

names = (
  user.name for user in users
)

var names, user;

names = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = users.length; _i < _len; _i++) {
    user = users[_i];
    _results.push(user.name);
  }
  return _results;
})();

Watch the Order

names = u.name for u in users

# equivalent to:

for u in users
    names = u.name

var names, u, _i, _len;

for (_i = 0, _len = users.length; _i < _len; _i++) {
  u = users[_i];
  names = u.name;
}

Reverse Maps

map = {}
map[u.id] = u for u in users

var map, u, _i, _len;

map = {};

for (_i = 0, _len = users.length; _i < _len; _i++) {
  u = users[_i];
  map[u.id] = u;
}

Prototypical

function Person(name) {
    this.name = name;
}

Person.prototype.toString = function () {
    return this.name;
};

A Little Classier

class Person

    constructor: (@name) ->

    toString: ->
        @name

var Person;

Person = (function() {
  function Person(name) {
    this.name = name;
  }

  Person.prototype.toString = function() {
    return this.name;
  };

  return Person;

})();

CoffeeScript has a class keyword that lets you do that with a little less code, but ultimately it's the same thing.

You write the class's constructor function and instance methods in object syntax inside the class body, and it maps those to the constructor function's prototype.

(Notice the shorthand for assigning instance properties with the same name as the constructor function's parameters, by prefixing them with @ in the signature. Yet another feature in CoffeeScript to DRY your code.)

The compiled JS uses an IIFE with the constructor function defined as a function expression inside the IIFE; this harks back to the cross-browser robustness we saw near the beginning.

(It also keeps CoffeeScript purely top-down; there is no function hoisting in the outer scope even for these constructor functions. You never have to worry in CoffeeScript that there may be things defined at the bottom of the file when you're at the top.)

Prototypical

function Person(name) {
    this.name = name;
}

Person.prototype.toString = function () {
    return this.name;
};

function Employee(name, dept) {
    Person.call(this, name);
    this.dept = dept;
}

Employee.prototype = new Person();

Employee.prototype.toString = function () {
    return Person.prototype.toString.call(this) +
        ' (' + this.dept + ')';
};

A Little Classier

class Person

  constructor: (@name) ->

  toString: ->
    @name

class Employee extends Person

  constructor: (name, @dept) ->
    super name

  toString: ->
    "#{super} (#{@dept})"

var Employee, Person,
  __hasProp = {}.hasOwnProperty,
  __extends = // ...

Person = (function() {
  function Person(name) {
    this.name = name;
  }

  Person.prototype.toString = function() {
    return this.name;
  };

  return Person;

})();

Employee = (function(_super) {
  __extends(Employee, _super);

  function Employee(name, dept) {
    this.dept = dept;
    Employee.__super__.constructor.call(this, name);
  }

  Employee.prototype.toString = function() {
    return "" + Employee.__super__.toString.apply(this, arguments) + " (" + this.dept + ")";
  };

  return Employee;

})(Person);

CoffeeScript has extends and super keywords which take care of all of that. You only have to write the superclass name once, and from there on you can reference it via super.

And it's smart: if you reference it as a call inside a subclass function, it maps to the corresponding superclass function. And if you don't specify any arguments explicitly, it'll pass the subclass function's arguments.

Compare how much simpler and clearer the overridden toString method is here vs. the last slide.

But the real benefit is robustness. CoffeeScript does the extending via that __extends helper function that I've omitted for conciseness.

Extend Yourself

var __extends = function(child, parent) {

    for (var key in parent) {
        if (__hasProp.call(parent, key))
            child[key] = parent[key];
    }

    function ctor() {
        this.constructor = child;
    }

    ctor.prototype = parent.prototype;
    child.prototype = new ctor();
    child.__super__ = parent.prototype;

    return child;

};

Statics & Dynamics

class Model
  @TYPE: null
  constructor: (@elmt) ->
    @type = @constructor.TYPE

class User extends Model
  @TYPE: 'user'

class Photo extends Model
  @TYPE: 'photo'

var // ...

Model = (function() {
  Model.TYPE = null;

  function Model(elmt) {
    this.elmt = elmt;
    this.type = this.constructor.TYPE;
  }

  return Model;

})();

User = (function(_super) {
  __extends(User, _super);

  function User() {
    _ref = User.__super__.constructor.apply(this, arguments);
    return _ref;
  }

  User.TYPE = 'user';

  return User;

})(Model);

Photo = // ...

Take this example, where we have a Model base class, and two User and Photo subclasses.

We can use the constructor property in the superclass to reference an instance's subclass constructor, which means our superclass constructor and instance methods can access subclasses' runtime static properties.

So here, if we want all of our models to have a type instance property, we only need to set that propery in the superclass constructor, referencing the runtime subclass's static TYPE property.

Statics & Dynamics

class Model
  @TYPE: null
  constructor: (@elmt) ->
    @type = @constructor.TYPE

  @all: ->
    if @TYPE
      db.lookup 'type', @TYPE
    else
      db.all()

class User extends Model
  @TYPE: 'user'

class Photo extends Model
  @TYPE: 'photo'

var // ...

Model = (function() {
  Model.TYPE = null;

  function Model(elmt) {
    this.elmt = elmt;
    this.type = this.constructor.TYPE;
  }

  Model.all = function() {
    if (this.TYPE) {
      return db.lookup('type', this.TYPE);
    } else {
      return db.all();
    }
  };

  return Model;

})();

User = // ...

Photo = // ...

A more powerful example is implementing static superclass functions that use static subclass properties, like this static lookup function.

Because CoffeeScript copies static properties and methods, both subclasses also get this static lookup function. And so you can call it from any class, and it'll know which type of object you want.

Model.all()  # fetch all models
User.all()   # fetch all users
Photo.all()  # fetch all photos

No need to duplicate those methods, or have boilerplate method overrides that pass a parameter.

Techniques like this are very useful in MVC setups. Our own ORM layer, in fact, has almost this exact code.

Executive Branch

class Model
  @_attrs: null
  @_attr: (name, type) ->
    @_attrs or= {}
    @_attrs[name] = type
    @::[name] = null

class User extends Model
  @_attr 'name', String
  @_attr 'age', Number

class Photo extends Model
  @_attr 'caption', String

var // ...

Model = (function() {
  function Model() {}

  Model._attrs = null;

  Model._attr = function(name, type) {
    this._attrs || (this._attrs = {});
    this._attrs[name] = type;
    return this.prototype[name] = null;
  };

  return Model;

})();

User = (function(_super) {
  __extends(User, _super);

  function User() {
    _ref = User.__super__.constructor.apply(this, arguments);
    return _ref;
  }

  User._attr('name', String);

  User._attr('age', Number);

  return User;

})(Model);

Photo = // ...

I didn't explicitly call it out, but you probably noticed that defining static properties and methods in CoffeeScript classes is achieved by prefixing the property and method names with @.

That's indeed because inside a class body, CoffeeScript assigns this to the constructor function, so @foo means Person.foo inside the Person class body.

But it gets better: CoffeeScript lets you write and run arbitrary code inside class bodies, so you can take advantage of @ being the constructor function to do some pretty neat stuff.

Here's another example taken from our ORM layer: a powerful and DRY object attribute system. This code lets us declaratively define our subclasses' object attributes, by calling (copied) static functions in our subclasses' class bodies.

(:: is a CoffeeScript shorthand operator for .prototype, like @ is for this.)

This is a simplified example; our own _attr function lets subclasses specify indexing and validation rules, register custom getters and setters, and more.

Executive Branch

class Person

  get = (props) =>
    @::__defineGetter__ name, func for name, func of props

  set = (props) =>
    @::__defineSetter__ name, func for name, func of props

  get age: -> (Date.now() - @birthdate) / MILLIS_PER_YEAR

  get birthdate: -> @_birthdate

  set birthdate: (val) ->
    throw new Error 'Birthdates are immutable.'

...

But I want to wrap up with a really powerful example, and my favorite.

CoffeeScript doesn't have native getters and setters, because (for better or worse) CoffeeScript strives to support IE8, IE7, and even IE6, none of which have (full) getter/setter support.

But that doesn't have to stop you. By taking advantage of executable class bodies, you can define helper get and set functions that look and feel just like native keywords.

(This example uses __defineGetter__ and __defineSetter__ for simplicity, but you can achieve the same thing with ES5's Object.defineProperty.)

Be sure to view the full code for a real-world example: a mutable URL class for Node.js that keeps state consistent.

I love this example because it shows CoffeeScript's greatest power: being able to extend the language itself in significant ways. It's almost reminiscent of Lisp macros...

Thanks!

Twitter: @aseemk

GitHub: @aseemk

Email: aseem.kishore@gmail.com

Questions?

So thanks for reading! Reach out if you have any questions or comments.

Thanks also to my excellent colleagues Dave Stern, G. Scott Olson, and Tara Feener for sitting through an early, unpolished draft of this and giving me some great feedback (including the title).

While I'm thanking people, thanks also to my friend and Thingdom co-founder Daniel Gasienica for ~~making~~ forcing me to try CoffeeScript in the first place. Similarly, thanks to all the people behind CoffeeScript for producing this awesome language in the first place!

Finally, thanks to Hakim El Hattab for the excellent platform on which this presentation was created. (If you want to see how I created this slides+notes combo viewer, don't hesitate to view source!)

I hope this presentation helped, and I look forward to seeing all the great things you build, too!

Cheers,
Aseem

P.S. Comments/questions/feedback welcome here: Intro to CoffeeScript.

You Don't Know Beans

About CoffeeScript

(This'll Give You A Taste)

Aseem Kishore / June 2013

CoffeeScript is...

CoffeeScript is...

Why

Why Not

Mythbusters

Syntax

Syntax

Aside

Aside

Differences

Differences

Differences

Differences

Let's talk...

Conveniences

Iterate

Commas Optional

Chain Them 'Rators

Where You @

You So Fat

Do (Be Do Be Do)

Do (Be Do Be Do)

Do (Be Do Be Do)

Do (Be Do Be Do)

Destructure Me, Bro

Restructure Me, Bro

Both Together

Existential Crisis

Existential Crisis

Existential Crisis

Existential Crisis

When In Greece

When In Greece

Dry Things Up...

Like A Sponge

Like A Sponge

Like A Sponge

Interpol Action

Interpol Action

Line 'Em Up

Irregular Expressions

More...

Power...

The Ternary Point

The Ternary Point

The 'Ol Switcharoo

Try It Out

Try It Out

Map It Out

Instagram It

Comprehend Me?

Watch the Order

Reverse Maps

Ready For More?

Time To Get

Classy

Prototypical

A Little Classier

Prototypical

A Little Classier

Extend Yourself

Statics & Dynamics

Statics & Dynamics

Executive Branch

Executive Branch

Thanks!

Twitter: @aseemk

GitHub: @aseemk

Email: aseem.kishore@gmail.com