[4주차 위클리페이퍼] 자바스크립트에서의 this

 

함수를 호출한 객체를 가리키는 키워드

 

자바스크립트에서 this 키워드는 함수를 호출한 객체를 가리키는 키워드로 사용된다. 그런데 함수 호출 방식에 따라 가리키는 값에 차이가 있다. 그래서 함수가 호출될 때 어떤 객체가 그 함수를 호출했느냐에 따라 this의 값이 달라진다.

 

몇 가지의 호출방식에 따른 예시는 다음 코드와 같다.

// 일반 함수 호출
function globalFunction() {
  console.log(this);
}

globalFunction();   // window 객체 출력

// 메서드에서 호출
const obj = {
  name: "mck",
  greet: function() {
    console.log(this.name);
  }
};

obj.greet();   // mck 출력

// 생성자 함수에서의 호출
function Person(name) {
  this.name = name;
};

const personData = new Person("mck");
console.log(presonData.name);   // mck 출력

 

일반 함수에서 호출하면 this는 전역 객체인 window를 가리킨다. 그리고 객체 내 키의 값으로 메서드가 쓰였는데, 이 메서드에서 this를 사용하면 메서드가 속한 객체를 가리키게 된다.

 

생성자 함수는 보통 대문자로 시작하는 이름을 가지는데, 위 예시처럼 new 키워드와 함께 호출된다. 이 생성자 함수에서 this가 쓰이면 함수 밖에서 생성자 함수의 파라미터로 특정 값을 주게 되면 위 코드처럼 새로 생성된 인스턴스를 가리키게 된다.

 

만약 화살표 함수에서 this가 쓰이게 된다면 가리키는 곳이 조금 다르다.

const obj2 = {
  name: 'mck',
  greet: function() {
    const innerFunc = () => {
      console.log(this.name); 
    };
    innerFunc();
  }
};

obj2.greet();   // mck 출력

 

화살표 함수는 this를 자신의 스코프에서 찾지 않고, 자신을 감싸고 있는 외부 함수나 전역 스코프에서 this를 가져온다. 따라서 화살표 함수 내부의 this는 호출 방법에 관계없이 항상 상위 스코프를 가리킨다. 그 결과로 위 코드에서 mck가 출력된다.

 

이런 특징 때문에 화살표 함수에서의 this는 가리키는 것이 무엇인지 예측이 가능하며, 콜백 함수나 중첩 함수에서 유용하게 사용될 수 있다.