CoffeeScript a Go Go

Last October, I got to speak to some women getting into development at Rails Girls in Helsinki, Finland.

I tried to introduce the basics of CoffeeScript (and thusly JavaScript) the only way I knew how - through ’80s dance music.

Here are some of the demos that everyone worked on as they wrote their first CoffeeScript!

Simple data storage (Variables, Strings, Numbers)

1
2
3
4
5
6
7
8
9
10
// String assignment
theSingle = "Video Killed the Radio Star"
theBand = "The Buggles"

// Numbers
mtvMusicVideoDebut = 1981
billboardPosition = 40

// String Interpolation
alert  "//{ theSingle } by //{ theBand }"

Functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Anonymous function
->
  alert "I love rock-n-roll"

// Named Function
singIt = () ->
  alert "I love rock-n-roll!"

// Calling a function
singIt()

// Passing a variable
singSomethingElse = (lyrics) ->
  alert lyrics

singSomethingElse "Don't go wasting your emotion"
singSomethingElse "Lay all your love on me"

// Passing many variables
manyLines = (chorusLineOne, chorusLineTwo) ->
  alert chorusLineOne
  alert chorusLineTwo
  singIt()

chorusLineOne = "Don't go wasting your emotion"
chorusLineTwo = "Lay all your love on me"

manyLines(chorusLineOne,chorusLineTwo)

Objects and Comprehensions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Key : Value pairs
quiteMoody =
  monday: "feel blue"
  tuesday: "feel gray"
  wednesday: "feel gray again"
  thursday: "do not care about you"
  friday: "am in love"

// Accessing individual values
alert quiteMoody.tuesday

// Go over the object with for i, j of
feelings = for day, mood of quiteMoody
  "On //{day} I //{mood}"

// Returning the value of the comprension
alert feelings.join(", ")

Arrays and Comprehensions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Array brackets
tracks = [
  "One More Chance"
  "What Have I Done to Deserve This?"
  "Shopping"
  "Rent"
  "Hit Music"
  "It Couldn't Happen Here"
  "It's a Sin"
  "I Want to Wake Up"
  "Heart"
  "King's Cross"
]

// Array comprehension returns another array
shortTrackNames = (trackName for trackName in tracks when name.length 10 )

alert shortTrackNames.join(", ")

Conditions

1
2
3
4
5
6
7
8
9
10
11
12
// if, is, else...
firstRequest = (album) ->
  if album is "London Calling"
    "The Guns of Brixton"
  else if album is "Talk Talk Talk"
    "Pretty in Pink"
  else if album is "The Circus"
    "Sometimes"
  else
    "put your iPod on shuffle"

alert firstRequest("The Circus")

More Conditions

1
2
3
4
5
// yes, no, true, false
youNeedAFriend = yes
lookToAStranger = no
if youNeedAFriend is true and lookToAStranger is false
  alert "I will be there"

Pattern Matching

1
2
3
4
5
6
7
8
9
10
11
12
// It looks like an array, but it's not! 
// The left side is definine a pattern of variable to match with the values on the right side.

[firstName, middle, last] = ["Steven", "Patrick", "Morrissey"]
alert firstName + " " + middle + " " + last

// Referencing the same variable on either side
bassistShoes = "Chucks"
drummerShoes = "Vans"
[bassistShoes, drummerShoes] = [drummerShoes, bassistShoes]
alert "The drummer is wearing //{ drummerShoes }."
alert "The bassist is wearing //{ bassistShoes }."