CoffeeScript 101

Transcript

1. CoffeeScript 101 or: How I Learned to Stop Worrying and Love the Sugar
2. Me • I write full stack javascript • I work at Fractal • I like to code • I love open source • @eschoff • github.com/Contra
3. What • CoffeeScript is an attempt to expose the good parts of javascript in a simple way • “It’s just javascript”
4. Javascript • Global variables and scoping nightmares • Optional semicolon • Typeof is awkward (null == object?) • ==,===,=! • “Lisp in C’s Clothing” – Crockford • Clunky syntax for common operations
5. CoffeeScript • Private variables by default • Scoping handled automagically • No such thing as == • Compiled code is super fast • Compiled code passes JSLint • Shorthand syntax for common operations • The code compiles one-to-one with it’s javascript equivalent (unlike others)
6. What you’ll learn • Syntax • Expressions • List comprehensions • Functions • Conditionals • Splats • Destructuring
7. What you won’t learn • Classes • Inheritance • Scope binding
8. Follow along • Go to repl.it and select coffee-script • Run the examples as we go over them
9. Syntax • Whitespace sensitive (tabs not braces) • Parenthesis optional • Commas/braces optional for objects • Conditional operators • var does not exist • Semicolons do not exist
10. Hello World console.log "Hello world!" • No parenthesis • No semicolons
11. Operators • “is” is the equivalent of “===“ • “isnt” is the equivalent of “!==“ • “and” is the equivalent of “&&” • “unless” is the equivalent of “if (!)”
12. Variables a = "test" • It’s that easy. • No need to worry about scoping
13. String Interpolation a = "world" b = "Hello #{a}" • Any expression can be within a string interpolation
14. Objects a = key: "value" other: "value" more: values: ["values"] • Spacing spacing spacing • So fresh and so clean
16. Existential Operator b = "i exist!" if a? doWork a else doWork b • ? Checks for null and undefined
17. Existential Assignment b = 1 b ?= 2 • b = 1
18. Functions sayHello = (who) -> console.log "Hello #{who}!" sayHello "Desert code camp" • -> is the equivalent of function(){ • No braces – indentation is key • No parenthesis needed when you call a function with arguments
19. Default variables sayHello = (who="world") -> console.log "Hello #{who}!" sayHello() • Default arguments can be anything
20. Destructuring Objects options = isCool: true {isCool} = options • {isCool} = options is the equivalent of isCool = options.isCool
21. Destructuring Arrays people = ["bob","jill","tom"] [first, second] = people • first = “bob” • second = “jill”
22. Splats • Simple way to glob up the rest • Can be used with destructuring, function arguments, and for calling functions • …
23. Destructuring Arrays + Splats people = ["bob","jill","tom","jim"] [first, second, rest...] = people • first = “bob” • second = “jill” • rest = [“tom”,”jim”]
24. Ranges • num is now an array of 0-100 num = [0...100]
26. Loops sayHello = (who) -> for person in who console.log "Hello #{person}!" sayHello ["Phoenix", "Haters"] • Compiled loops are more efficient than loops by hand
27. Conditional Loops sayHello = (who) -> for person in who when person is "Phoenix" console.log "Hello #{person}!" sayHello ["Phoenix", "Haters"] • Compiled loops are more efficient than loops by hand
28. SUGAR OVERLOAD
29. Equivalent var sayHello = function(who) { for (var i = 0; i < who.length; i++) { if (who[i] === "Phoenix") { console.log("Hello " + who[i] + "!"); } } }; sayHello(["Phoenix", "Haters"]);
31. List Comprehensions people = [ name: "Tom" cool: true , name: "Bob" cool: false , name: "Jim" cool: true ] cool = (p for p in people when p.cool is true) • Wrapping a loop in parenthesis turns it into a list comprehension • cool = [tom, bob]
32. List Comprehensions + Select people = [ name: "Tom" cool: true , name: "Bob" cool: false , name: "Jim" cool: true ] cool = (p.name for p in people when p.cool is true) • cool = [“Tom”, “Bob”]
33. forEach • cool = [“Tom”, “Bob”] people = ["Tom", "Jim", "Bob"] slap = (name) -> console.log "#{name} got slapped" slap idiot for idiot in people
35. Questions?
36. Sandbox
37. End • Follow me on Twitter @eschoff @wearefractal • For more see http://coffeescriptbook.org/