CoffeeScript
number = 42
opposite = true
number = -42 if opposite
square = (x) -> x * x
list = [1, 2, 3, 4, 5]
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
race = (winner, runners...) ->
print winner, runners
alert "I knew it!" if elvis?
1. Variable Assignment
outer = 1
changeNumbers = ->
inner = -1
outer = 10
var changeNumbers, inner, outer;
outer = 1;
changeNumbers = function() {
var inner;
inner = -1;
return outer = 10;
};
You never need to write var yourself.
CoffeeScript JavaScript
Slide 15
Slide 15 text
2. Conditional Assignment
value = computeBigNumber()
value ||= computeBigNumber()
var value;
value = computeBigNumber();
value || (value = computeBigNumber())
CoffeeScript JavaScript
Slide 16
Slide 16 text
3. Traditional conditionals
if condition1
doThing1()
else if condition2
doThing2()
else
doThing3()
if(condition1) {
doThing1();
} else if (condition2) {
doThing2();
} else {
doThing3();
}
Remove unnecessary syntax.
CoffeeScript JavaScript
Slide 17
Slide 17 text
4. One line conditionals
congratulate() if winner
showErrors() unless success
if(winner){
congratulate();
}
if(!success){
showErrors();
}
Adding readability.
CoffeeScript JavaScript
Slide 18
Slide 18 text
5. Conditional Operators
foo == bar
foo != bar
foo === bar
foo !== bar
Safety first.
CoffeeScript JavaScript
Slide 19
Slide 19 text
6. Conditional Operators
foo and bar
foo or bar
CoffeeScript JavaScript
foo && bar
foo || bar
Plain english.
Slide 20
Slide 20 text
7. Conditional Operators
action is "clicked"
action isnt "clicked"
CoffeeScript
action === "clicked"
action !== "clicked"
JavaScript
Saying what you mean.
Slide 21
Slide 21 text
8. Conditional Operators
admin is true
admin is false
checked is yes
checked is no
value is on
value is off
admin === true
admin === false
checked === true
checked === false
value === true
value === false
CoffeeScript JavaScript
More ways to say what you mean.
Slide 22
Slide 22 text
9. Conditional Operators, In Array
CoffeeScript
odds = [1, 3, 5, 7, 9, 11]
if 1 in odds
console.log "It’s odd!"
else
console.log "It’s even!"
Checking array membership.
Slide 23
Slide 23 text
10. Conditional Existence
CoffeeScript
car ?= {}
car.speed ?= 75
Checking existence of a variable/property.
CoffeeScript's existential operator ? returns true unless a
variable is null or undefined.
Slide 24
Slide 24 text
11. Conditional Existence cont...
CoffeeScript
car = {}
car.speed = 0
car.speed ||= 75
What about ||= instead of ?=
||= will overwrite a speed of 0 with 75 when it shouldn’t. ?= is safer.
Slide 25
Slide 25 text
12. Arrays
fruits = ["apples", "bananas"]
CoffeeScript JavaScript
Single line or multi-line array definitions.
var fruits;
person = [
"apples",
"bananas"
];
fruits = [
"apples"
"bananas"
]
Slide 26
Slide 26 text
13. Objects
person = name: "Joe", age: 39
CoffeeScript JavaScript
Single line or multi-line object definitions.
var person;
person = {
name: "Joe",
age: 39
};
person =
name: "Joe",
age: 39
Slide 27
Slide 27 text
14. Functions
hello = ->
"Zach"
hello = () ->
"Zach"
hello()
# doesn’t call function
hello
CoffeeScript JavaScript
var hello;
hello = function(){
return "Zach";
};
Parameter-less function definitions.
Slide 28
Slide 28 text
15. Functions
hello = (name) ->
"Hello " + name
hello("Joe")
hello "Joe"
CoffeeScript JavaScript
var hello;
hello = function(name){
return "Hello " + name;
};
Parameter-filled function definitions.
18. String Interpolation
"Hello " + name + "!"
CoffeeScript JavaScript
Double quotes for interpolation.
"Hello #{name}!"
Single quotes for string literals.
'Hello #{name}!' "Hello #{name}"
Slide 33
Slide 33 text
19. Array comprehensions
CoffeeScript
Collecting values over elements.
numbers = [1, 2, 3, 4]
negatives = (-num for num in numbers)
# negatives = [-1, -2, -3, -4]
Slide 34
Slide 34 text
20. Array comprehensions
CoffeeScript
The by modifier.
numbers = [1, 2, 3, 4]
negatives = (-num for num in numbers by 2)
# negatives = [-1, -3]
Slide 35
Slide 35 text
21. Array comprehensions
CoffeeScript
The when modifier.
numbers = [1, 2, 3, 4]
negatives = (-num for num in numbers when num > 2)
# negatives = [-3, -4]
Slide 36
Slide 36 text
22. Object comprehensions
CoffeeScript
Over properties with of.
person = name: "Joe", age: 39
properties = (name for name of person)
# properties = ["name", "age"]
Slide 37
Slide 37 text
23. Object comprehensions
CoffeeScript
Over properties and values with of.
person = name: "Joe", age: 39
properties = ([name, value] for name, value of person)
# properties = [["name", "Joe"], ["age", 39]]
30. De-structuring assignment
CoffeeScript
With objects.
person = name: "Joe", age: 39
{name: myName, age: myAge} = person
# myName = “Joe”
# myAge = 39
Slide 44
Slide 44 text
31. De-structuring assignment
CoffeeScript
Shorthand when variable and property
names are the same.
person = name: "Joe", age: 39
{name: name, age: age} = person
# the above is shorthand for
{name, age} = person
# name = “Joe”
# age = 39
Slide 45
Slide 45 text
32. this
@ is short-hand for this.
$("a").on "click", ->
alert @.attr("href")
# you can omit the dot
$("a").on "click", ->
alert @attr("href")
alert(this.attr("href"))
alert(this.attr("href"))
CoffeeScript JavaScript
@ this
Slide 46
Slide 46 text
33. Classes
class Animal
tim = new Animal "Tim the turtle"
CoffeeScript
Slide 47
Slide 47 text
33b. Classes
class Animal
constructor: (@name) ->
# instance method
move: (meters) ->
alert "#{@name} moved #{meters}m."
tim = new Animal "Tim the turtle"
tim.move 10
CoffeeScript
Slide 48
Slide 48 text
33c. Classes
class Animal
# class method
@all: ->
@animals ?= []
constructor: (@name) ->
Animal.all().push @
# instance method
move: (meters) ->
alert "#{@name} moved #{meters}m."
tim = new Animal "Tim the turtle"
tim.move 10
Animal.all() # [Animal instance]
Animal.animals # [Animal instance]
CoffeeScript
Slide 49
Slide 49 text
xx. Diving Deeper
Classes (super, inheritance, etc)
Namespaces.
Function bindings.
Block regular expressions.
Embedding JavaScript.
Exceptions.
Chained comparisons.
Slide 50
Slide 50 text
3
resources
Slide 51
Slide 51 text
Resources
http://autotelicum.github.com/Smooth-CoffeeScript/
CoffeeScript%20Quick%20Ref.pdf
http://www.coffeescript.org
http://arcturo.github.com/library/coffeescript/
Little Book on Coffee Script
CoffeeScript
Quick Ref Card
http://coffeescript.org/#resources