CoffeeScript Basics

CoffeeScript is an evolution of JavaScript. It actually compiles down to optimized JavaScript. It feels a lot like Python because of the significant whitespace, and lack of semi-colon line endings and curly braces. The syntax is a lot sparser than JavaScript which lends to its readability and simplicity. CoffeeScript can be run as an interpreter or a compiler. You can write plugins for the GitHub Atom Editor using CoffeeScript. The compiled JavaScript can be used for a web application or for command line applications run by Node.js.

Installing CoffeeScript Package with NPM

npm install -g coffee-script

Using the CoffeeScript Shell

Coffee provides an interactive shell. The REPL can be used just by running the coffee program without any arguments. Once in the shell you can start typing code.

coffee

Running a CoffeeScript Program

You can run a CoffeeScript file directly without compiling it to JavaScript. This is useful for running command line programs.

coffee myScript.coffee

Compiling CoffeeScript to JavaScript

This will compile our CoffeeScript file myCoffeeScript.coffee in to a JavaScript file. The --compile option can be swapped out with its equivalent short option of -c. You can also specify the output directory with -o or --output. Compiled JavaScript files can be run using Node.js or run in the browser.

# Compile single file to current directory
coffee --compile myCoffeeScript.coffee

# Compile an entire directory of coffee files and output them to a js directory
coffee --output /var/www/website/js /var/www/website/coffeeSources

CoffeeScript Examples

Now that we know how to use the interpreter and the compiler, let's look at some actual CoffeeScript code.

###
Multiline comments are surrounded by triple hash tags
###

# Assignment is straight forward
x = 10
alive = true

# Wrapping function arguments in parenthesis is optional
console.log 'Hi'
console.log('Hi')

# Creating and calling a function
triple = (x) -> x * 3
twentyOne = triple 7

# If statements
if x == true
    console.log 'It is so.'
else
    console.log 'It is not so.'

# Postfix if with an existence test (question mark)
console.log "It's alive!" if frankensteinAlive?

# If then on one line
if true == true then console.log 'Yes.'

# Unless
unless x == 10
    console.log 'Still not a 10...'

# For loop
for element in [1, 1, 2, 3, 5, 8]
    console.log element

# For loop with indices
for element, index in myArray
    console.log index + " " + element

# Postfix for loop
console.log element for element in myArray

# Create an array
myArray = [1, 2, 3]

# Create an Object
rectangle =
  area:   (length, width) -> length * width
  perimeter: (length, width) -> length * 2 + width * 2

# Use object method
console.log rectangle.area(15, 20)

# Splats (...)
# The ... signifies an array with
# variable number of arguments
someFunction = (firstArg, restOfArgs...) ->
  console.log firstArg, restOfArgs

# Splats can go at the beginning
someFunction = (someArgs..., lastArg) ->
  console.log someArgs, lastArg

# Splats can go in the middle too
someFunction = (firstArg, someArgs..., lastArg) ->
  console.log firstArg, someArgs, lastArg

# Smart arrays
cubes = (math.cube number for number in numberArray)