화살표 함수의 this와 일반 함수의 this는 결정 시점과 규칙이 다릅니다. 객체 메서드를 화살표 함수로 정의했을 때 흔히 발생하는 버그와, 반대로 콜백에서 화살표 함수가 유리한 경우를 각각 예를 들어 설명해주세요.

네, 화살표 함수와 일반 함수의 this 차이에 대해 설명드리겠습니다.

일반 함수는 this가 호출되는 시점에 동적으로 결정됩니다. 반면 화살표 함수는 this가 자신이 선언된 시점의 상위 스코프(lexical scope)를 그대로 따라갑니다.

객체 메서드를 화살표 함수로 정의하면 this가 예상과 다르게 동작하는 버그가 발생할 수 있습니다. 예를 들어, 객체의 프로퍼티를 변경하는 메서드를 화살표 함수로 만들면, 메서드 내부의 this는 객체 자체가 아닌 전역 객체나 undefined를 가리키게 되어 의도대로 동작하지 않습니다.

const obj = {
  value: 10,
  updateValue: () => {
    this.value = 20; // 여기서 this는 obj가 아닙니다.
  }
};
obj.updateValue();
console.log(obj.value); // 10 (변경되지 않음)

반대로, 콜백 함수에서 화살표 함수는 매우 유용합니다. setTimeout이나 이벤트 핸들러와 같이 콜백 함수 내부에서 상위 스코프의 this를 그대로 사용해야 할 때, 화살표 함수를 사용하면 bind나 that = this와 같은 번거로운 작업 없이 간결하게 코드를 작성할 수 있습니다.

const counter = {
  count: 0,
  start: function() {
    setTimeout(() => {
      this.count++; // 여기서 this는 counter 객체를 올바르게 가리킵니다.
      console.log(this.count);
    }, 1000);
  }
};
counter.start(); // 1