[JavaScript] JavaScript의 `this` 키워드에 대한 이해

JavaScript에서 this 키워드는 함수나 메서드가 호출되는 컨텍스트에 따라 그 값이 달라진다.

 

간단히 말해, this는 현재 메서드나 함수가 실행되고 있는 객체를 참조한다. 하지만, 이 값은 코드가 실행되는 위치와 방식에 따라 다르게 동작한다.

 

이번 포스팅에서는 다양한 상황에서 this가 어떻게 동작하는지 살펴본다.

---

 

 

1. Global Context (전역 컨텍스트)

this가 함수 외부에서 사용되면 전역 개체를 참조한다.

브라우저 환경에서는 전역 객체가 window이고, Node.js환경에서는 global이다.

 

 

예시 (브라우저 환경):

console.log(this === window); // true

 

 

 

예시 (Node.js 환경):

// 전역 변수 정의
global.myGlobalVar = 'Hello, global!';

// 전역 변수 접근
setTimeout(() => {
    console.log(myGlobalVar); // 'Hello, global!' 출력
}, 1000);

// 전역 개체 속성에 액세스
console.log('Current version of Node.js:', process.version);

 

 

 

2. Function Context (함수 컨텍스트)

일반 함수 내에서 this는 호출되는 방시에 따라 달라진다.

strict mode에서는 this가 undefined로 설정되고, 그렇지 않으면 전역 객체를 참조한다.

 

 

예시 (브라우저 환경):

function myFunction() {
  console.log(this);
}
myFunction(); // strict 모드에서 'undefined', 일반 모드에서는 'window' 출력

 

 

예시 (Node.js 환경)

function testFunction() {
  return this === global;
}

console.log(testFunction()); // true

 

 

 

3. Method Context (메서드 컨텍스트)

객체 내의 메서드에서는 this가 메서드를 호출한 객체를 참조한다.

즉, 객체의 속성에 접근할 때 유용하게 사용할 수 있다.

 

const myObject = {
  name: 'John',
  greet() {
    console.log(this.name);
  }
};
myObject.greet(); // 'John' 출력

 

 

 

 

4. Arrow Functions (화살표 함수)

화살표 함수는 자체적인 this를 가지지 않는다. 대신 화살표 함수는 자신을 둘러싼 외부 컨텍스트에서 this를 상속받는다. 이 특성은 주로 이벤트 핸들러나 콜백 함수에서 유용하다.

 

예시:

const myObject = {
  name: 'John',
  greet: () => {
    console.log(this.name); // 'this'는 외부 컨텍스트를 참조하므로 'undefined' 출력
  }
};
myObject.greet(); // 'undefined' 출력

 

 

 

5. Event Handlers (이벤트 핸들러)

DOM 이벤트 핸들러 내에서 this는 이벤트를 발생시킨 DOM 요소를 참조한다. 이를 통해 이벤트가 발생한 대상에 대한 정보를 쉽게 얻을 수 있다.

 

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // 클릭된 요소를 출력
});

 

 

6. call(), apply(), bind() 메서드 사용

JavaScript에서는 call(), apply(), bind() 메서드를 사용하여 명시적으로 this 값을 설정할 수 있다. 이들 메서드는 함수의 실행 컨텍스트를 강제로 바꾸는 데 유용하다.

- call() 과 apply() 는 즉시 함수를 호출하고 this를 설정한다.

- bind()는 새로운 함수를 반환하며, 지정된 this를 사용하여 함수를 호출할 수 있다.

 

 

예시 (call() 사용):

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: 'John' };
greet.call(person); // 'Hello, John' 출력

 

 

예시 (bind() 사용):

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

const friendlyGreet = {
  message: 'Hello, friend!'
};

const strangerGreet = {
  message: 'Hello, stranger.'
};

// bind()을 사용하여 'this'가 friendlyGreet로 설정된 새 함수 만들기
const greetFriend = greet.bind(friendlyGreet);
greetFriend(); // 'Hello, friend!' 출력

const greetStranger = greet.bind(strangerGreet);
greetStranger(); // 'Hello, stranger.' 출력

 

 

7. 정리

this는 JavaScript에서 매우 중요한 키워드로, 그 값은 호출되는 컨텍스트에 따라 다르게 동작한다. 전역 컨텍스트, 함수 호출, 메서드 호출, 화살표 함수 등 다양한 상황에서의 동작 방식을 이해하면 this를 제대로 활용할 수 있다. 특히, call(), apply(), bind() 메서드를 사용하면 원하는 객체에 this를 명시적으로 바인딩할 수 있어 매우 유용하다.

 

이처럼 JavaScript에서 this를 잘 활용하면 코드를 더욱 유연하고 효율적으로 작성할 수 있다.

 

---

#References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

https://velog.io/@o1011/JavaScript-this-%EB%9E%80

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-this-%EC%B4%9D%EC%A0%95%EB%A6%AC

https://www.timegambit.com/blog/js/this

https://poiemaweb.com/js-this