[JavaScript] this

📚 this란 무엇인가요?

자바스크립트에서 this는 현재 실행 컨텍스트의 객체를 가리키는 키워드예요. 함수나 메서드가 어떻게 호출되었느냐에 따라 this의 값이 결정돼요.

 

this를 사용하는 것은 마치 레스토랑에서 웨이터가 주문을 받는 고객을 정확히 알아야 하는 것과 비슷해요. 여기서 웨이터는 자바스크립트 함수이고, 고객은 this가 가리키는 객체예요. 어떤 테이블(컨텍스트)에서 호출되었는지에 따라, 웨이터(함수)는 다른 고객(this)에게 서비스를 제공하게 돼요.

 

---

🖥️ this의 사용

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

• 전역 컨텍스트에서 this는 전역 객체를 가리켜요. 브라우저에서는 window, Node.js에서는 global 객체가 돼요.

console.log(this.document === window.document); // 브라우저에서 true
console.log(this === global); // Node.js에서 true

이 예제에서 'this.document'는 전역 객체인 'window'의 'document' 속성과 같습니다.
이는 'this'가 전역 컨텍스트에서 전역 객체를 참조함을 보여줍니다.

2. 함수 컨텍스트에서의 this

• 함수 내에서 this의 값은 함수가 어떻게 호출되었는지에 따라 달라져요.
  • 일반 함수에서 this는 전역 객체를 가리켜요.
  • 메서드로서 호출된 함수에서 this는 메서드를 호출한 객체를 가리켜요.

function show() {
  console.log(this === window); // true
}

const obj = {
  show: function() {
    console.log(this === obj); // true
  }
};

show();
obj.show();

 

---

🤔 this의 바인딩

this의 바인딩은 함수가 호출되는 방식에 따라 결정돼요. 화살표 함수와 bind, call, apply 메서드를 사용하여 this의 바인딩을 명시적으로 설정할 수 있어요.

1. 화살표 함수에서의 this

• 화살표 함수는 자신을 포함하는 외부 함수의 this 값을 상속받아요.

const obj = {
  show: function() {
    const check = () => {
      console.log(this === obj); // true
    };
    check();
  }
};

obj.show();

2. bind 메서드

• bind 메서드는 함수의 this 값을 영구적으로 바인딩할 수 있게 해 줘요.

const person = {
  name: 'John',
  greet: function() { console.log(`Hello, ${this.name}`); }
};

const greetJohn = person.greet.bind(person);
greetJohn(); // "Hello, John"

여기서 'greetJohn' 함수는 'person.greet' 함수에 'person' 객체를 'this'로 바인딩한 새로운 함수입니다.
'bind'를 사용함으로써, 'greetJohn'을 호출할 때마다 'this.name'은 항상 'person.name'을 참조합니다.

3. call과 apply 메서드

• call과 apply 메서드는 함수를 즉시 호출하면서 this의 값을 설정할 수 있어요. call은 개별 인자를, apply는 인자 배열을 사용해요.

function introduce(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

const person = { name: 'Jane' };
introduce.call(person, 'Hello', '!'); // "Hello, my name is Jane!"
introduce.apply(person, ['Hi', '.']); // "Hi, my name is Jane."

이 예제에서 'introduce' 함수는 'call'과 'apply'를 사용하여 'person' 객체의 'name' 속성을 'this.name'으로 참조하도록 합니다.
'call'과 'apply'의 차이는 인자를 전달하는 방식에 있습니다.

 

---

🚨 주의할 점

• 화살표 함수에서는 this가 함수 자체의 컨텍스트를 가지지 않으므로, this를 화살표 함수 내에서 사용할 때 주의해야 해요.
• 엄격 모드(use strict)에서 일반 함수 내의 this는 undefined가 돼요.

 

---

📖 결론

this는 자바스크립트에서 매우 중요한 개념으로, 함수나 메서드가 실행되는 현재 컨텍스트에 대한 참조를 제공해요. this의 바인딩은 함수의 호출 방식에 따라 달라지므로, 다양한 상황에서 this가 어떻게 작동하는지 이해하는 것이 중요해요.

 

---

🔗 추가 정보

• 자바스크립트의 this에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.