Why CoffeeScript?

Status: readable.

Some of the reasons I prefer CoffeeScript over Javascript.

Why bother?

To learn CoffeeScript, you need to know Javascript. But once you know Javascript, why should you bother learning CoffeeScript?

If you are using any other preprocessor for CSS or HTML, then you should consider CoffeeScript for the same reasons you considered them.

Less characters, less clutter

No more blocks of closing braces/brackets!

Arrays and objects

Only add commas and braces if you want to.

my_arr = [

my_obj =
    a: 1
        c: 2
    d: 3

Enlightened existential expressions

if my_obj?
    alert 'It exists!'


alert 'It exists!' if my_obj?

Instead of

if (typeof my_obj !== "undefined" && my_obj !== null) {
    alert("It exists!");

Slicing arrays

middle = numbers[1..-2]
another_middle = numbers[1...-1]
same = middle is another_middle

Three dots makes the end point exlusive.

ES6 already

The syntax is different to ES6, but functionality is the same.

Arrow functions

Simpler function definitions makes for nicer callback code.

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


Prefixing arguments with @ sets them as an instance value. Same as Person(name) {this.name = name;}.

class Person
    constructor: (@name, @pos)->

class Player extends Person
    move: (by)->
        @pos.x += by.x
        @pos.y += by.y

me = new Player "Matt",
    x: 0
    y: 0


Use yield without needing function*! This needs to be run in an ES6 interpreter.

ps = ->
    num = 0
        num += 1
        yield num * num

Multi-line and template strings

name = "world"

message = "Hello #{name},
How are you?"

html = """
<p class="alert">#{message}</p>

No need to switch to backticks! But they must be double quotes instead of single.

Fancier functions

Not having to write function everywhere makes code simpler.

$ '#my_element'
.on 'click', (e)->

Chaining function calls

Starting a line with a dot will close the call from the previous line.

$ '#my_element'
.css 'color', red

But CoffeeScript accepts Javascript syntax too, if you prefer that.

$('#my_element').css('color', red).show()

Embedding function calls

nine = square add 1, 2


var nine = square(add(1, 2));

Default values

add = (start, amount=1)->
    start + amount

Free returns

Functions will return the value of the last expression, even if it is wrapped in flow control statements.

is_it_even = (number)->
    if number % 2

alert is_it_even 3

Returning an object is simpler too.

new_player = (name)->
    health: 255
    money: 10
    name: name

Objects for arguments

Passing objects as arguments works the same as assignment.

$ '#my_element'
    a: 1
    b: 2

You need a comma if there are arguments before the object.

me = new_bot 'Matt',
    health: 12
    money: 3

Multiple objects can be passed, as long as there is a comma between them.

my_object = my_object_combiner
    a: 1
    b: 2
    c: 3
    d: 4

Variable arguments

blah = (many_blahs...)->
    alert one_blah for one_blah in many_blahs



These create arrays with values from the loops.

doubles = (num * 2 for num in [1..10])

countdown = (num for num in [10..1])

Call function on each item

foods = ['broccoli', 'spinach', 'chocolate']
eat food for food in foods when food isnt 'chocolate'

Object looping

scores =
    anna: 12
    bill: 6
    charlie: 23

messages = for name, score of scores
    "#{name} got #{score}"

While loops

if studying_economics
    buy() while supply > demand
    sell() until supply > demand

Words over symbols

Nicer to read and avoids annoying JS errors.

You can still use all the symbols if you like. Although == is changed to ===.

Cool people like it

It remains in the top 10 most depended-upon packages on NPM.