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