coffeescript

CoffeeScript전용우

12년 11월 29일 목요일

CoffeeScript?

12년 11월 29일 목요일

12년 11월 29일 목요일

Feature

12년 11월 29일 목요일

no brace, semicolonif(true){

alert(1);

}else{

alert(2);

}

if true

alert 1

else

alert 2

12년 11월 29일 목요일

Functionvar square = function(x){

return x * x;

}

square = (x) -> x * x

12년 11월 29일 목요일

Objectvar bareObj = {

“name” : “전용우”,

“id” : “mixed”

};

bareObj =

name : “전용우”

id : “mixed”

12년 11월 29일 목요일

Conditional Assignmentvar date;if(friday){

date = sue;}else{

date = jill;}

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

12년 11월 29일 목요일

Loops/comprehensions

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

12년 11월 29일 목요일

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

12년 11월 29일 목요일

String Interpolationsquare = (x) -> x*x

id = "mixed"

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

12년 11월 29일 목요일

Destructuring Assignment

theBait = 1000theSwitch = 0

[theBait, theSwitch] = [theSwitch, theBait]

12년 11월 29일 목요일

Function binding

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

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

12년 11월 29일 목요일

장점

12년 11월 29일 목요일

"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 해결

12년 11월 29일 목요일

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;

})();

간결한 코드

12년 11월 29일 목요일

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>"

가독성

12년 11월 29일 목요일

ES.next

• Arrow Function

• Destructuring Assignment

• Default Value

12년 11월 29일 목요일

12년 11월 29일 목요일

단점

12년 11월 29일 목요일

Not Superset of JavaScript.

12년 11월 29일 목요일

Learning Curve

12년 11월 29일 목요일

Debugging

12년 11월 29일 목요일

실제로 써보니...

12년 11월 29일 목요일

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

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

12년 11월 29일 목요일

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

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

12년 11월 29일 목요일

가독성은 케바케

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

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

doStuff() if five and six and seven

12년 11월 29일 목요일

SourceMap?

12년 11월 29일 목요일

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

CoffeeScript

12년 11월 29일 목요일

Thank you.

12년 11월 29일 목요일