Hey there! You’ve found my intro to CoffeeScript page. You can learn CoffeeScript at the same time I do! I’m no expert, but I’ve learned a few things and thought it would be good to share. This is my beginner beginner’s guide.
This tutorial will include written explanations and demo videos. They will be divided into sections based on themes in CoffeeScript. This was my first time uploading videos and I couldn’t figure out how to edit them without majorly decreasing quality, so unfortunately to strike a balance they’re a bit blurry. Any helpful hints would be appreciated!
There are a couple ways to get CoffeeScript working on your machine.
CoffeeScript’s website, http://coffeescript.org, has a browser-based testing tool. It’s handy to try out your script, but it does not have a console viewing option. You can see what your CoffeeScript compiles to, but it doesn’t allow you to see what you’re actually going to output onto the browser window (or whatever platform you’re using).
Download via Command Line or Compressed File
My Recommended Extras
Complete instructions can be found in this guide.
I prefer using Sublime Text 2 as my text editor, and there is a CoffeeScript syntax highlighter that can be added via Package Control.
Or, if you prefer, there is a TextMate plug-in designed by the makers of CoffeeScript that you can use.
Now you should be ready to follow along with me! And if you didn’t get it quite working, don’t worry — I’ve included videos so you can follow along with what I’m typing and see the output.
// Single line comment
# Single line comment
/* Multi line comment*/
### Multi line comment ###
Variables, Arrays, and Objects
In CoffeeScript, there is no need to write var before your variables. CoffeeScript implicitly includes the var with every variable for you.
myVariable = "CoffeeScript syntax for assigning a variable."
This is helpful if you’ve ever found yourself forgetting to type var before assigning a variable in a function and accidentally creating a global variable (or overwriting an existing one).
You can still set a global variable within a function if needed by assigning the variable to the window, i.e.
#CoffeeScript window.myVariable = "I am a global variable."
#CoffeeScript array = [1, 2, 3, 4, 5]
Or, you can input your values on separate lines or “matrix” style, keeping whitespace rules in mind:
#CoffeeScript array = [ 1, 2, 3 4, 5, 6 ]
Notice on this second option you do not need commas at the end of each line of items on your array, the line break and whitespace will tell CoffeeScript how to parse the items.
#CoffeeScript myObject = numbersLetters: one: "a" "two": "b" three: 3 namesAges: sally: 3 jack: 7
In CoffeeScript, the function directly preceding the parameter inclusion is removed entirely, and the curly brackets are replaced by an arrow operator:
#CoffeeScript myFunction = -> 1
If there are no parameters to include, the arrow operator can follow immediately after the equals sign. Since this simple function is only one line, it can all be written as one line.
You may have noticed that the CoffeeScript function also doesn’t include a return. It actually does, but CoffeeScript again takes care of that for you by automatically applying a return to the last line of every function. This is something to keep in mind when you’re writing your code.
For more complex functions that might include parameters or are multiline, the format is as follows:
#CoffeeScript myComplexFunction = (a, b) -> a = b*b 4*a
This would return the computation of 4*a.
CoffeeScript also includes a handy way to include default parameters:
#CoffeeScript parameterExample = (a=1, b=2) -> a*b
All you need to do to tell CoffeeScript to check for null (and assign the value to the parameter if the value is null) is include a value after an equals sign within your parameter declaration. This means that if you include values for a and b when calling the function, it will overwrite the defaults and use your specified values. However, if you call the function without specifying parameters, the function will use the default values (and the above example would evaluate to 2).
CoffeeScript has also made calling functions simpler (or more confusing, depending on your background) by having any value immediately following the function name and a space be treated as a parameter for the called function. If you don’t have any parameters you must still use the brackets:
parameterExample() #Using the above function, evaluates to 2
But when using parameters they may simply be included after a space:
parameterExample 2,4 #Using the above function, evaluates to 8
A few other helpful hints
Like functions, if/else statements also lose their brackets and rely on whitespace for parsing instructions:
#CoffeeScript if car.isOn console.log "Go!" else console.log "Don't go!"
In CoffeeScript, operators have been modified to make them more intuitive and similar to the way you would speak english. So instead of using &&, you could just use the now-operator and. Similarly, true can now be expressed by using true, yes, or on.
|true, yes, on||true|
|false, no, off||false|
|in||no JS equivalent|
Handy operator chart via the treehouse blog.
CoffeeScript also allows you to use if or unless in postfix, allowing you to code fun things like this:
#CoffeeScript dinner = if bolognese is true then "spaghetti" else "linguini"
class Whale constructor: (@name) -> type: (eatingApparatus) -> console.log "The "+ @name + " has some " + eatingApparatus
You now have a Whale class to use in your code. Notice how we used the @ syntax for our constructor variable? This means you can just include the name on the same line when creating a new Whale class. You can also extend classes and use the super method comparatively easily:
class Odontocete extends Whale type: -> super "Teeth" class Mysticete extends Whale type: -> super "Baleen" orca = new Odontocete "Orca" right = new Mysticete "Right Whale"
In case anyone is curious, Odontocetes are toothed whales, and Mysticetes are baleen whales. You’re welcome.
orca.type() # The Orca has some Teeth right.type() # The Right Whale has some Baleen
There are many more fun things you can do with CoffeeScript that I will leave you to find out (like splats…!) and there are great resources out there to add to your knowledge. I used CoffeeScript’s website along with some other great introductory guides like The Little Book on CoffeeScript and the aforementioned treehouse blog.
CoffeeScript’s automatic return at the end of all of its functions could also cause some grief if you forget that the functionality exists or if you don’t actually want your function to return anything for whatever reason.
CoffeeScript Example Guide
EDIT: Somehow I didn’t include this video in here anywhere, so here’s a bonus extra blurry video about loops. Yay!