coffeescript_vs_javascript.md

CoffeeScript: Differences from JavaScript

Semicolons

Don't write them; they'll be inserted automatically.

Functions

Replace function () { ... } with ->.

There's no way to make a named function; they're always represented as anonymous functions assigned to variables, and as such, they don't get hoisted to the top of their scope.

Also, the last statement in a function is implicitly returned.

Example:

# CoffeeScript
foo = -> "bar"

# JavaScript
var foo = function () { return "bar"; };

# CoffeeScript
->
  foo = fizzbuzz()
  fizzbuzz = -> 42
  
# JavaScript
function () {
  var foo = fizzbuzz()
  var fizzbuzz = function () { return 42; };
}

# (and not)
function () {
  var foo = fizzbuzz()
  function fizzbuzz() { return 42; };
}

Variables

Don't prepend variables with var; this happens automatically.

Potential gotcha: If a variable has already been set in a parent scope, then re-setting it in a child scope will change it in the parent scope. There's no way to change this.

Example:

# CoffeeScript
foo = "bar"

# JavaScript
var foo = "bar";

# CoffeeScript
foo = "bar"
boz = -> foo = "baz"
boz()
  
# JavaScript
var foo = "bar";
var boz = function () {
  foo = "baz";
}

boz();  //=> foo is now "baz"

This

Replace this. with @.

Hashes (objects)

When splitting on multiple lines, you don't need the curly braces, or commas after each line.

Example:

# CoffeeScript
person =
  name: "Fred"
  age: 42
  hasGlasses: true
  
# JavaScript
var person = {
  name: "Fred",
  age: 42,
  hasGlasses: true
}

When calling a function that takes a hash, you don't need curly braces.

Example:

# CoffeeScript
foo(one: 1, two: 2)

# JavaScript
foo({ one: 1, two: 2 })

Equality

Replace === with ==.

Structuring/Destructuring

You can extract values out of a hash or array and assign them to individual variables. This works when assigning variables, or even in the argument list of a function.

Example:

myHash = { foo: "bar", baz: "qux" }
{ foo, baz } = myHash
# foo is "bar", baz is "qux"

myFunction = ({ foo, baz }) -> [foo, baz]
myFunction(foo: "bar", baz: "qux")  #=> ["bar", "qux"]

myArray = [1, 2]
[fiz, buz] = myArray
# fiz is 1, buz is 2

You can also go the other direction and build a hash out of existing variables:

flim = "flam"
bim = "bam"
{ flim, flam }  #=> same as saying { flim: flim, flam: flam }

Classes

# CoffeeScript
class MyClass
  someProperty: 42

  constructor: (@someArg) ->
    @foo = "bar"
  
  firstMethod: ->
    @secondMethod()
  
  secondMethod: ->
    @zing = "zang"
    
# JavaScript
function MyClass(someArg) {
  this.someArg = someArg;
  this.foo = "bar";
}

MyClass.prototype.someProperty = 42;

MyClass.prototype.firstMethod = function () {
  this.secondMethod();
}

MyClass.prototype.secondMethod = function () {
  this.zing = "zang";
}