자바스크립트 this 이해하기

자바스크립트에서 this는 심심치 않게 나온다. this에 대하여 설명하라고 하면, 머리로는 아는데 말로 표현하기가 어렵다. 지금은 사용하지 않지만 예전에 React를 클래스형 컴포넌트로 생성할 때에도 종종 등장했던 부분이다.
그래서 this에 대하여 간략하게 정리하고자 한다. 

 

자바스크립트에서 this는 인스턴스 자신을 가리키는 참조변수이다. 이렇게 말하는 것이 가장 쉽게 이해되는 문장인 것 같다. 

 

다른 언어에서(자바같은)도 this가 존재하는데 자바스크립트에서는 함수를 호출하는 객체에 대한 참조이다. 이것은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 방식 때문이라고 한다. (말 나온 김에 객체지향 프로그래밍에 대해서도 포스팅해야겠다)

 

this는 함수가 호출되는 방식에 따라 값을 다르게 가지게 된다. 자바스크립트에서 this의 값은 다음과 같은 방식으로 결정된다. 

 

1. 함수로서 호출 

this는 전역 객체를 참조한다. 브라우저에서는 window 객체이며, node환경에서는 global 객체이다. 

 

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

sayThis(); // 브라우저에서는 window, Node.js 환경에서는 global 출력

 

2. 메서드로서 호출

this는 메서드를 소유하는 객체를 참조한다. 

 

const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  }
}

obj.sayName(); // 'Alice' 출력

 

3. call, apply, bind 메서드로 호출

this는 메서드의 첫 번째 인수로 전달된 객체를 참조한다. 

 

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

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };

sayName.call(obj1); // 'Alice' 출력
sayName.apply(obj2); // 'Bob' 출력

const boundSayName = sayName.bind(obj1);
boundSayName(); // 'Alice' 출력

 

4. 생성자 함수로서 호출

this는 생성된 객체를 참조한다. 

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

const alice = new Person('Alice');
console.log(alice.name); // 'Alice' 출력

 

5. DOM event handler

함수를 event handler로 사용하는 경우, this는 이벤트를 발생시킨 요소로 설정된다.

 

EventHandler에서의 this는 handler 함수를 등록한 element를 가리킨다. 만약 외부의 this를 참조하려 한다면 앞에서 살펴본 bind 등을 이용해야 한다.

 

화살표 함수의 this 바인딩

자바스크립트에서는 어떤 변수를 찾을 때, 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색한다. 그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 된다. 

 

함수형으로 선언한 함수가 메서드로 호출되거나 함수 자체로 호출됨에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩된다. 

 

정리 

this는 자바스크립트에서 매우 중요한 개념이다. 이를 제대로 이해하지 않으면 예기치 않은 동작을 일으키는 원인이 될 수 있다. this가 가리키는 객체가 명시적으로 나타나지 않기 때문이다. 

 

따라서, 함수를 작성할 때 this가 어떤 값을 가지는지 항상 염두에 두어야 한다.

 

---

 

잘못된 부분이나 보완할 점이 있으면 댓글 달아주시면 감사하겠습니다. 😉

 

 

 

 

---

 

 

[JavaScript] 화살표 함수와 this 바인딩

 

[JavaScript] this의 모든 것 : 예제로 살펴보기