this

this는 함수의 실행 컨텍스트를 가리키는 예약어입니다. 여기서 실행 컨텍스트는 사전적인 정의로 '함수가 실행되는 환경'이며 좀 더 쉽게 접근하기 위해서는 '함수가 실행될 때의 컨텍스트'로 이해하시는 게 좋겠습니다.

다른 언어와 다르게 자바스크립트의 this는 상황에 따라 다른 값들을 가르킵니다. 이 때문에 자바스크립트가 조금 어렵게 느껴지는 부분도 있습니다.

여기서는 this가 가장 많이 활용되는 상황들에 대해서 알아보겠습니다.

첫 번째 this

아래의 코드를 브라우저 콘솔에서 실행하면 어떻게 될까요?

console.log(this); // window

this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트입니다. 여기서 출력된 window는 자바스크립트의 최상위 객체를 가리킵니다.

두 번째 this

아래와 같은 객체가 있다고 가정하겠습니다.

var obj = {
  num: 10,
  printNum: function() {
    console.log(this.num);
  }
};

여기서 obj.printNum()을 실행하면 어떻게 될까요?

obj.printNum(); // 10

객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킵니다.

세 번째 this

세 번째로 살펴볼 this는 먼저 함수 선언문, 생성자 함수를 알아야 합니다. 혹시 아직 개념이 낯선 분들은 링크를 클릭해서 간단하게 살펴보시고 계속 읽어나가시는 것을 추천드립니다.

자 그럼 일반 함수(함수 선언문)에서의 this는 어떤 것을 가리킬까요?

function showComment() {
  console.log(this);
}

위 함수를 아래와 같이 실행시키면 window 객체를 가리키고 있다는 것을 알 수 있습니다. 결론적으로 일반 함수의 this는 전역 컨텍스트입니다.

showComment(); // window

그럼 이번엔 생성자 함수의 this를 확인해보겠습니다.

function Developer() {
  console.log(this);
}
var dev = new Developer();

위 코드는 실행하자마자 바로 아래와 같은 결과를 콘솔에 출력합니다.

Developer {}

그 이유는 new로 인스턴스를 생성하는 순간 함수가 실행되기 때문입니다. 그리고 여기서 알 수 있는 사실은 생성자 함수의 this는 함수의 내부를 가리킨다는 것입니다.

네 번째 this

네 번째로 살펴볼 this는 실제로 웹 개발을 할 때 가장 많이 마주하게 되는 this입니다. 바로 데이터를 받아올 때 사용하는 HTTP 요청과 같은 비동기 처리 코드입니다.

function fetchData() {
  axios.get('domain.com/products').then(function() {
    console.log(this);
  });
}

위 함수를 실행하면 어떤 결과가 나타날까요? 정답은 window입니다.

fetchData(); // window

기본적으로 HTTP 요청과 같은 비동기 처리 코드는 전역 컨텍스트를 갖습니다. 정리해서 비동기 처리 코드의 콜백 함수는 전역 컨텍스트를 가리킨다고 보면 되겠습니다.

부록

위 본문을 이해하는데 도움이 되는 자료들입니다.

함수 선언문

함수 선언문은 아래와 같은 함수 정의 방식을 의미합니다.

// 함수 선언문
function functionName() {
  // ...
}

생성자 함수

그리고 생성자 함수는 아래와 같이 함수를 이용해 새 인스턴스를 선언하는 함수를 의미합니다.

function Developer() {
  // ...
}
var dev = new Developer();

TIP

자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반 언어가 아니기 때문에 위와 같이 함수를 이용하여 인스턴스를 생성할 수 있습니다. 자바 개발자 분들은 클래스가 없다고 당황하지 마세요 😃