[240423 TIL] 화살표함수, 일반함수에서 this

오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다.

안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다:

1. 일반 함수

일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다:

• 객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다.
• 단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global object)를 가리킵니다.
• 생성자 함수로 사용될 때: this는 새로 생성된 객체를 가리킵니다.
• call, apply, bind를 사용할 때: 이 메소드들은 this의 값을 명시적으로 설정할 수 있습니다.

2. 화살표 함수

화살표 함수에서 this는 전통적인 방식으로 바인딩되지 않습니다. 대신, 화살표 함수의 this는 함수가 생성된 그 순간의 상위 스코프(lexical context)의 this 값으로 설정됩니다. 화살표 함수는 this 바인딩을 자체적으로 가지지 않기 때문에, this 바인딩을 변경할 수 있는 call, apply, bind 메소드의 영향을 받지 않습니다. 화살표 함수는 다음과 같은 경우에 유용합니다:

• 메소드 내의 콜백 함수: 객체의 메소드 안에서 콜백 함수로 사용될 때, 화살표 함수를 사용하면 메소드의 this 값을 계속해서 유지할 수 있습니다.
• 함수 체인: 여러 함수가 체인으로 연결되는 경우, 화살표 함수를 사용하면 상위 스코프의 this를 유지할 수 있어서 코드가 더 간결하고 이해하기 쉬워집니다.

예제

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  },
  waitAndGreet: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}`); // 일반 함수: 'this'는 전역 객체 또는 undefined
    }, 1000);

    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // 화살표 함수: 'this'는 person 객체
    }, 1000);
  }
};

person.greet(); // "Hello, Alice"
person.waitAndGreet(); // 출력: "Hello, undefined" (non-strict mode) or TypeError (strict mode), "Hello, Alice"

 

위 예제에서 waitAndGreet 메소드 안에서 일반 함수와 화살표 함수를 비교했을 때 this의 차이를 확인할 수 있습니다. 이처럼 두 유형의 함수는 사용하는 상황에 따라 선택해야 합니다. 화살표 함수는 this를 둘러싼 문맥을 유지할 필요가 있을 때 매우 유용합니다.