이 글은 You Don't Know JS 서적을 참고하여 작성하였습니다.

왜 this를 사용할까

Javascript 에서의 this는 다른 언어와 다르게 헷갈리는 구석이 있다.

그럼에도 불구하고 this를 사용하는 이유는 무엇일까?

물론 함수에 파라미터를 통해 this를 어느 정도 대체할 수 있지만, API 설계상 this 를 사용하는 것이 명확하고 재사용하기 좋다.

아래의 예시를 보자.

function foo() {
    return this.title.toUpperCase();
}

function bar() {
    var content = "Hellworld " + foo.call(this);
    console.log(content);
}

var me = {
    title: "철수"
};

var you = {
    title: "미애"
};

foo.call(me);
foo.call(you);

bar.call(me);
bar.call(you);

여기서 처음 접하는 독자는 헷갈릴 수 있다. foo 함수에서 call() 함수를 호출하는게 가능한 것인가?

Javascript에서의 함수는 모두 객체([[Function]])이기 때문에, 내장된 프로퍼티, 메서드를 가질 수 있는 것이다.

다시 돌아와서 뒷쪽에서 자세하게 설명하겠지만, call() 함수를 이용해 me, your 객체를 명시적으로 this 바인딩하였다.

foo() 함수는 파라미터를 통해서 객체를 전달받을 수도 있지만, 함수 호출자에서 명시적으로 this 설정함으로써, 코드가 명확하고 재사용성하기 쉬어진다.

this 에 대한 오해

다른 언어에서 사용했던 this 방식은 Javascript에서 this를 헷갈리게 하며 오해를 일으킨다.

this가 자기 자신을 가리킨다?

Javascript에서 this는 자기 자신을 가리키지 않는다.

Javascript에서는 함수가 객체이므로 특정 상태값을 유지/접근하기 위해 함수 내부에서 this를 사용할 것이다.

이러한 방법도 가능하지만, this를 이해하지 못하고 사용하면 잘못된 결과를 얻을 수 있다.

아래 예시를 들어보자.