JavaScript this와 바인딩

🎯 자바스크립트의 this와 바인딩(bind, call, apply)

자바스크립트의 this는 다른 언어와 다르게 함수의 호출 방식에 따라 결정됩니다. 따라서 상황에 따라 가리키는 대상이 달라져서 많은 혼란을 줍니다.

📌 1. this의 기본 개념

this는 현재 실행 중인 코드의 문맥(context)을 의미합니다. 어디서, 어떻게 호출되었느냐에 따라 가리키는 객체가 달라져요.

console.log(this); 
// 브라우저에선 window 객체를 가리킵니다.

const person = {
  name: "홍길동",
  sayHello: function() {
    console.log(`안녕! 나는 ${this.name}`);
  }
};

person.sayHello(); // 안녕! 나는 홍길동

👉 객체의 메서드로 호출되면 this는 해당 객체를 가리킵니다.

⚠️ 2. this가 헷갈리는 상황

아래 코드를 보면 this가 undefined가 되거나 window를 가리켜 당황할 수 있습니다.

const person = {
  name: "철수",
  sayHello: function() {
    console.log(this.name);
  }
};

const greet = person.sayHello;
greet(); // undefined (브라우저에선 window.name)

🙄 왜 그럴까요? 객체에서 떼어내 호출하면 this는 window(또는 undefined in strict mode)가 되기 때문입니다.

💡 해결 방법: this를 고정시키자!

🔧 3. this를 바인딩하는 3형제 (bind, call, apply)

📌 bind()

this를 고정한 새로운 함수를 반환합니다. 즉시 실행되지는 않아요.

const greetBound = person.sayHello.bind(person);
greetBound(); // 철수

📌 call()

this를 지정한 상태로 함수를 즉시 호출합니다. 매개변수는 콤마로 전달합니다.

function introduce(age, hobby) {
  console.log(`${this.name}는 ${age}살이고 취미는 ${hobby}`);
}

const me = { name: "영희" };
introduce.call(me, 22, "독서");

📌 apply()

call과 거의 같지만 인자를 배열로 전달합니다.

introduce.apply(me, [22, "독서"])

🧠 4. 화살표 함수와 this

화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 사용합니다.

const obj = {
  name: "민수",
  greet: () => {
    console.log(this.name); // 🔥 undefined!
  }
};

obj.greet();

👉 화살표 함수는 메서드로 쓰지 않는 게 좋아요!

✅ 정리:

• this는 호출 방식에 따라 결정된다
• bind는 this 고정 후 나중에 실행
• call, apply는 즉시 실행
• 화살표 함수는 this를 가지지 않는다