CoffeeScript 101
or: How I Learned to Stop Worrying
and Love the Sugar
Slide 2
Slide 2 text
Me
• I write full stack
javascript
• I work at Fractal
• I like to code
• I love open source
• @eschoff
• github.com/Contra
Slide 3
Slide 3 text
What
• CoffeeScript is an attempt to expose the good
parts of javascript in a simple way
• “It’s just javascript”
Slide 4
Slide 4 text
Javascript
• Global variables and scoping nightmares
• Optional semicolon
• Typeof is awkward (null == object?)
• ==,===,=!
• “Lisp in C’s Clothing” – Crockford
• Clunky syntax for common operations
Slide 5
Slide 5 text
CoffeeScript
• Private variables by default
• Scoping handled automagically
• No such thing as ==
• Compiled code is super fast
• Compiled code passes JSLint
• Shorthand syntax for common operations
• The code compiles one-to-one with it’s
javascript equivalent (unlike others)
Slide 6
Slide 6 text
What you’ll learn
• Syntax
• Expressions
• List comprehensions
• Functions
• Conditionals
• Splats
• Destructuring
Slide 7
Slide 7 text
What you won’t learn
• Classes
• Inheritance
• Scope binding
Slide 8
Slide 8 text
Follow along
• Go to repl.it and select coffee-script
• Run the examples as we go over them
Slide 9
Slide 9 text
Syntax
• Whitespace sensitive (tabs not braces)
• Parenthesis optional
• Commas/braces optional for objects
• Conditional operators
• var does not exist
• Semicolons do not exist
Slide 10
Slide 10 text
Hello World
console.log "Hello world!"
• No parenthesis
• No semicolons
Slide 11
Slide 11 text
Operators
• “is” is the equivalent of “===“
• “isnt” is the equivalent of “!==“
• “and” is the equivalent of “&&”
• “unless” is the equivalent of “if (!)”
Slide 12
Slide 12 text
Variables
a = "test"
• It’s that easy.
• No need to worry about scoping
Slide 13
Slide 13 text
String Interpolation
a = "world"
b = "Hello #{a}"
• Any expression can be within a string interpolation
Slide 14
Slide 14 text
Objects
a =
key: "value"
other: "value"
more:
values: ["values"]
• Spacing spacing spacing
• So fresh and so clean
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Existential Operator
b = "i exist!"
if a?
doWork a
else
doWork b
• ? Checks for null and undefined
Slide 17
Slide 17 text
Existential Assignment
b = 1
b ?= 2
• b = 1
Slide 18
Slide 18 text
Functions
sayHello = (who) ->
console.log "Hello #{who}!"
sayHello "Desert code camp"
• -> is the equivalent of function(){
• No braces – indentation is key
• No parenthesis needed when you call a function with
arguments
Slide 19
Slide 19 text
Default variables
sayHello = (who="world") ->
console.log "Hello #{who}!"
sayHello()
• Default arguments can be anything
Slide 20
Slide 20 text
Destructuring Objects
options =
isCool: true
{isCool} = options
• {isCool} = options
is the equivalent of
isCool = options.isCool
Slide 21
Slide 21 text
Destructuring Arrays
people = ["bob","jill","tom"]
[first, second] = people
• first = “bob”
• second = “jill”
Slide 22
Slide 22 text
Splats
• Simple way to glob up the rest
• Can be used with destructuring, function
arguments, and for calling functions
• …
Slide 23
Slide 23 text
Destructuring Arrays + Splats
people = ["bob","jill","tom","jim"]
[first, second, rest...] = people
• first = “bob”
• second = “jill”
• rest = [“tom”,”jim”]
Slide 24
Slide 24 text
Ranges
• num is now an array of 0-100
num = [0...100]
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Loops
sayHello = (who) ->
for person in who
console.log "Hello #{person}!"
sayHello ["Phoenix", "Haters"]
• Compiled loops are more efficient than loops by hand
Slide 27
Slide 27 text
Conditional Loops
sayHello = (who) ->
for person in who when person is "Phoenix"
console.log "Hello #{person}!"
sayHello ["Phoenix", "Haters"]
• Compiled loops are more efficient than loops by hand
Slide 28
Slide 28 text
SUGAR OVERLOAD
Slide 29
Slide 29 text
Equivalent
var sayHello = function(who) {
for (var i = 0; i < who.length; i++) {
if (who[i] === "Phoenix") {
console.log("Hello " + who[i] + "!");
}
}
};
sayHello(["Phoenix", "Haters"]);
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
List Comprehensions
people = [
name: "Tom"
cool: true
,
name: "Bob"
cool: false
,
name: "Jim"
cool: true
]
cool = (p for p in people when p.cool is true)
• Wrapping a loop in parenthesis turns it into a list
comprehension
• cool = [tom, bob]
Slide 32
Slide 32 text
List Comprehensions + Select
people = [
name: "Tom"
cool: true
,
name: "Bob"
cool: false
,
name: "Jim"
cool: true
]
cool = (p.name for p in people when p.cool is true)
• cool = [“Tom”, “Bob”]
Slide 33
Slide 33 text
forEach
• cool = [“Tom”, “Bob”]
people = ["Tom", "Jim", "Bob"]
slap = (name) ->
console.log "#{name} got slapped"
slap idiot for idiot in people
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Questions?
Slide 36
Slide 36 text
Sandbox
Slide 37
Slide 37 text
End
• Follow me on Twitter @eschoff @wearefractal
• For more see http://coffeescriptbook.org/