CoffeeScript
June 06, 2016
CoffeeScript on OSX funtime
The GameTree tech stack is going to be using Jade and CoffeeScript so I ought to know how to use these things, no? Yes.
What is CoffeeScript
CoffeeScript is a simplified syntax + optimized compile of good 'ol JavaScript. It ought to make life easier and code run faster in most cases if you believe everything the manufacturer writes on the box.
tl;dr - CoffeeScript basically lets you use some very very Ruby-like syntactic sugar for writing JavaScript
Installing CoffeeScript
- First
$ update homebrew
or if you have no idea what I am talking about, install homebrew - Then we need node.js. If you don't have node.js, hope on in, the water is fine.
$ brew install node
and now you follow the prompts to install our pal Node. - Now to install CoffeeScript. `$ npm install -g coffee-script'
- Make sure it installed
$ coffee -v
You can now write .coffee
files and compile them with the $ coffee
command.
$ coffee -o javascripts/ -c coffeescripts/
will take coffee files from the coffeescripts folder and compile them to JavaScript.$ coffee -w -o javascripts/ -c coffeescripts/
will do as in no. 1 above but watches so as to compile changes on the fly. This works for new files and changes to existing files, but not to new folders and their content.$ coffee -j javascripts/app.js -c coffeescripts/*.coffee
will combine multiple coffee files into a single JS file$ coffee
opens a coffeescript shell for practice
Now to learn the coffeescripting
Hot Tips
- No more var or let or const for your variable declarations.
name = "Rusty"
- Concatenate strings with a + sign.
- String interpolation is as in HAML
#{variable_name}
- Declare function with
functionName = -> firstName + " " + lastName
- Note the lack of ending semicolon
- Note that like Ruby functions automatically return the last line of code so no
return
keyword - Since there is no semi-colon you write multi-line functions with multiple lines of code. I.e. his enter/return and type like a champ.
- Create arguments for functions by putting them in parenthesis like so
name = (first_name, last_name) -> first_name + " " + last_name
just put them before the -> arrow - Like Ruby you can omit parenthesis on arguments if you like when you call a function `name 'Russell', 'Schmidt'
- Arrays are the same as ever except you can write them as multiline and omit the commas, with one entry per line. You still need square brackets.
- Similarly Objects can drop the commas when you go multi-line, and the curlies, so long as you indent, so its just
object =
key: value
key2: value2
- You can also use Ruby ranges like [1..10] which is inclusive of 1 and 10. Three dots [1...11] excludes the high number end and here represents the same range as [1..10]. If you just use [..] it is the size of the array.
- Splats! (
...
) you can define a function withsomeName...
as an argument and then loop through it to take an indiscriminate number of arguments and just transform them via the function as a loopfor x in someName
- Class declarations are simple. Note whitespace being required.
class BoneMachine
constructor: (fastfood) ->
@fastfood = fastfood
// can also be written as
class BoneMachine
constructor: (@fastfood) ->
yourBones: @fastfood ->
console.log("Your bone has a little machine")
// instantiate a class
myBoneMachine = BoneMachine "japanese fast food"
// extend a class
class BreakMyBody extends BoneMachine
// overwrite inheritance
yourBones ->
super console.log("Im a belly dancer")
- New syntax for equivalence symbols
coffee | JS |
---|---|
is | === |
isnt | !== |
not | ! |
and | && |
or | || |
true yes on | true |
false no off | false |
@ this | this |
of | in |
in | no JS |
- The Existential Operator. Without a doubt this is my favorite thing I have ever learned in CS. ?. The question mark. You can use to check for presence
login() if not currentUser?
or assign default values like the Ruby ||= but here it is?=
. You can use it like a ternary operatorname = username ? 'Mr No Name'
to assign a default. You can also use it like how ? is used in Swift optionals, especially in chained methods - the accessor variant of the Existential Operatol. This lets you handle null errors a little better. - Ruby-like looping with in
sayMyName = ("Destiny's Child" for i in [0..9]
to return the name 10 times in an array. It can decrement automatically toocountdown = (num for num in [10..1])
- Drop the parenthesis and curlies with conditionals.
mood = happy if singing
- While and Until keywords and loops are available with a much easier to understand syntax.
if this.studyingEconomics
buy() while supply > demand
sell() until supply > demand
- Switch statements are just
switch someVar
and thenwhen x then y
indented and ended withelse z
. - Switch statements can be used in place of if statements since we can pass in conditionals for each case.
when x < 100 then y
inside a switch is awesome instead of relying on perfect equivalence. - Try/Catch can omit the error variable(s) and curlies, just relying on new line and indentation.
- Block comments in CoffeeScript use
### some comments on many lines ###
All liberally cribbed from treehouse and the source at coffeescript.org
Also Get your Sublime 3 Right
- Download Sublime Package control - install and restart Sublime
- In Sublime for OSX - CMD+SHFT+P
- Type "Package Control - Install Package"
- Find your package - look up "SASS" ... I enjoy 'syntax highlighting for SASS' though