Skip to content

Instantly share code, notes, and snippets.

@leommoore
Created August 3, 2012 16:53
Show Gist options
  • Save leommoore/3249441 to your computer and use it in GitHub Desktop.
Save leommoore/3249441 to your computer and use it in GitHub Desktop.
Coffeescript Basics

##CoffeeScript Basics

###Basic Command Line Functions

Creates test.js from test.coffee file

$ coffee -c test.coffee

Every time test.coffee is updated re-compile

$ coffee -cw test.coffee

Compile all .coffee files in src dir into the js dir

$ coffee -c src -o js

Every time a file is updated re-compile

$ coffee -wc src -o js

###Comments

#This is a coffee-script comment

###
This is a multiple
line coffee-script comment
###

###Assignments If the variable does not exist coffee-script automatically creates a var to define the variable

#CoffeeScript
width = 500

generates

//Javascript
var width;
width = 500;

###Array Assignments

#CoffeeScript
[x,[y1,y2]] = [-27,[1,2]]
console.log "x #{x}"
console.log "y1 #{y1}"
console.log "y2 #{y2}"
To auto compile

generates

//Javascript
var x, y1, y2, _ref, _ref1;
_ref = [-27, [1, 2]], x = _ref[0], (_ref1 = _ref[1], y1 = _ref1[0], y2 = _ref1[1]);

console.log("x " + x);
console.log("y1 " + y1);
console.log("y2 " + y2);

###Conditionals

#CoffeeScript
action() if true

unless false
  action()

action() unless false

generates

//Javascript
if (true) {
  action();
}

if (!false) {
  action();
}

if (!false) {
  action();
}

###Ternary Operators

#CoffeeScript
account_colour = if balance < 0 then 'red' else 'black'

account_colour = if balance < 0
  'red' 
else 
  'black'

generates

//Javascript
var account_colout
account_colour = balance < 0 ? 'red' : 'black'

account_colour = balance < 0 ? 'red' : 'black'

###Loops

#CoffeeScript
while condition
  act()

until condition
  act()

generates

//Javascript
while (condition) {
  act();
}

while (!condition) {
  act();
}

###Logical Operators

#CoffeeScript
true and true or true and not true is true and not true isnt true

generates

//Javascript
true && true || true && !true === true && !true !== true;

###Strings

####Interpolation

#CoffeeScript
not_interpolated = 'one plus one = #{ 1 + 1 }'
console.log not_interpolated

interpolated = "one plus one = #{ 1 + 1 }"
console.log interpolated

#===========================================================
[server, database] = ["localhost", "acme_db"]
conn = "Data Source = #{server}; Initial Catalog = #{database};"

generates

//Javascript
var interpolated, not_interpolated;

not_interpolated = 'one plus one = #{ 1 + 1 }';
console.log(not_interpolated);

interpolated = "one plus one = " + (1 + 1);
console.log(interpolated);

//===========================================================
var conn, database, server, _ref;

_ref = ["localhost", "acme_db"], server = _ref[0], database = _ref[1];

conn = "Data Source = " + server + "; Initial Catalog = " + database + ";";

####Multi-line Strings Coffeescript supports multi-line strings but Javascript can only add strings together using the +.

#CoffeeScript
intro = "
It was the best of times,
it was the worst of times,
it was the age of wisdom,
it was the age of foolishness
"

generates

//Javascript
var intro;

intro = "It was the best of times,it was the worst of times,it was the age of wisdom,it was the age of foolishness";

####Heredocs Heredocs are a way to preserve line breaks and whitespace as well as indentation. It also supports interpolation if the string is double quoted. The Indentation is relative to the start of the heredoc.

#CoffeeScript
# not interpolated heredoc
heredoc = '''
walking
    down
        the
            stairs
'''

# interpolated heredoc
heredoc = """
walking
    down
        the
            stairs
"""

###Numbers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment