자바스크립트에서 this 용법

자바스크립트에서 this는 함수가 선언될 때가 아니라 함수가 어떻게 호출되는지에 따라 동적으로 바인딩된다는 점이 가장 큰 특징이다.

this 바인딩 규칙 (우선순위 순)

호출 방식에 따라 크게 4가지 우선순위 규칙이 있다.

1. new 바인딩

• new 키워드로 생성자 함수를 호출하면 this는 새로 생성된 인스턴스 객체를 가리킨다.

function User(name) {
  this.name = name;
}

const user = new User("홍길동");
console.log(user.name); // "홍길동"

2. 명시적 바인딩

• call, apply, bind 메서드를 사용하면 명시적으로 인자로 넘겨준 객체로 this가 강제 바인딩된다.

function greet() {
  console.log(this.name);
}

const user = { name: "홍길동" };
greet.call(user); // "홍길동"

3. 암시적 바인딩

• object.method()처럼 객체의 메서드로 호출되면 마침표 앞에 있는 해당 객체에 암시적으로 바인딩된다.

const user = {
  name: "홍길동",
  greet() {
    console.log(this.name);
  }
};

user.greet(); // "홍길동"

4. 기본 바인딩

• 위 3가지에 해당하지 않는 일반적인 함수 호출의 경우, strict mode에서는 undefined가 되고 일반 모드에서는 전역 객체인 window를 가리킨다.

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

showThis(); // window (일반 모드) / undefined (strict mode)

Arrow Function과 this

최근 React 같은 개발 환경에서 Arrow Function을 적극적으로 사용한다.

• Arrow Function은 앞서 말한 동적 바인딩 규칙을 무시하고, 함수가 선언될 당시의 상위 스코프의 this를 그대로 가져오는 특징이 있다.
• 쉽게 말해 Arrow Function은 자기만의 this를 가지지 않고, 바깥의 this를 그대로 물려받는 것이다.
• 덕분에 콜백 함수를 넘길 때마다 bind(this)를 하지 않아도 되어 예상치 못한 버그를 획기적으로 줄일 수 있다.

const user = {
  name: "홍길동",
  greet() {
    // Arrow Function은 greet()의 this를 그대로 가져옴
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.greet(); // "홍길동" (Arrow Function이 아니었다면 undefined)

최종 정리

자바스크립트에서 this는 함수가 선언될 때가 아니라 어떻게 호출되느냐에 따라 동적으로 바인딩됩니다. 우선순위가 가장 높은 것부터 보면, new 키워드로 호출하면 새로 생성된 인스턴스를, call/apply/bind로 호출하면 명시적으로 넘긴 객체를, 객체의 메서드로 호출하면 마침표 앞의 객체를 가리킵니다. 이 세 가지에 해당하지 않는 일반 함수 호출의 경우 strict mode에서는 undefined, 일반 모드에서는 window를 가리킵니다. Arrow Function은 이 규칙을 따르지 않고 선언 당시 상위 스코프의 this를 그대로 물려받기 때문에, React 같은 환경에서 콜백 함수의 this 문제를 깔끔하게 해결할 수 있습니다.