Ultimate Language Shootout IV: CoffeeScript

ChiPyJune 13, 2013

What is CoffeeScript?

It’s basically syntax sugar for JavaScript.

Perhaps some analogies are in order...

If JavaScript is gluten-free haggis pizza

Then CoffeeScript is an enchanted thincrust

handcrafted by Gandalf

If JavaScript is a corrupt, lecherous cop

Then CoffeeScript is Synchronized Swimming

Detective

If JavaScript is Smaug, the evil dragon

Then CoffeeScript is an adorable frog-shaped lighter

If JavaScript is a terrifying hell clown

Then CoffeeScript is Princess Amidala

If JavaScript is a smelly donkey with bad knees

Then CoffeeScript is a robot unicorn

If JavaScript is a grumpy blobfish

Then CoffeeScript is a muppet fish quartet

If JavaScript is a poison mushroom

Then CoffeeScript is the hammer suit

If JavaScript is A Night at the Roxbury

Then CoffeeScript is Anchorman

If JavaScript is a poo-flavored Tootsie Roll

Then CoffeeScript is a bacon chocolate bar

If JavaScript is a lone commando with a crappy gun

Then CoffeeScript is a giant robot made of other robots

I guess I’m trying to say that CoffeeScript might not be a

terrible idea.

CoffeeScript does borrow from some of the best

languages.

The Python and Ruby influences are glaringly obvious.

Let’s walk through a simple CoffeeScript application.

https://github.com/feihong/coffeescript-talk

Multiline comments

###

Implement a shuffle() function that randomly rearranges the elements in a given array. Also demo its usage and effect.

###

Multiline comment notes

• Multiline comments appear as-is in the compiled .js file, using the /* */ comment syntax.

Main function

main = ->

array = (c.toUpperCase() for c in 'abcdefg')

display array

$(document.body).append '<hr>'

for i in [1..6]

shuffle array

display array

Main function notes

• Whitespace delimits blocks

• Define function using -> operator

• Array expression uses parentheses

• Parentheses not required for function invocation

• Ranges specified using [a..b]

• No colon at end of looping statement

Shuffle function

shuffle = (array) ->

i = array.length

j = null

if i == 0

return

while i -= 1

j = Math.floor(Math.random() * (i+1))

[array[i], array[j]] = [array[j], array[i]]

Shuffle function notes

• Parentheses somewhat advised when complex expressions are passed into a function

• No colon at end of conditional statement

• Destructuring assignment requires square brackets

Display functiondisplay = (array) ->

para = $('<p></p>')

$(document.body).append para

for char in array

val = 60 # simplified

style = """

background: rgb(#{val}, #{val}, #{val});

border: 1px solid black;

padding: 5px; margin: 5px;

"""

h = "<span style=\"#{style}\">#{el}</span>"

para.append h

Display function notes

• Multiline string takes indentation into account (resulting string doesn’t contain extra spaces).

• String interpolation requires double-quoted strings

CoffeeScript’s big weakness

Debugging sucks! Errors in the console refer to the generated .js file, not the original .coffee file.

Chrome to the rescue!

• Open Developer Tools

• Click gear icon in lower-right corner

• Check “Enable source maps”

• Compile your .coffee files using the -m option

Compiling CoffeeScript

Running “coffee -c -m main.coffee”

produces main.js and main.map.

So, in conclusion...

CoffeeScript might not be terrible.

The end