[Deep Dive CS - Q16] 화살표 함수를 지양해야 되는 상황

Q16. 그렇다면 화살표 함수를 '절대 쓰면 안 되는' (혹은 지양해야 하는) 상황 3가지를 말해보세요.

화살표 함수는 '기능이 추가된' 함수가 아니라, '기능을 뺀(Diet)' 함수입니다. 
this, arguments, super, new 기능을 제거하여 가볍고(Light), 순수로직(Pure Logic) 처리에 집중하도록 설계되었으므로, 객체 지향적인 기능(메서드, 생성자)이 필요할 땐 스지 않는 것이 맞습니다. 

 

🚫 1. 객체의 메서드로 정의할 때 

가장 흔하게 저지르는 실수입니다. 객체의 메서드는 "나를 호출한 객체(obj)"를 가리켜야 하는데, 화살표 함수는 태생적으로 그게 불가능합니다.

const user = {
  name: "Senior Dev",
  score: 100,
  
  // ❌ Bad: 화살표 함수 사용
  printScore: () => {
    // 화살표 함수의 this는 선언된 위치(전역)의 상위 스코프를 따름
    // window.name, window.score를 찾으려 함 -> undefined
    console.log(this.name, this.score); 
  },
  
  // ✅ Good: 일반 함수 (ES6 축약형)
  printName() {
    // 메서드로 호출 시 this는 점(.) 앞의 user 객체
    console.log(this.name); 
  }
};

user.printScore(); // undefined undefined
user.printName();  // "Senior Dev"

 

화살표 함수는 this 바인딩을 하지 않습니다. 상위 스코프를 그대로 가져다 쓰는데, 객체 리터럴 { ... }은 스코프를 생성하지 않습니다. 따라서 printScore의 상위 스코프는 user 객체가 아니라 전역(Window)이 되어버립니다.

 

 

🚫 2. 생성자 함수(Constructor)로 사용할 때

화살표 함수는 객체를 찍어내는 공장(Constructor) 역할을 할 수 없습니다.

const Person = (name) => {
  this.name = name;
};

// ❌ Error: Person is not a constructor
const me = new Person("Kim");

 

자바스크립트 함수는 내부적으로 [[Call]](함수 실행)과 [[Construct]](인스턴스 생성)라는 두 가지 내부 메서드를 가집니다.

• 일반 함수: [[Call]], [[Construct]] 둘 다 있음 -> 그냥 호출도 되고, new로도 호출 됨.
• 화살표 함수: [[Construct]]가 아예 제거됨. -> 오직 실행만 가능. ⭐️ (prototype 프로퍼티 만들지 않음)
• 설계 의도: new를 쓰지 못하게 막음으로써, 화살표 함수는 prototype 프로퍼티를 가질 필요가 없어졌습니다. 덕분에 일반 함수보다 메모리를 덜 차지하는 가벼운 함수가 되었습니다.

 

🚫 3. addEventListener의 콜백 함수 

DOM 이벤트 핸들러 내부에서 this는 전통적으로 "이벤트가 발생한 그 요소(currentTarget)"를 가리킵니다. 하지만 화살표 함수를 쓰면 이 규칙이 깨집니다.

const button = document.getElementById('myBtn');

// ❌ Bad: 화살표 함수
button.addEventListener('click', () => {
  // 여기서 this는 window입니다.
  // TypeError: Cannot read properties of undefined (reading 'add')
  this.classList.add('active'); 
});

// ✅ Good: 일반 함수
button.addEventListener('click', function() {
  // 여기서 this는 button 요소 자체입니다.
  this.classList.add('active');
});

 

addEventListener는 내부적으로 콜백을 실행할 때 .call(event.currentTarget) 같은 방식으로 this를 바인딩해줍니다.

하지만 화살표 함수는 "외부에서 주입하는 this를 무시하고, 내 태생(Lexical Scope)의 this만 고집"하기 때문에 바인딩이 먹히지 않는 것입니다.

TIP) 만약 화살표 함수를 꼭 써야 한다면 this 대신 e.currentTarget을 사용하면 됩니다.