🎯JavaScript에서 Arrow Functions vs. Regular Functions

Source: Dev.to

JavaScript 면접에서 가장 흔히 혼동되는 부분 중 하나는 화살표 함수와 일반 함수에서 this가 다르게 동작한다는 점입니다. this가 때때로 undefined가 나오는 이유가 궁금했다면, 이 가이드를 통해 명확히 이해할 수 있습니다.

1️⃣ 일반 함수 — this는 동적

일반 함수에서는 this의 값이 함수가 어떻게 호출되는지에 따라 결정되며, 정의된 위치와는 무관합니다.

const user = {
  name: 'Richa',
  greet: function () {
    console.log(this.name);
  }
};

user.greet(); // Richa

const greetCopy = user.greet;
greetCopy(); // ❌ undefined (or window.name in browsers)

왜 이런 일이 발생할까
this는 호출 컨텍스트에 의해 결정됩니다. 함수가 객체 참조를 잃으면 this는 더 이상 user를 가리키지 않게 됩니다.

2️⃣ 화살표 함수 — this는 렉시컬

화살표 함수는 자신만의 this를 갖지 않습니다. 대신 상위 스코프에서 this를 상속합니다.

const user = {
  name: 'Richa',
  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // ❌ undefined

왜 그런가?
화살표 함수가 전역 스코프에서 생성되었기 때문에, 전역 this를 상속받으며 user 객체를 가리키지 않습니다.

✅ 올바른 접근법

객체를 가리키는 this가 필요할 때는 일반 메서드를 사용하세요.

const user = {
  name: 'Richa',
  greet() {
    console.log(this.name);
  }
};

user.greet(); // ✅ Richa

3️⃣ 최적 활용 사례: 일반 함수 내부에서 화살표 함수 사용

화살표 함수는 메서드나 콜백 내부에서 사용할 때 빛을 발합니다. 같은 this 컨텍스트를 유지하기 때문입니다.

const team = {
  name: 'Frontend',
  members: ['Richa', 'Jane'],
  showMembers() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.showMembers();
// Richa is part of Frontend
// Jane is part of Frontend

forEach 안에 일반 함수를 사용했다면 this.name은 undefined가 되었을 것입니다.

면접 대비 답변

• 일반 함수는 동적 this를 가집니다 — 호출 방식에 따라 달라집니다.
• 화살표 함수는 렉시컬 this를 가집니다 — 상위 스코프에서 상속받습니다.

🎯 추가 팁

React 컴포넌트에서 this를 일관되게 유지하고 싶을 때 화살표 함수를 자주 사용하는 이유가 바로 이것입니다.

핵심 정리

화살표 함수는 단순히 코드를 짧게 쓰는 방법이 아니라 컨텍스트를 보존해 줍니다.

최종 생각

동적 this와 렉시컬 this의 차이를 이해하면 코드는 다음과 같이 됩니다:

• 더 깔끔하게 ✅
• 이해하기 쉬워 ✅
• 버그가 적게 ✅

화살표 함수는 단순히 문법을 절약하는 것이 아니라 컨텍스트를 절약합니다. ⚡