coffeescript

CoffeeScript전용우

12년 11월 29일 목요일

CoffeeScript?


Feature


no brace, semicolonif(true){

alert(1);

}else{

alert(2);

}

if true

alert 1

else

alert 2


Functionvar square = function(x){

return x * x;

}

square = (x) -> x * x


Objectvar bareObj = {

“name” : “전용우”,

“id” : “mixed”

};

bareObj =

name : “전용우”

id : “mixed”


Conditional Assignmentvar date;if(friday){

date = sue;}else{

date = jill;}

---------------------------------------------------date = if friday then sue else jill


Loops/comprehensions

foods = ['broccoli', 'spinach', 'chocolate']eat food for food in foods when food isnt 'chocolate'


Splats

joinArgs = (first, middles..., last) -> parts = [] if first? parts.push first.toUpperCase() for middle in middles parts.push middle.toLowerCase() if last? parts.push last.toUpperCase()

console.log joinArgs("a"); # Aconsole.log joinArgs("a", "b"); #ABconsole.log joinArgs("a", "B", "C", "d"); #AbcD


String Interpolationsquare = (x) -> x*x

id = "mixed"

str = "#{id} is #{square()}"


Destructuring Assignment

theBait = 1000theSwitch = 0

[theBait, theSwitch] = [theSwitch, theBait]


Function binding

Account = (customer, cart) -> @customer = customer @cart = cart

$('.shopping_cart').bind 'click', (event) => @customer.purchase @cart


장점


"true" == true // true

"true" === true // false

"0" == false // true

"0" == 0 // true

0 === false // false

"" == false // true

"true" is true // false

"true" is "true" // true

"0" is false // false

"0" is 0 // false

0 is 0 // true

"" is false // false

난해한 JS 해결


cubes = (math.cube num for num in list)--------------------------------------------------cubes = (function() {

var _i, _len, _results;

_results = [];

for (_i = 0, _len = list.length; _i < _len; _i++) {

num = list[_i];

_results.push(math.cube(num));

}

return _results;

})();

간결한 코드


var _this = this;

$(this.config.add).click(function(e){

$(_this.config.todolist).append("<li>"+$(_this.config.todo).val()+"</li>");

});

--------------------------------------------------

$(@config.add).click (e)=>

$(@config.todolist).append "<li>#{$(@config.todo).val()}</li>"

가독성


ES.next

• Arrow Function

• Destructuring Assignment

• Default Value


단점


Not Superset of JavaScript.


Learning Curve


Debugging


실제로 써보니...


지나치게 엄격한 문법doSomething () -> 'hello'doSomething() -> 'hello'--------------------------------------------------doSomething(function() { return 'hello';});

doSomething()(function() { return 'hello';});


가독성은 케바케

if (five && six && seven) doStuff();

--------------------------------------------------

doStuff() if five and six and seven


SourceMap?


(Ruby || Python || Node.JS)+

CoffeeScript


Thank you.


coffeescript

Documents