[JS] 자바스크립트의 this?

JavaScript에서 this 키워드는 가장 혼란스러우면서도 중요한 개념 중 하나입니다. this는 함수가 호출되는 맥락(context)에 따라 값이 달라지며, 이를 올바르게 이해하고 사용하는 것이 JavaScript 코드를 작성할 때 매우 중요합니다.

이번 포스팅에서는 this가 무엇인지, 다양한 상황에서 어떻게 동작하는지, 그리고 그 사용법을 명확히 이해하기 위한 실전 예시들을 함께 알아보겠습니다.

 

 

JavaScript의 this - 커버 이미지

 

JavaScript - this

 

목차

1. this란?

2. this의 다양한 동작 상황

3. 화살표 함수와 this

4. 주의 사항 - 콜백 함수에서 this

5. this의 명시적 바인딩

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

this란?

this는 함수가 어디서 어떻게 호출되었느냐에 따라 다른 객체를 참조하는 특수한 키워드입니다. 이는 다른 언어의 this와는 조금 다르게 동작할 수 있기 때문에 혼란을 줄 수 있습니다. 하지만 기본적으로 함수가 호출된 맥락을 가리킨다고 생각하면 됩니다.(함수 호출 방식에 의해 동적으로 결정)

 

this의 다양한 동작 상황

1) 전역 컨텍스트에서의 this

전역 범위에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 전역 객체이며 this가 될 것입니다. (strict 모드에서는 undefined)

console.log(this); // 브라우저 환경 : Winodw 객체 출력

 

2) 객체 메서드에서의 this

객체 메서드에서 this는 해당 메서드를 소유하는 객체를 가리킵니다. (아래 코드에서 this는 user 객체를 참조합니다.)

const user = {
  name: 'Kim',
  greet() {
    console.log(this.name);  // this는 user 객체를 가리킴
  }
};

user.greet();  // 'Kim' 출력

 

3) 함수에서의 this

일반 함수에서 this는 전역 객체를 가리킵니다.

function showThis() {
  console.log(this);  // 브라우저 환경에서는 window, 엄격 모드에서는 undefined
}

showThis(); // Winodw 객체 출력

 

4) 생성자 함수에서의 this

생성자 함수에서 this는 새롭게 생성된 객체를 가리킵니다. 생성자 함수는 일반적으로 new 키워드를 사용해 호출됩니다.

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

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

 

 

화살표 함수와 this

화살표 함수(Arrow function)는 일반 함수와 this를 처리하는 방식이 다릅니다. 화살표 함수에서 this는 자신이 정의된 위치의 this를 상속받습니다. 즉, 상위 스코프의 this를 사용합니다.

const user = {
  name: 'Kim',
  outerFunc: function() {
    const innerArrowFunc = () => {
      console.log(this.name);  // 상위 스코프인 outerFunc 함수의 this를 참조
    };
    innerArrowFunc();
  }
};

user.outerFunc();  // 'Kim' 출력

 

위의 예시에서 화살표 함수의 this는 상위 스코프인 outerFunc의 this를 참조합니다. 이때 outerFunc의 this는 자신을 소유하는 객체를 가리킵니다. 즉, this가 상위 스코프의 this를 상속받아 user를 가리키게 됩니다.

 

주의 사항 -  콜백 함수에서 this

객체의 메서드를 콜백 함수로 전달할 때, this가 원래 의도한 객체를 가리키지 않을 수 있습니다. 이는 메서드가 다른 컨텍스트에서 호출되기 때문입니다.

const user = {
  name: 'Kim',
  showName() {
    console.log(this.name);
  },
};

// 콜백 함수로서의 showName
function delayedShow(callback) {
  setTimeout(callback, 500);
}

// 문제 발생: this가 user를 가리키지 않음
delayedShow(user.showName); // undefined 출력

 

콜백 함수는 user 객체의 컨텍스트와는 관련이 없기 때문에 this가 undefined가 되어 user.name이 출력되지 않습니다.

 

 

this의 명시적 바인딩

1) bind 메서드

bind는 새로운 함수를 반환하며, 이 함수는 지정한 this와 함께 호출됩니다.

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

const user = {
  name: 'Kim',
};

const bound = showName.bind(user); // user를 this로 바인딩하여 새로운 함수 반환
bound(); // 'Kim'

 

2) call 메서드

함수에 인자를 개별적으로 전달하여 호출하며, 첫 번째 인자로 this를 설정합니다.

function showName(a, b) {
  console.log(this.name, a, b);
}

const user = {
  name: 'Kim',
};

showName.call(user, 'Kang', 'Lee'); // Kim Kang Lee : 첫 번째 인자인 user를 this로 바인딩

 

3) apply메서드

함수에 인자를 배열로 전달하여 호출하며, 첫 번째 인자로 this를 설정합니다.

function showName(a, b) {
  console.log(this.name, a, b);
}

const user = {
  name: 'Kim',
};

showName.apply(user, ['Kang', 'Lee']); // Kim Kang Lee : 첫 번째 인자인 user를 this로 바인딩

 

 

 

 

자바스크립트에서 this는 함수 호출 방식에 따라 동적으로 변하는 중요한 개념입니다. 이를 올바르게 이해하면 코드를 보다 직관적이고 효율적으로 작성할 수 있습니다.

• 전역: this는 전역 객체(브라우저에서는 Window)를 가리킴.
• 메서드: this는 해당 메서드를 호출한 객체를 가리킴.
• 함수: 전역 객체 또는 undefined (엄격 모드) 를 가리킴.
• 생성자: this는 새로 생성된 객체를 가리킴.
• 화살표 함수: this는 상위 스코프의 this를 상속받음.

자바스크립트에서 this는 호출할 때를 기준으로 판단하시면 더 쉽게 이해하실 수 있습니다!

•  func() : this = (browser = window, node = undefined)
• obj.func() : this = obj
• func.bind(obj) : this = obj

 

 

추천글

 

2024.09.19 - [개발 공부 일지/JavaScript] - [JS] 얕은 복사, 깊은 복사

[JS] 얕은 복사, 깊은 복사

2024.09.13 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트 함수 - 스코프

[JS] 자바스크립트 함수 - 스코프