SlideShare a Scribd company logo
1 of 30
Download to read offline
CoffeeScript
                         전용우




12년	 11월	 29일	 목요일
CoffeeScript?



12년	 11월	 29일	 목요일
12년	 11월	 29일	 목요일
Feature



12년	 11월	 29일	 목요일
no brace, semicolon
                     if(true){        if true
                          alert(1);      alert 1
                     }else{           else
                          alert(2);      alert 2
                     }




12년	 11월	 29일	 목요일
Function
                     var square = function(x){   square = (x) -> x * x
                         return x * x;
                     }




12년	 11월	 29일	 목요일
Object
                     var bareObj = {           bareObj =
                          “name” : “전용우”,            name : “전용우”
                          “id” : “mixed”             id : “mixed”
                     };




12년	 11월	 29일	 목요일
Conditional Assignment
                     var 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"); # A
                     console.log joinArgs("a", "b"); #AB
                     console.log joinArgs("a", "B", "C", "d"); #AbcD




12년	 11월	 29일	 목요일
String Interpolation
                     square = (x) -> x*x
                     id = "mixed"
                     str = "#{id} is #{square()}"




12년	 11월	 29일	 목요일
Destructuring
                             Assignment

                     theBait = 1000
                     theSwitch = 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일	 목요일
난해한 JS 해결
                     "true" == true      // true     "true" is true       // false
                     "true" === true      // false   "true" is "true"      // true
                     "0" == false      // true       "0" is false       // false
                     "0" == 0          // true       "0" is 0           // false
                     0 === false        // false     0 is 0             // true
                     "" == false       // true       "" is false        // false




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일	 목요일

More Related Content

What's hot

Fluent Python - Chapter 8
Fluent Python - Chapter 8Fluent Python - Chapter 8
Fluent Python - Chapter 8Sunghyun Lee
 
ECMA Script 5 & 6
ECMA Script 5 & 6ECMA Script 5 & 6
ECMA Script 5 & 6sewoo lee
 
하스켈 성능 튜닝 2
하스켈 성능 튜닝 2하스켈 성능 튜닝 2
하스켈 성능 튜닝 2민석 이
 
[Pgday.Seoul 2020] SQL Tuning
[Pgday.Seoul 2020] SQL Tuning[Pgday.Seoul 2020] SQL Tuning
[Pgday.Seoul 2020] SQL TuningPgDay.Seoul
 
3ds maxscript 튜토리얼_20151206_서진택
3ds maxscript 튜토리얼_20151206_서진택3ds maxscript 튜토리얼_20151206_서진택
3ds maxscript 튜토리얼_20151206_서진택JinTaek Seo
 
함수형 프로그래밍? 그래서 어떻게
함수형 프로그래밍? 그래서 어떻게함수형 프로그래밍? 그래서 어떻게
함수형 프로그래밍? 그래서 어떻게Gyooha Kim
 
하스켈로 알고리즘 문제 풀기
하스켈로 알고리즘 문제 풀기하스켈로 알고리즘 문제 풀기
하스켈로 알고리즘 문제 풀기민석 이
 
R 스터디 두번째
R 스터디 두번째R 스터디 두번째
R 스터디 두번째Jaeseok Park
 
R 스터디 네번째
R 스터디 네번째R 스터디 네번째
R 스터디 네번째Jaeseok Park
 
Boost pp 20091102_서진택
Boost pp 20091102_서진택Boost pp 20091102_서진택
Boost pp 20091102_서진택JinTaek Seo
 
Weird stuff with hashes.key
Weird stuff with hashes.keyWeird stuff with hashes.key
Weird stuff with hashes.keySangyong Sim
 
Tensorflow regression 텐서플로우 회귀
Tensorflow regression 텐서플로우 회귀Tensorflow regression 텐서플로우 회귀
Tensorflow regression 텐서플로우 회귀beom kyun choi
 
비전공자를 위한 코딩교육 4주차
비전공자를 위한 코딩교육 4주차비전공자를 위한 코딩교육 4주차
비전공자를 위한 코딩교육 4주차종훈 박
 

What's hot (13)

Fluent Python - Chapter 8
Fluent Python - Chapter 8Fluent Python - Chapter 8
Fluent Python - Chapter 8
 
ECMA Script 5 & 6
ECMA Script 5 & 6ECMA Script 5 & 6
ECMA Script 5 & 6
 
하스켈 성능 튜닝 2
하스켈 성능 튜닝 2하스켈 성능 튜닝 2
하스켈 성능 튜닝 2
 
[Pgday.Seoul 2020] SQL Tuning
[Pgday.Seoul 2020] SQL Tuning[Pgday.Seoul 2020] SQL Tuning
[Pgday.Seoul 2020] SQL Tuning
 
3ds maxscript 튜토리얼_20151206_서진택
3ds maxscript 튜토리얼_20151206_서진택3ds maxscript 튜토리얼_20151206_서진택
3ds maxscript 튜토리얼_20151206_서진택
 
함수형 프로그래밍? 그래서 어떻게
함수형 프로그래밍? 그래서 어떻게함수형 프로그래밍? 그래서 어떻게
함수형 프로그래밍? 그래서 어떻게
 
하스켈로 알고리즘 문제 풀기
하스켈로 알고리즘 문제 풀기하스켈로 알고리즘 문제 풀기
하스켈로 알고리즘 문제 풀기
 
