화살표 함수로 콜백 this 해결하기

시작하기에 앞서

최근에 콜백 함수 안에서 this가 바뀌는 문제를 겪었고,
이 포스팅을 통해 화살표 함수가 왜 필요한지를 정확히 이해하려 한다.

this 키워드는 자바스크립트에서 헷갈리는 개념 중 하나이다.
특히 콜백 함수에서 this가 바뀌어 의도치 않은 에러가 발생하곤 한다.
ES6의 화살표 함수(Arrow Function)를 사용하면 이러한 문제를 해결할 수 있다.

---

일반 함수와 화살표 함수의 this 차이

• 일반 함수는 호출 방식에 따라 this가 달라지는 함수이다.
• 화살표 함수는 선언된 위치의 this를 그대로 유지하는 함수이다.

글로 보면 뭔말인지 모름!! 예시 고고링

---

1. 일반 함수 (문제 발생)

일반 함수는 콜백으로 전달될 때 this가 전역 객체를 가리키게 된다.

const user = {
  name: '민주',
  printName() {
    console.log(`나는 ${this.name}!`);
  },
};

// Case 1: 직접 호출 → 정상 동작
user.printName(); 
// "나는 민주!"

// Case 2: 콜백으로 전달 → this 바뀜
setTimeout(user.printName, 1000); 
// "나는 undefined!"

원인: setTimeout이 함수를 호출할 때 this를 minju가 아닌 전역 객체로 설정하기 때문이다.

---

2. 화살표 함수 (문제 해결)

화살표 함수는 this를 정의 시점의 컨텍스트에 고정한다. 따라서 콜백으로 전달해도 this가 유지된다.

const user = {
  name: '민주',
  showName: () => {
    console.log(`나는 ${user.name}!`);
  },
};

// Case 1: 직접 호출
user.showName(); 
// "나는 민주!"

// Case 2: 콜백 전달
setTimeout(user.showName, 1000); 
// "나는 민주!"

결과: showName은 인스턴스 생성 시 this가 고정된다. 따라서 콜백으로 실행해도 this는 변하지 않는다.

---

결론

• 화살표 함수는 예측 불가능한 this 문제를 해결하기 위한 방법이다.

• 특히 setTimeout, map, filter 같은 콜백에서 안전하게 동작한다.

• 코드가 단순해지고 버그 발생 가능성이 줄어든다.

그동안 화살표 함수는 문법이 짧고 간결해서 그냥 편하게 써왔다.
앞으로는 단순한 문법 편의가 아니라, this 바인딩을 의식하며 사용해야겠다❗️