자바스크립트에서 this의 의미 정리

자바스크립트에서의 this의 의미

자바스크립트에서 ‘this’는 함수나 메서드가 호출될 때 현재 컨텍스트를 참조하는 중요한 키워드입니다. 이 ‘this’는 그 함수가 어떻게 호출되었는지에 따라 다르게 해석되며, 그로 인해 몇 가지 혼란을 초래할 수 있습니다. 이러한 ‘this’에 대한 이해는 자바스크립트를 깊이 있게 다루는데 필수적입니다.

this의 기본 개념

기본적으로 자바스크립트에서 ‘this’는 함수가 호출될 때 그 호출 맥락에 따라 다른 객체를 참조합니다. 일반적으로 ‘this’는 전역 객체를 가리키고, 함수가 메서드로 호출될 경우에는 그 메서드가 속한 객체를 가리키게 됩니다. 예를 들어, 전역에서 선언된 함수로서 ‘this’를 확인하면, 이는 브라우저 환경에서는 ‘window’ 객체를 참조하게 됩니다.

this의 다양한 사용 사례

자바스크립트에서 ‘this’의 사용 사례는 다양합니다. 함수를 호출하는 방식에 따라 ‘this’가 가리키는 대상이 달라지므로, 이를 잘 이해해야 합니다. 다음은 ‘this’가 어떻게 다르게 작용하는지에 대한 몇 가지 예시입니다.

• 일반 함수 호출: 일반 함수로 호출될 경우 ‘this’는 전역 객체인 ‘window’를 참조합니다.
• 메서드 호출: 객체의 메서드를 호출하는 경우, ‘this’는 그 메서드를 소유한 객체를 가리킵니다.
• 생성자 함수 호출: ‘new’ 연산자를 통해 생성된 인스턴스에서 ‘this’는 해당 인스턴스를 가리킵니다.
• 콜백 함수 호출: 콜백 함수가 일반 함수로 호출되는 경우, ‘this’는 여전히 전역 객체를 참조합니다.
• apply, call, bind 메서드: 이 메서드들을 사용하면 ‘this’를 명시적으로 설정할 수 있습니다.

this의 동적 바인딩

자바스크립트에서는 ‘this’의 값이 호출 시점에 결정됩니다. 즉, 함수를 정의할 때 ‘this’가 어떤 객체에 바인딩될지는 정해져 있지 않으며, 함수를 호출할 때 결정됩니다. 이러한 특성은 자바스크립트를 다른 언어들과 구별하는 중요한 요소 중 하나입니다.

this와 메서드의 관계

메서드 호출 시 ‘this’는 해당 메서드를 소유한 객체를 참조합니다. 예를 들어, 다음과 같은 객체가 있다고 가정해 보겠습니다:

const person = {
  name: "홍길동",
  greet: function() {
    console.log("안녕하세요, " + this.name + "입니다.");
  }
};

여기서 person.greet()를 호출하면 ‘this’는 person 객체를 가리키게 되어 “안녕하세요, 홍길동입니다.”라는 메시지가 출력됩니다.

strict 모드에서의 this

자바스크립트에서는 strict 모드를 사용할 수 있으며, 이 경우 ‘this’의 작동 방식이 달라집니다. strict 모드에서는 일반 함수의 ‘this’가 ‘undefined’로 설정되어, 의도치 않은 오류를 방지할 수 있습니다. 아래의 예시는 이를 잘 보여줍니다:

'use strict';
function showThis() {
  console.log(this);
}
showThis(); // 출력: undefined

내부 함수와 this

내부 함수에서 ‘this’를 사용할 때는 주의가 필요합니다. 내부 함수는 일반 함수처럼 호출되므로, ‘this’가 전역 객체를 가리키게 됩니다. 이를 해결하기 위해 일반적으로 var that = this;와 같은 변수를 사용해 외부 함수의 ‘this’를 저장해둡니다.

const obj = {
  value: 42,
  showValue: function() {
    var that = this; // this를 that에 저장
    function inner() {
      console.log(that.value); // 외부의 this를 참조
    }
    inner();
  }
};
obj.showValue(); // 출력: 42

화살표 함수와 this

자바스크립트의 화살표 함수는 ‘this’ 바인딩을 가지지 않습니다. 즉, 화살표 함수 내의 ‘this’는 외부 스코프에서의 ‘this’를 그대로 상속받습니다. 따라서 화살표 함수는 내부 함수에서 ‘this’를 참조하는 편리한 방법이 될 수 있습니다.

const obj = {
  value: 42,
  showValue: function() {
    const inner = () => {
      console.log(this.value); // obj.value를 참조
    };
    inner();
  }
};
obj.showValue(); // 출력: 42

정리하며

‘this’는 자바스크립트의 핵심 개념 중 하나로, 함수의 호출 방식에 따라 다르게 해석됩니다. 따라서 이 개념에 대한 이해는 자바스크립트 프로그래밍에서 매우 중요합니다. 다양한 호출 방식과 내부 함수, 그리고 strict 모드에서의 차이점을 명확히 이해하고 활용하는 것이 중요합니다.

자바스크립트를 사용할 때마다 ‘this’의 맥락을 고려하여, 효과적으로 코드를 작성하는 것이 최선의 방법입니다.

자주 묻는 질문과 답변