CoffeeScript - koenbok/Framer GitHub Wiki

Learn CoffeeScript

This should help you to learn the basics in an afternoon. Or use it as a cheat sheet.

CoffeeScript is worth learning because:

  • It has a cleaner and more readable syntax, so it's easier to learn
  • It helps you avoid the bad parts of Javascript
  • It helps you work quicker with smart shortcuts

Printing Output

Whenever you want to display a value to inspect you can print it to the log like

console.log "Hello" # Output: Hello
console.log "Hello", "World" # Output: Hello World

Tabs

CoffeeScript uses "significant whitespace". This means tabs are used to define the structure of the language, instead of { and } like in Javascript. So if your tabs are not correct, your script will fail.

if 1 + 1 == 2
  console.log "hello" # This will work

if 1 + 1 == 2
console.log "hello" # This will fail (missing tab)

Comments

Comments are text that is not treated as code. Write comments explaining what happens in code when the code's purpose and/or actions are not self evident. Comments are prefixed with #.

# I am a comment
5 + 6 # I am a comment too

Variables

A variable stores and associates a value with a name. It's pretty simple:

myVariable = 1

From this point on myVariable contains 1. You can change this at any point just by assigning a different value to myVariable. This ability to vary a variable is why they're known as variables.

If you ask the value of a variable before it has a value (prior to being defined) it returns a special value 'undefined'. If you get an error with undefined there is a big chance you are trying to use a variable that doesn't exist (yet).

myUnexistingVariable # Returns 'undefined'

Variables can store different types of data, see below.

Data types

This is a boolean. A boolean can only have two values: false or true.

myBoolA = true
myBoolB = false

This is a number. Numbers can be small, big, rounded, positive or negative.

myNumberA = 1
myNumberB = 55.0
myNumberC = -223894

You can calculate with numbers like this (operators)

myNumberA + myNumberB # Output: 56.0
myNumberA / myNumberB # Divide
myNumberA * myNumberB # Product
myNumberA ** myNumberB # Power

This is a string. A string is a set of characters like words or complete sentences.

myStringA = "Hello there"

You can combine strings like this:

myStringB = "#{myStringA}, I am the dude" # Output: "Hello there, I am the dude"

But strings can also hold complex values you cannot describe in pure numbers

myStringC = "rgba(255,0,0,0.1)"
myStringD = "1px solid #FFFFFF"

This is an array. Arrays contain an ordered set of values. The values can be any type. They can even be nested (arrays within arrays).

myListA = [1, 2, 3, 4, 5] # Just numbers
myListB = [1, "test", 22, [1, 2, 3]] # Mixed

You can access any item in an array via it's number (it's called an index position), these start at 0

myListA[0] # Output: 1
myListA[4] # Output: 5

You can also count the items in an array

myListB.length # Output: 4

Or grab a range from the array

myListB[0..2] # Output: [1, 2, 3]

This is an object. Objects are a bit like lists, but instead of by number, you can access them by a string (word). Much like a dictionary from a phone book (look up a person by last name). We call the 'lookup string' a key.

myObjectA = {name:"Framer", age:12}

You can also write objects like this, it's the exact same thing as above:

myObjectB =
	name: "Framer"
	age: 12

To find a value in an object you use the key

myObjectB["name"] # Output: "Framer"

If you use a key that does not exist, you get the special undefined value

myObjectB["skdjslkdj"] # Output: undefined

Once you have made an object, you can add more stuff in it like this:

myObjectB["platform"] = "Mac"

Or remove something like this:

delete myObjectB["platform"]
myObjectB["platform"] # Output: undefined

Functions

Functions are bits of executable code. It's pretty much the same thing as a function in mathematics. They take input and generate output and/or modify the contents of variables. The part in between is just a description how to get from one to the other. When you 'run' a function for a specific set of inputs, programmers say you 'call' the function, and the input(s) given to the function to operate on are known as 'arguments'.

Some examples of what you use functions for are:

  • Describe the doing of something, for use later (when it gets called)
  • Wrap something you do multiple times in a function so you can re-use it easily

This is how you define a function (note it follows the standard way of defining variables)

myFunction = (input) ->
	output = input * 2
	return output

To now use (call) the function with the number 42 (argument) you do this:

myFunction(42) # Output: 84

You can assign the output of a function directly to a new variable

myCalculatedNumber = myFunction(42)
myCalculatedNumber # Output: 84

Comparators

Comparators compare things. The most common are equality and greater/smaller than.

4 is 4 # Output: true
4 isnt 4 # Output: false
4 < 5 # Output true
4 > 5 # Output false

You can combine multiple comparators with and and or.

4 is 4 and 5 < 4 # Output false
4 is 4 or 5 < 4 # Output true

Conditionals

Conditionals define your logic. You use them together with comparators to make decisions. They are all based around the if, else if and else keywords.

if age > 21
  console.log "Over 21!"

A little more complicated example that checks for multiple things

if age < 21
  console.log "Young"
else if age < 65
  console.log "Adult"
else
  console.log "Senior"

Loops

Loops are used to iterate over collections, as in do something for each item. Collections can be an Array or Object. They use the for keyword.

To loop over an Array you can do this:

myArray = [1, 2, 3, 4, 5]

for number in myArray
  number + 1

# Output: 2, 3, 4, 5, 6

An Object has a key and value (for example name=Koen) and you'll likely want to use both in your loop. For that, you can use of instead of in when you loop:

myObject =
  name: "Koen"
  city: "Amsterdam"
  age: 31

for key, value of myObject
  key, "=", value

# Output: name=Koen, city=Amsterdam, age=31

Common Errors

  • SyntaxError ... unexpected ...: the interpreter encountered code that it doesn't know what to do with. You likely made a typo.
  • ReferenceError ... Can't find variable: ...: you are using a variable that the interpreter doesn't know about. You likely forgot to declare it (at the right time).

More resources

If you made it this far you should know enough to start playing around. Some good next steps would be: