자바스크립트에서 일반 함수와 Arrow 함수의 차이점, 언제 어떤 문법을 써야 하는가
(jrsinclair.com)-
자바스크립트 함수 선언은
function키워드를 사용한 선언, 함수 표현식, 화살표 함수 등 다양한 방식이 존재함 - 함수 선언은 호이스팅이 적용되어 코드의 어느 위치에서든 참조 가능함
- Arrow(화살표) 함수는 간결한 문법이 장점이지만, this/arguments/super 바인딩이 없음 등 중요한 차이점이 있음
- 생성자 함수, 제너레이터, 메서드에는 화살표 함수 사용이 적합하지 않음
- 간단한 콜백이나 익명 함수에는 화살표 함수가 더 적합함
Function Declarations, Function Expressions, and Arrow Functions
- 자바스크립트에서는 함수 선언(Statement), 함수 표현식(Expression), 화살표 함수(Arrow Function) 세 가지 방식으로 함수를 정의할 수 있음
- 함수 선언은
function isVowel(chr) { ... }처럼 이름을 직접 바인딩하며, 코드의 어디서든 참조 가능(호이스팅) 함. 스택 트레이스 및 디버깅 시 함수명이 명확하게 표시됨 - 함수 표현식은
const takeWhile = function(predicate, arr) { ... }처럼 변수에 익명 함수를 할당하는 형태 - 함수 표현식에도 내부적으로 이름을 줄 수 있으나, 이름은 외부 스코프에 바인딩되지 않고, 주로 스택 트레이스에서 에러 추적에 사용됨
Hoisting and Naming
- 함수 선언문은 자바스크립트 엔진에 의해 호이스팅되어, 선언 이전에 호출해도 동작함
- 익명 함수 표현식은 변수 할당 이후에만 호출 가능함
- 디버깅을 위해 함수에 이름을 명시적으로 부여하는 것이 스택 트레이스에서 유리할 수 있음
Arrow Functions
-
짧고 간결한 문법: function 키워드 없이
(매개변수) => { ... }형태로 작성. - 항상 익명 함수임 (단, 변수에 할당해서 이름처럼 사용 가능)
- 표현식(expression)으로만 사용 가능, 문(statement) 이 아님
- this/arguments/super 바인딩 없음: 함수 선언/표현식과는 다르게, 상위 스코프의 this를 캡처함
- 단일 표현식의 경우 중괄호와 return 생략 가능, 매개변수가 1개면 괄호도 생략 가능함
- 생성자 사용 불가: 화살표 함수는 new 키워드로 호출할 수 없으며, 생성자 함수로 동작하지 않음
- 제너레이터 불가: yield 사용 불가, 제너레이터 함수로 만들 수 없음
-
코드 예시:
const sum = (a, b) => a + b; const square = x => x * x;
Practical Example: this와 생성자, 제너레이터
- 일반 함수와 화살표 함수의 this 처리 방식 차이 예시 제공
- 객체 내에서 메서드로 쓸 때, 일반 함수는 this가 객체 자신을 가리키지만, 화살표 함수는 undefined 또는 외부 스코프의 this를 가리킴
- 생성자 함수를 화살표 함수로 정의 시 TypeError 발생
- 제너레이터 함수는 반드시 function* 문법 사용 필요
어떤 함수 문법을 언제 선택해야 할까?
- 제너레이터(yield 사용) 필요 → function* 사용
- this를 활용해야 함 → function 키워드 또는 클래스 메서드 사용
- 호이스팅이 필요하거나 상위 수준의 가독성을 원함 → 함수 선언문 사용
- 위 조건 해당 없으면 → 화살표 함수로 더 간결하게 작성하는 것이 유리
결론
- 자바스크립트 함수는 사용 목적, this 필요 여부, 생성자/제너레이터 여부에 따라 문법 선택
- 일상적 콜백/간단 함수에는 화살표 함수가 베스트
- 객체 메서드/생성자/제너레이터에는 function 문법 사용 필요
- 호이스팅이나 선언 순서 자유도가 필요하면 함수 선언문이 유리