R 스터디 두번째
R 스터디 두번째R 스터디 두번째
R 스터디 두번째
 
R 스터디 네번째
R 스터디 네번째R 스터디 네번째
R 스터디 네번째
 
Boost pp 20091102_서진택
Boost pp 20091102_서진택Boost pp 20091102_서진택
Boost pp 20091102_서진택
 
Weird stuff with hashes.key
Weird stuff with hashes.keyWeird stuff with hashes.key
Weird stuff with hashes.key
 
Tensorflow regression 텐서플로우 회귀
Tensorflow regression 텐서플로우 회귀Tensorflow regression 텐서플로우 회귀
Tensorflow regression 텐서플로우 회귀
 
비전공자를 위한 코딩교육 4주차
비전공자를 위한 코딩교육 4주차비전공자를 위한 코딩교육 4주차
비전공자를 위한 코딩교육 4주차
 

More from yongwoo Jeon

EcmaScript6(2015) Overview
EcmaScript6(2015) OverviewEcmaScript6(2015) Overview
EcmaScript6(2015) Overviewyongwoo Jeon
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brickyongwoo Jeon
 
Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화yongwoo Jeon
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지yongwoo Jeon
 
모바일 디버깅
모바일 디버깅모바일 디버깅
모바일 디버깅yongwoo Jeon
 
Client side storage in html5
Client side storage in html5Client side storage in html5
Client side storage in html5yongwoo Jeon
 

More from yongwoo Jeon (15)

EcmaScript6(2015) Overview
EcmaScript6(2015) OverviewEcmaScript6(2015) Overview
EcmaScript6(2015) Overview
 
deview2014
deview2014deview2014
deview2014
 
Web notification
Web notificationWeb notification
Web notification
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
 
Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화
 
asm.js
asm.jsasm.js
asm.js
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
 
모바일 디버깅
모바일 디버깅모바일 디버깅
모바일 디버깅
 
Web component
Web componentWeb component
Web component
 
Html5 use cases
Html5 use casesHtml5 use cases
Html5 use cases
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
Client side storage in html5
Client side storage in html5Client side storage in html5
Client side storage in html5
 
Devfest
DevfestDevfest
Devfest
 
Scriptable cache
Scriptable cacheScriptable cache
Scriptable cache
 
Whats jindo
Whats jindoWhats jindo
Whats jindo
 

CoffeeScript

  • 1. CoffeeScript 전용우 12년 11월 29일 목요일
  • 3. 12년 11월 29일 목요일
  • 5. no brace, semicolon if(true){ if true alert(1); alert 1 }else{ else alert(2); alert 2 } 12년 11월 29일 목요일
  • 6. Function var square = function(x){ square = (x) -> x * x return x * x; } 12년 11월 29일 목요일
  • 7. Object var bareObj = { bareObj = “name” : “전용우”, name : “전용우” “id” : “mixed” id : “mixed” }; 12년 11월 29일 목요일
  • 8. Conditional Assignment var date; if(friday){ date = sue; }else{ date = jill; } --------------------------------------------------- date = if friday then sue else jill 12년 11월 29일 목요일
  • 9. Loops/comprehensions foods = ['broccoli', 'spinach', 'chocolate'] eat food for food in foods when food isnt 'chocolate' 12년 11월 29일 목요일
  • 10. 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"); # A console.log joinArgs("a", "b"); #AB console.log joinArgs("a", "B", "C", "d"); #AbcD 12년 11월 29일 목요일
  • 11. String Interpolation square = (x) -> x*x id = "mixed" str = "#{id} is #{square()}" 12년 11월 29일 목요일
  • 12. Destructuring Assignment theBait = 1000 theSwitch = 0 [theBait, theSwitch] = [theSwitch, theBait] 12년 11월 29일 목요일
  • 13. Function binding Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind 'click', (event) => @customer.purchase @cart 12년 11월 29일 목요일
  • 15. 난해한 JS 해결 "true" == true // true "true" is true // false "true" === true // false "true" is "true" // true "0" == false // true "0" is false // false "0" == 0 // true "0" is 0 // false 0 === false // false 0 is 0 // true "" == false // true "" is false // false 12년 11월 29일 목요일
  • 16. 간결한 코드 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일 목요일
  • 17. 가독성 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일 목요일
  • 18. ES.next • Arrow Function • Destructuring Assignment • Default Value 12년 11월 29일 목요일
  • 19. 12년 11월 29일 목요일
  • 21. Not Superset of JavaScript. 12년 11월 29일 목요일
  • 22. Learning Curve 12년 11월 29일 목요일
  • 25. 지나치게 엄격한 문법 doSomething () -> 'hello' doSomething() -> 'hello' -------------------------------------------------- doSomething(function() { return 'hello'; }); doSomething()(function() { return 'hello'; }); 12년 11월 29일 목요일
  • 26. 지나치게 엄격한 문법 doSomething () -> 'hello' doSomething() -> 'hello' -------------------------------------------------- doSomething(function() { return 'hello'; }); doSomething()(function() { return 'hello'; }); 12년 11월 29일 목요일
  • 27. 가독성은 케바케 if (five && six && seven) doStuff(); -------------------------------------------------- doStuff() if five and six and seven 12년 11월 29일 목요일
  • 29. (Ruby || Python || Node.JS) + CoffeeScript 12년 11월 29일 목요일
  • 30. Thank you. 12년 11월 29일 목요일