Yongku Lee (Koo)

안녕하세요. 쿠입니다.

오늘 설명드릴 내용은 커피스크립트에서 무작정 많이 사용하는 @ 개념에 대해 포스팅해보도록 하겠습니다. @는 자바스크립트에서 쓰는 this와 거의 완전히 같은 개념이라고 볼 수 있습니다.

잠시 Javascript에서 this의 개념을 간단히 설명해 보겠습니다.

Javascript 에서 this가 가리키는 객체는 상황에 따라 다릅니다. 총 4가지 상황이 존재하는데요.

1. 메서드에서 호출 (메서드는 오브젝트 내 속성에 함수가 존재할 경우)

2. 함수에서 호출 (독립적으로 함수만 선언될 경우)

3. 생성자에서 호출 (new 명령어)

4. apply 를 통한 호출

이렇게 총 4가지 형태로 존재하게 됩니다. 상당히 헷갈리죠? 자바스크립트에서 이해하기 가장 어려운 부분중에 하나가 this에 관련된 부분입니다. 이렇게 4가지로 다르게 사용되기 때문에 상황마다 같은 this를 다른 방식으로 사용해야 한다는 점입니다.

커피스크립트에서 @를 도입한 이유가 바로 그것 때문입니다. 이제 저런 this 활용 용법을 이해하려고 노력할 필요가 없습니다. (사실 아는게 더 좋긴 합니다만) @를 사용해 Coffeescript의 class를 가리키는 this로만 이해하고 사용하셔도 무방합니다.

class f1
    text: 'Hello World!' 
    m1: ->
        console.log @text

o1 = new f1
o1.m1()

위처럼 클래스에서 @를 사용할 경우 class가 생성한 오브젝트를 지칭하는 것처럼 사용할 수 있습니다. @뒤에 바로 변수이름을 사용하면 해당 오브젝트의 속성값을 지칭하는 표현이 되겠습니다. 하지만 커피스크립트에서도 자바스크립트 this의 다양한 표현법을 수용했습니다. 바로 함수 선언표시를 통해 @의 의미를 다르게 가져갈 수 있는데요.

class f1
    text: 'Hello World!' 
    m1: ->
        console.log @text

        o2 = new f2
        o2.m2 = ->
            console.log @text
        o2.m2()

class f2
    text: 'Hello Korea'

o1 = new f1
o1.m1()

이번 예시에서는 함수 내에 또 다른 객체의 함수를 선언했습니다. 이럴 경우 m2함수의 @는 f2를 가리키게 됩니다만, m1에서 사용했기 때문에 f1의 text를 가져오고 싶을 때도 있을 겁니다. 이럴 경우에는 m2= -> 를 m2= => 로 바꿔주면 됩니다. 그러면 지금 오브젝트가 아닌 변수가 선언된 오브젝트를 가리키게 됩니다. 이런 방식으로 다양하게 @를 활용할 수 있습니다.

Coffeescript의 @는 필수 불가결입니다. 처음에 조금 이해하기 힘들 수 있지만, 조금 지나면 가독성 높고 편한 코딩을 즐기실 수 있습니다.

감사합니다.