The document discusses the benefits of CoffeeScript compared to JavaScript. It provides examples of cleaner CoffeeScript syntax for functions, loops, and list comprehensions compared to their JavaScript equivalents. Overall, CoffeeScript code is more concise and readable than plain JavaScript code.

1. CoffeeScript
What’s good?
2010.10.10
OutsideratFRENDS

2. “ CoffeeScriptisBeautiful
INeverWanttoWritePlain
”
JavaScriptAgain
SamStephenson
(prototype.jscreator)

3. 좋은것과
익숙하지
않은것을
구별하기가
쉽지않다.

4. Comparing
JavaScriptCoffeeScript

5. FunctionSyntax

6. $(a).click(function(event){
$(this).addClass(busy);
})

7. $(a).click(function(event){
$(this).addClassbusy
})

8. $(a).click(function(event){
$(@).addClassbusy
})

9. $(a).click(event)-
$(@).addClassbusy

10. LoopSyntax

11. vardata=[];
for(vari=0;i84;i++){
data.push(i*10/84);
}

12. data=[]
foriin[0..83]
data.push(i*10/84)

13. data=[]
data=i*10/84foriin[0..83]

14. data=i*10/84foriin[0..83]

15. List
Comprehensions

16. init_board:function(){
this.board=newArray(WIDTH);
for(varx=0;xthis.board.length;x++){
this.board[x]=newArray(HEIGHT)
for(vary=0;ythis.board[x].length;y++){
this.board[x][y]=false;
}
}
}

17. init_board:-
this.board=newArray(WIDTH)
forxinthis.board
this.board[x]=newArray(HEIGHT)
foryinthis.board[x]
this.board[x][y]=false

18. init_board:-
@board=forxin[0...WIDTH]
this.board[x]=newArray(HEIGHT)
foryinthis.board[x]
this.board[x][y]=false

19. init_board:-
@board=forxin[0...WIDTH]
foryin[0...HEIGHT]
false

20. init_board:-
@board=
(falseforyin[0...HEIGHT]forxin[0...WIDTH])

21. SettingFields

22. constructor:function(keys,tokens){
this.keys=keys;
this.tokens=tokens;
}

23. constructor:(keys,tokens)-
this.keys=keys
this.tokens=tokens

24. constructor:(keys,tokens)-
@keys=keys
@tokens=tokens

25. constructor:(@keys,@tokens)-

26. Defensive
Programming

27. varcountry=null;
if(typeofmodel!=='undefined'
model
typeofmodel.profile==='function'){
varprofile=model.profile();
if(profile
profile.location
profile.location.country){
country=profile.location.country.toString();
}
}

28. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
profile.location
profile.location.country
country=profile.location.country.toString()

29. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
profile.location
country=profile.location.country?.toString()

30. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
country=profile.location?.country?.toString()

31. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
country=profile?.location?.country?.toString()

32. country=null
iftypeofmodelisnt'undefined'
model
profile=model.profile?()?
country=profile?.location?.country?.toString()

33. country=null
profile=model?.profile?()?
country=profile?.location?.country?.toString()

34. profile=model?.profile?()?
country=profile?.location?.country?.toString()

35. profile=model?.profile?()?
country=profile
?.location?.country?.toString()

36. country=model?.profile?()
?.location?.country?.toString()

37. BareObjects

38. $.ajax({
url:path,
timeout:5,
data:{from:workspace},
dataType:html,
success:function(data){
return$(#result).html(data);
}
});

39. $.ajax({
url:path,
timeout:5,
data:{from:workspace},
dataType:html,
success:(data)-
return$(#result).html(data)
})

40. $.ajax{
url:path
timeout:5
data:{from:workspace}
dataType:html
success:(data)-
$(#result).htmldata
}

41. $.ajax
url:path
timeout:5
data:
from:workspace
dataType:html
success:(data)-
$(#result).htmldata

42. FunctionBinding

43. functionrequest(){
$.get(this.person.url,
(function(data){
$(this.el).html(data);
}).bind(this)
)
}

44. request=()-
$.get(this.person.url,
((data)-
$(this.el).html(data);
).bind(this)
)

45. request=()-
$.get(this.person.url,
((data)-
$(@el).htmldata
).bind(@)
)

46. request=()-
$.get(this.person.url,
(data)=
$(@el).htmldata
)

47. request=()-
$.getthis.person.url,
(data)=
$(@el).htmldata

48. BadThings

49. Compile
is
inconvenience

50. Debugging
is
hard

51. But
It’sComing

52. ShortSourceMap
Demo
http://www.youtube.com/watch?v=UAGAB-yT0lQ

53. ToolsforCoffeeScript

54. js2coffee
convertJavaScripttoCoffeeScript
http://js2coffee.org/

55. CoffeeTable
BookmarkletforCoffeeScriptConsole
http://code.alecperkins.net/coffeetable/

56. cake
SimpleBuildSystemlikeMake
https://github.com/jashkenas/coffee-script/wiki/[HowTo]-Compiling-and-Setting-Up-Build-Tools

57. CoffeeKup
MarkupasCoffeeScript
http://coffeekup.org/

58. Thankyou.
@Outsideris
outsideris@gmail.com
http://blog.outsider.ne.kr

59. Resources
http://www.flickr.com/photos/41754875@N00/5942994577
http://www.flickr.com/photos/61172365@N00/481680379