JS / this 키워드란

this란

this는 JavaScript에서 매우 중요한 키워드로,
현재 실행 중인 코드의 실행 컨텍스트에서 현재 객체를 가리킨다.

this의 값은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다.

컨텍스트

컨텍스트란 함수가 실행되는 환경으로 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
환경 정보에는 함수가 속해 있는 객체, 함수가 호출된 방법 등이 포함된다.
컨텍스트는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악 할수 있는 개념이라고 한다.

this 값 결정

1. 일반 함수 내 this

일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정된다.
함수를 일반적인 방식으로 호출하면, this는 전역 객체를 가리킨다.(브라우저에서는 window)

하지만, 함수를 객체의 메서드로 호출하거나, call(), apply(), bind() 메서드를 사용하여 호출하면, this의 값을 명시적으로 설정할 수 있다.

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

const person = { name: 'Kim' };

sayName(); // 전역 객체에서 실행, 예를 들어 브라우저에서는 window.name을 출력
person.sayName(); // person 객체에서 실행, 출력: Kim
sayName.call(person); // 출력: Kim

2. 생성자 함수 내 this

생성자 함수를 사용하여 객체를 생성할 때, this는 새로 생성되는 객체를 가리킨다.
여기서 Person 생성자 함수 내부의 this는 kim 객체를 가리킨다.

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

const kim = new Person('Kim');
console.log(kim.name); // 출력: Kim

3. 객체 메소드 내 this

객체의 메서드를 호출할 때, this는 그 객체 자체를 가리킨다.
여기서 sayName 메소드 내부의 this는 person 객체를 가리킨다.

const person = {
    name: 'Kim',
    sayName: function() {
        console.log(this.name);
    }
};

person.sayName(); // 출력: Kim

4. Event Handler 내 this

이벤트 핸들러 내부에서 this는 이벤트가 발생한 요소를 가리킨다.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this); // button
});

5. Arrow Function 내 this

화살표 함수 내부에서 this는 상위 컨텍스트의 this를 그대로 계승받는다.

const obj = {
  method: () => {
    console.log(this); // Window
  }
};
obj.method();

this를 사용하는 이유

this를 사용하면 함수가 실행되는 환경에 따라 다양한 동작을 수행할 수 있다.
예를 들어, 객체의 메서드 내부에서 this를 사용하여 객체의 속성을 접근하거나, 이벤트 핸들러 내부에서 this를 사용하여 이벤트가 발생한 요소를 접근할 수 있다.

이처럼 JavaScript에서 this는 매우 유연하게 사용될 수 있으며, 이러한 특성 때문에 this를 올바르게 사용하는 것이 중요하며, 때로는 this의 값을 명시적으로 지정해주어야 하는 경우도 있다.