Skip to content

COFFEESCRIPT Study #6 : 커피스크립트의 함수 실행 시, 배열, 객체 파라메터 넘기기

2013년 8월 14일

안녕하세요. 쿠 입니다.

커피스크립트에서 여러가지 함수들을 실행할 경우가 있습니다. 이때 파라메터를 넘기는 방식에 대해서 조금 어려워하는 경우가 있습니다. 하지만 기본 원리를 이해한다면 아주 쉽게 접근할 수 있습니다. 사실 저도 처음에는 조금 어려웠는데요. 여러 외국 사이트들을 참조해 좋은 개념들을 찾아낼 수 있었습니다. 자 시작해봅시다.

class Study
  f1: (param)->
    console.log param.message
    console.log param.message2

자 가장 쉬우면서도 많이 쓰는 함수 형태입니다. 커피스크립트에서 함수 실행하는 방법은 세가지입니다.

1. 함수명 뒤에 () 를 붙여 함수 실행

study = new Study
study.f1({message: 'Hello World!', message2: 'Hello Korea!'})

2. 함수명 뒤에 빈칸을 띄워 파라메터를 전달 후 실행

study = new Study
study.f1 {message: 'Hello World!', message2: 'Hello Korea!'}

3. 함수명 뒤에 줄바꿈 해 들여쓰기 후 파라메터를 전달 후 실행

study = new Study
study.f1 
  message: 'Hello World!'
  message2: 'Hello Korea!'

기본적으로 커피스크립트는 함수 파라메터 넘기는 방식을 한가지 방법으로 제한하지 않습니다. 자바스크립트에서 많이 사용하는 파라메터 전달 방식을 줄바꿈과 텝으로 간단하게 표헌할 수 있도록 3번의 방법이 가장 많이 쓰이고 있습니다. ( ‘{}’ 표시를 쓰지 않아도 됩니다.)

파라메터 선언 방식도 간단합니다.

params = 
  message: 'Hello World!'
  message2: 'Hello Korea!'

파라메터 선언방식도 위의 방식에서 ‘=’ 표시를 활용해 변수에 넣어준다는 표시만 해주면 3가지 방법 모두 사용이 가능합니다.

커피스크립트와 jQuery를 동시에 사용할 때 함수체인을 많이 사용합니다. coffeescript에서 함수 체인을 사용하는 방식은 어떤 방식이 있을까요?

자바스크립트에서 많이 사용하는 jQuery Chain예제를 커피스크립트로 바꿔보겠습니다.

$('<h1></h1>')
.html('Hello World')
.attr('class', 'title')
.appendTo('.greeting');

Hello World라는 타이틀에 title이라는 클래스명을 준 후 greeting이라는 클래스명을 가진 Dom에 넣어주는 간단한 예제입니다. 위 예재를 커피스크립트로 표현해보겠습니다. 물론 자바스크립트와 동일하게 작성해도 돌아갑니다.

$ '<h1></h1>'
.html 'Hello World'
.attr 'class', 'title'
.appendTo '.greeting'

??? 자 실행해봅시다.. 오류가 발생합니다.

위의 코드처럼 작성해도 javascript로 정상적으로 포팅됩니다. 어떻게 될까요?

$('<h1></h1>'.html('Hello World'.attr('class', 'title'.appendTo('.greeting'))));

원치 않는 코드가 되어버립니다. 줄바꿈 후 “.함수”는 마지막 파라메터 함수로 붙어버리기 때문에 파라메터 뒤에 바로 “.함수”를 쓸 순 없습니다. 그래서 자바스크립트와 동일하게 작성해야 합니다. 그럼 뭐가 편할까요? 바로 함수를 넣어줄 때 편합니다.

$('<div>Thank you!</div>')
.bind('click', function(event){
  $(event.target).html('Your welcome!');
})
.appendTo('.greeting');

위 코드는 Thank you라는 클릭하면 Your welcome으로 바뀌는 Div를 greeting이라는 클래스를 가진 Dom에 넣어주는 코드입니다.

저 코드는 어떻게 변할까요?

$('<div>Thank you!</div>')
  .bind(
    'click', (event)->
       $(event.target).html 'Your Welcome!'
  ).appendTo '.greeting'

예재를 억지로 만들려다보니.. 포스팅이 너저분해 지는군요.

아무튼 커피스크립트는 더 가독성이 높은 코드를 쉽게 만들어 줄 수 있습니다. 감사합니다.

Advertisements

From → Development

댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: