화살표 함수와 전통 함수: 사용 사례 및 주의 사항

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, ES6 이상 기술 습득자, 콜백/이벤트 처리 관련 작업자

핵심 요약

• 화살표 함수는 => 연산자를 사용해 간결한 구문을 제공하며, this가 외부 범위에서 상속됨.
• 전통 함수는 function 키워드로 정의되며, this를 동적으로 바인딩하고 생성자로 사용 가능.
• 화살표 함수는 콜백, 이벤트 리스너, 프로미스 체인에서 유리하고, 전통 함수는 메서드/생성자, arguments 객체 필요 시 적합.
• 주의 사항: 화살표 함수는 this 상속, arguments 객체 미지원, 생성자 사용 불가 등의 제한이 있음.

섹션별 세부 요약

1. **구문 차이**

• 화살표 함수: const add = (a, b) => a + b;
• 전통 함수: const add = function(a, b) { return a + b; };
• 화살표 함수는 단일 라인 시 중괄호와 return 생략 가능.

2. **this 바인딩**

• 화살표 함수: 외부 범위의 this를 상속 (예: class Counter 내 이벤트 리스너).
• 전통 함수: 호출 방식에 따라 this 동적으로 바인딩 (예: setTimeout 내 this.value).

3. **arguments 객체**

• 전통 함수: arguments 객체로 파라미터 접근 가능.
• 화살표 함수: arguments 미지원, 대신 ...args 사용 (예: (...args) => console.log(args)).

4. **생성자 사용**

• 전통 함수: new 키워드로 객체 생성 가능 (예: new Person('Alice')).
• 화살표 함수: new 사용 시 TypeError 발생.

5. **호이스팅(Hoisting)**

• 전통 함수: 선언 전 호출 가능 (예: myFunc() before function myFunc()).
• 화살표 함수: 호이스팅 불가.

6. **사용 사례**

• 화살표 함수: 배열 메서드(map, filter), 이벤트 리스너, 프로미스 체인, 단일 라인 유틸리티.
• 전통 함수: 객체/클래스 메서드, 생성자, arguments 필요 시, 디버깅용 명명된 함수.

7. **주요 함정**

• this 오용: 화살표 함수를 객체 메서드로 사용 시 this가 전역 범위를 가리킴.
• arguments 미지원: 화살표 함수에서 arguments 사용 시 ReferenceError.
• 생성자 사용 불가: new 키워드로 화살표 함수 호출 시 TypeError.

8. **최적화 팁**

• this 상황 고려: this가 필요하면 전통 함수, this 고정 시 화살표 함수 사용.
• 가독성 우선: 간결성보다 명확성이 중요할 경우 전통 함수 사용.
• 테스트: this 또는 arguments 관련 예외 시나리오 테스트.
• 도구 활용: ESLint/TypeScript로 this 관련 오류 사전 검출.

결론

• 화살표 함수는 간결성과 this 고정이 필요한 경우, 전통 함수는 메서드/생성자, arguments 필요 시 사용.
• this 바인딩, arguments 객체, 생성자 사용 여부를 기준으로 선택하며, 코드 가독성과 디버깅 용이성을 고려해야 함.