What is CoffeeScript?

“A better way of writing JavaScript”

Alt.JS

Like TypeScript

Not like ClojureScript, Roy, etc

It's a transpiler!

So what does it look like‽

I'll get to that...

Common pattern:

                        $(function () {
    $(".link").click(function () {
        console.log("You clicked a link: " + this.href);
    });
});

In CoffeeScript

$(function () {
    $(".link").click(function () {
        console.log("You clicked a link: " + this.href);
    });
});

would be written as..

$ ->
    $(".link").click ->
        console.log "You clicked a link: #{@href}"

Function declaration

CoffeeScript output

iffy: Immediately-Invoked Function Expression (IIFE)

CoffeeScript Constructs

Variable, Object and Array Definitions

Variables

Variables: Warning!

Arrays

Objects

Conditionals

if

if

if: assignment

unless

console.log "x is NOT 2" if x != 2

unless

unless

NOT good practice!

Aliases

Aliases

Loops and Comprehensions

Array Comprehensions

result = (expression for object in array)

result = (expression for object in array when condition)

Array Comprehensions

Array Comprehensions: Filter

Object Comprehensions

result = (expression for key of object)

result = (expression for own key, value of object)

Object Comprehensions

Comprehensions: Complex Expressions

Comprehensions: Complex Expressions

Ranges

Ranges

Ranges

Ranges: Splicing

Ranges: Splice assignment

Classes

Classes: Inheritance

Miscellany

Syntax stuff that didn't fit in the other categories!

this

this: Fat Arrow

Splats

Destructuring Assignment

Destructuring Assignment and Splats

Using CoffeeScript

Installing CoffeeScript

npm install -g coffee-script

Running CoffeeScript

coffee # REPL

coffee file.coffee # run script

coffee -c file.coffee # compile

coffee -wc file.coffee # watch & compile

coffee -cm file.coffee # sourcemap

coffee -wmc *.coffee # ALL THE THINGS!

coffee-script.js

<script type="text/coffeescript">window.alert "Hello World!"</script>

var compiled = CoffeeScript.compile(source);

Using CoffeeScript with ColdFusion

• Pre-compile: coffee, GruntJS
• CFStatic (Demo)