[CoffeeScript] 핵심 문법 정리하기 (1)

CoffeeScript 문법중에서 꼭 알아야 할 것들에서 정리한다. 

1) Variables

  - 변수 선언을 하지 않는다 : 자동으로 var 붙음 

  - 세미콜론 ; 을 쓰지 않는다 

  - () 넣는 것은 옵션이다

 

2) Function

  - Named Function 과 Function Expression이나 둘다 coffee(); 를 호출한다 

  - Named Function을 Function Expression으로 변환하여 표현한다 (참조)

/////////////////////////

// Named Function

function coffee() {

  return confirm('dowon');

}

/////////////////////////

// Function Expression

var coffee = function() {

  return confirm('dowon');

}

/////////////////////////

// CoffeeScript 변환 

1) var 제거 

2) function() 을 -> 변환

3) {..} 컬리브레이스 와 ; 세미콜론 제거 

coffee = -> 

  confirm 'dowon'

4) confirm 은 1 tab 또는 2 space 로 들여쓰기를 한다 

5) CoffeeScript는 항상 return value를 갖는다 

6) 컴파일 되면 Function Expression과 동일하다 

3) String 변환

  - #{...} 사용한다 

/////////////////////////

// CoffeeScript

coffee = ->

   answer = confirm 'dowon'

   "hi #{answer}"

/////////////////////////

// Function Expression

var coffee;

coffee = function() {

  var answer;

  answer = confirm('dowon');

  return "hi " + answer;

}

4) Function Parameters

 ////////////////////////

coffee = ->    호출 : coffee()

////////////////////////

// ( ) 넣는 것은 옵션

coffee = (message) ->     

   호출 : coffee("dowon") 또는 coffee "dowon"  

coffee = (message, other) ->   

   호출 : coffee("hi", 2)  또는 coffee "hi", 2 

///////////////////////

// 파라미터 기본 할당

coffee = (message = "dowon") ->

   answer = confirm message

   "hi #{answer}"

호출 : alert coffee()  또는 alert coffee("youngsik")

5) CoffeeScript CLI (Command Line)

  - coffee -c test.coffee : test.js 컴파일 

  - coffee -cw test.coffee : 내역이 업데이트 될 때마다 재컴파일 

  - coffee -c src -o js : src 디렉토리에 있는 .coffee 파일을 컴파일해서 js 디렉토리로 옮긴다 

  - coffee -wc src -o js : 파일이 업데이트 되면 재컴파일 한다 

6) jQuery 사용하기 

////////////////////////////////

// jQuery 원본 

jQuery(function($) {

   function changeTab(e) {

     e.preventDefault();

     $(#tabs li a.active").removeClass("active");

     $(this).addClass("active")

  }

  $("#tabs ul li a").click(changeTab);

});

////////////////////////////////

// CoffeeScript 변환   

$ ->

  changeTab = (e) ->

     e.preventDefault()

     $(#tabs li a.active").removeClass "active"

     $(@).addClass "active"

   $("#tabs ul li a").click changeTab

  

  - jQuery(function($) {   ==>   jQuery ($) -> 또는 $ -> 

  - function changeTab(e)  ==>  changeTab = (e) -> 

  - ( ) 와 ; 생략 

  - this ==> @ 변환 

7) if 문

  - ( ) 과 { } 를 제거 한다

  - 한줄 표현시 수행 문구를 앞으로 놓을 수 있다

  - 한줄 표현시 수행 문구가 뒤로 가면 then을 사용한다 

//////////////////

// JavaScript 

if (age < 18) {

  alert('dowon');

}

// 1차 변환 

if age < 18 

  alert 'dowon'

// 2차 변환 

alert 'dowon' if age < 18

// 3차 변환

if age < 18 then alert 'dowon'

/////////////////

// if else 구문 

if (age < 18) {

  alert('yun');

} else {

  alert('dowon');

}

// 1차 변환

if age < 18

  alert 'yun'

else

  alert 'dowon'

// 2차 변환 

if age < 18 then alert 'yun' else alert 'dowon'

8) Operator 

  - 주로 if문에 많이 사용

  

/////////////////////////

// CoffeeScript 

if paid() and coffee() is on then pour()

// JavaScript 변환 

if(paid() && coffee() === true) {

  pour();

}

/////////////////////////

addCaffeine() if not Decaf()   ===  addCaffeine() unless Decaf()

/////////////////////////

// JavaScript

if(2 < dodo && dodo < 5) {

  alert('youngsik');

}

// CoffeeScript 1차 

if 2 < dodo < 5

  alert 'youngsik'

// 2차 

if 2 < dodo < 5 then alert 'youngsik'

9) Switch 문 변환 

  - case <조건>: 을 when <조건> then 으로 변환 

////////////////////////

// JavaScript 

var message = (function() {

  switch(coffee) {

    case 0:

       return 'hi';

    case 1:

       return 'haha';

    default:

       return 'dowon';

  }

})();

//////////////////////

// CoffeeScript 변환

message = switch coffee

   when 0 then 'hi'

   when 1 then 'haha'

   else 'dowon'

10) undefined 와 null 체크 하기 변환 

  - ? 로 변환 

////////////////////////

// JavaScript

if (typeof coffee !== "undefined" && coffee !== null) {

  alert("dowon");

}

// CoffeeScript 1차 변환 

if coffee?

  alert "dowon"

// CoffeeScript 2차 변환

alert "dowon" if coffee?

11) Existential 연산 변환

  - if not 을 unless 변환

//////////////////////////////////////////

// null 또는 undefined 일 때 0 으로 설정

// 1차 

if not coffee?

  coffee = 0 

// 2차

coffee = 0 unless coffee?

// 3차 

coffee ?= 0 

////////////////////////////////////////

// null 또는 undefined 아니면 호출하기 

// 즉, 그것이 존재하면 function을 호출

// 1차

if coffee?

   coffee.brew()

// 2차

coffee?.brew()

12) 배열 변환 

////////////////////////////

// 변수 할당

range = [1..4]  ==>  var range = [1, 2, 3, 4];

////////////////////////////

// 변수 할당 

range = [1...4]  ==> var range = [1, 2, 3];

////////////////////////////

// 변수 사용

start = 5

end = 10

range = [start..end]

          값 [5, 6, 7, 8, 9, 10]

range[1..4] 

          값 [6, 7, 8, 9]

range[1...range.length]  이것은 요것과 동일 range[1..-1]

          값 [6, 7, 8, 9, 10] 

////////////////////////////

// 배열 콤마 제거 

locations = ['seoul', 'kyunggi', 'jeju']

또는

locations = [

  'seoul'

  'kyunggi'

  'jeju'

]

13) Loop 문 변환 

  - forEach 문 사용

  - for .. in 문 사용 

////////////////////////////////////

// CoffeeScript

// forEach 문 

locations = ['seoul', 'kyunggi', 'jeju']

locations.forEach(location, index) ->

  alert "location: #{location}"

// for .. in 문 1차 

for location in locations

  alert "location: #{location}"

// for .. in 문 2차 

alert "location: #{location}" for location in locations

////////////////////////////////////

// JavaScript

locations.forEach(function(location, index) {

  return alert("location: " + location);

});

to be continue...