MDN에 따르면, 화살표 함수(arrow function)는 일반 함수 표현식보다 문법적으로 간결한 대안이지만, this, arguments, super, new.target 키워드에 대한 자체 바인딩을 갖지 않는 특징이 있습니다. 따라서 화살표 함수는 메서드로 사용하기에 적합하지 않으며, 생성자로도 사용할 수 없습니다.
자바스크립트에서 일반 함수와 화살표 함수 사이에는 크게 세 가지 미묘한 차이가 존재합니다. 하나씩 자세히 살펴보겠습니다.
1. 자체적인 this 바인딩이 없음
화살표 함수는 자신만의 this 값을 가지지 않습니다. 화살표 함수 내부에서 this를 참조하면 항상 외부(둘러싸고 있는) 스코프에서 상속받은 값이 사용됩니다.
예제 코드
this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)실행 결과
100 150 150
위 예제를 보면 화살표 함수는 자신의 스코프 밖에 있는 this 객체의 값을 직접 변경했습니다. 반면 일반 함수는 자신만의 this 컨텍스트 내부에서만 변경이 이루어졌기 때문에 외부 값에는 영향을 주지 않았습니다.
2. arguments 객체가 없음
자바스크립트에서 함수 내부의 arguments 객체는 함수에 전달된 모든 인수를 담고 있는 특수한 객체입니다. 그런데 this와 마찬가지로, 화살표 함수는 자체적인 arguments 객체 바인딩을 갖지 않습니다. 대신 화살표 함수 내부에서 참조되는 arguments는 외부 스코프의 것에 바인딩됩니다.
만약 가변 인수를 처리해야 한다면 화살표 함수에서는 나머지 매개변수(rest parameter, ...args)를 활용하는 것이 좋은 대안입니다.
3. 호출은 가능하지만 생성은 불 가능(Callable하지만 Constructable하지 않음)
함수가 생성 가능(constructable)하다면 new 키워드와 함께 호출할 수 있습니다. 즉, new User()처럼 새로운 객체 인스턴스를 만들 수 있다는 의미입니다. 반면 함수가 호출 가능(callable)하다면 new 없이 일반적인 방식으로 호출할 수 있습니다.
- 함수 선언문 또는 함수 표현식으로 만든 일반 함수: 호출 가능 + 생성 가능
- 화살표 함수(및 메서드): 호출 가능만 가능
- 클래스(class) 생성자: 생성 가능만 가능
호출할 수 없는 함수를 호출하거나, 생성할 수 없는 함수를 new로 생성하려고 하면 런타임 에러가 발생합니다.
에러 예시
let arrowFunc = () => {}
new arrowFunc()위 코드를 실행하면 다음과 같은 에러가 발생합니다:
TypeError: arrowFunc is not a constructor
정리
화살표 함수는 간결한 문법 덕분에 콜백이나 짧은 유틸리티 함수 작성에 매우 유용합니다. 하지만 this와 arguments에 대한 독립적인 바인딩이 없고 생성자로 사용할 수 없다는 점을 반드시 기억해야 합니다. 객체의 메서드를 정의하거나 생성자 패턴이 필요한 경우에는 일반 함수 또는 클래스를 사용하는 것이 올바른 선택입니다.