In the last couple of months I took some time to learn and work on a CoffeeScript project. Writing CoffeeScript is a lot of fun, and if you know plain Javascript you already know most of the Coffeescript syntax – just start removing all the syntax cluttering like semicolons, parenthesis and square brackets and suddenly you are writing Coffeescript!
The really cool stuff begins when you dig a bit more into the language. There’s some nice demonstrations of features that I had to learn the hard way.
Before jumping into these, have a look at the well-written, free on-line book Coffeescript Cookbook. This excellent resource saved me a lot of time in many situations.
Update: Table of contents
Comments
You can have single-line and multi-line comments in CoffeeScript. Always keep in mind that during compilation, the compiler will completely ignore the single line comments (they wont appear in your final Javascript file) but will keep the multi-line comments intact. In the Codepen examples below you can click the “view compiled” link to see the generated JS code and the result tab to see the result (if any)…
# Single-line comment
###
Multiline comment
###
See the Pen CoffeeScript gotchas (part 1): Comments by John Tsevdos (@tsevdos) on CodePen.
String Interpolation
Probably the best feature Coffeescript provides! You can finally do things like this:
name = "John"
greeting1 = "Hello, #{name}!" # -> Hello, John!
greeting2 = 'Hello, #{name}!' # -> Hello, #{name}!
document.write greeting1
document.write '
'
document.write greeting2
See the Pen CoffeeScript gotchas (part 1): Strings by John Tsevdos (@tsevdos) on CodePen.
Keep in mind that double quotes are needed to compile correctly. You can even use functions!
mrFunc = (name) -> "Mr. " + name
message = "Hello, #{mrFunc 'John'}"
document.write message
See the Pen CoffeeScript gotchas (part 1): Strings by John Tsevdos (@tsevdos) on CodePen.
Heredoc (multiline strings)
You can also use Heredocs
. They even support interpolation!
multiline = """
This is
a multiline
string
of #{3+2}
lines
"""
document.write multiline
See the Pen CoffeeScript gotchas (part 1): Strings by John Tsevdos (@tsevdos) on CodePen.
Booleans
Not much news here, apart from some syntax goodies… You can use true
with two more keywords, yes
and on
and you can use false
with the opposites, no
and off
. Sometimes it makes more sense to use these keywords instead of the normal true/false
.
# true === yes === on
if true
document.write 'true
'
if yes
document.write 'yes
'
if on
document.write 'on
'
# false === no === off
if !false
document.write 'false
'
if !no
document.write 'no
'
if !off
document.write 'off
'
See the Pen CoffeeScript gotchas (part 1): Booleans by John Tsevdos (@tsevdos) on CodePen.
Arrays
CoffeeScript allows a very convenient syntax to create specific array ranges. You can create any range using the two dots syntax (inclusive range, which simply means that it will include the last value). Adding three dots instead excludes the last value (exclusive range). Finally you can use reverse ranges the same way. Have a look at the examples, they are much easier than they sound…
range1 = [0..10] # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
range2 = [0...10] # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
range20 = [20..0] # [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
See the Pen CoffeeScript gotchas (part 1): Arrays by John Tsevdos (@tsevdos) on CodePen.
Functions default values
One of the coolest and most usable CoffeeScript features is the default values on functions. Instead of checking if a value exists, etc. you can simply apply the default value right next to the parameter.
greeting = (name = "friend") ->
"Hello #{name}"
document.write greeting('John')
document.write '<br />'
document.write greeting()
See the Pen CoffeeScript gotchas (part 1): Functions by John Tsevdos (@tsevdos) on CodePen.
IIFE – Immediately Invoked Function Expressions
Another tricky part when start to learn CoffeeScript is how you write an IIFE. The syntax is a bit tricky, so have a look below (keep in mind that only CoffeeScript 1.3 and above supports default values on IIFE).
do (doc = document, jQuery = $) ->
document.write "IIFE magic"
See the Pen CoffeeScript gotchas (part 1): Functions by John Tsevdos (@tsevdos) on CodePen.
Stay tuned for more CoffeeScript 😉