[JS] 화살표 함수는 성능이 안좋다?

JavaScript 화살표 함수의 성능이 함수선언식보다 좋지 않다?

프로그래머스 문제를 푸는 중에, 1가지 흥미로운 문제점을 발견했다.
분명히 기능구현은 다 했는데, 계속해서 시간초과가 발생하기에 무슨 문제인지 살펴보았다.
구글링을 통해서 정답을 확인해봐도 똑같은 부분에서 시간초과가 발생해서 코드의 첫 줄부터 살펴보기로 했다.
그러던 와중, 1번째 줄에 화살표 함수와 함수 선언식의 차이를 발견하게 되었다.
‘에이,, 설마 이게 문제겠어?’라고 안일하게 생각했지만, 그것이 정답이었다.

화살표 함수 사용 결과 함수 선언식 사용 결과

Then, why?

JavaScript에서는 코드가 실행되기 전에 컴파일이 필요한 다른 언어와 달리, 런타임에 컴파일이 된다. 이는 코드를 효율적으로 해석하고 처리하기 위한 JavaScript만의 언어적 특성이다. 그리고 런타임-컴파일 엔진 특성 때문에 JavaScript로 작성된 코드는 동일한 결과가 반환 될지라도, 내부 로직이 다양하게 구현될 수 있다.

Compare

function test() {
  return "test";
}

const test = () => {
  return "test";
};

실제 Chrome의 개발자도구 환경에서 측정하였다. console.time(), console.timeEnd() 메서드를 통해서 시간을 구했으며, 이는 정확하지 않을 수 있다. 결과는 아래와 같다.

화살표 함수 사용 결과 함수 선언식 사용 결과

이후 4차례의 실험 결과, 아래와 같이 정리가 되었다.

	화살표 함수	함수 선언식
1차	0.010986328125 ms	0.006103515625 ms
2차	0.015869140625 ms	0.004150390625 ms
3차	0.014892578125 ms	0.0029296875 ms
4차	0.006103515625 ms	0.004150390625 ms
5차	0.014892578125 ms	0.0029296875 ms

결론

이런 간단한 코드를 수행하는데에도, 화살표 함수가 더 시간이 오래걸리는 것을 볼 수 있다. 화살표 함수와, 특히, 암시적 반환(Implicit Return)을 사용하는 화살표 함수가 더 많은 컴파일 시간이 소요된다는 점에서 함수 선언식보다 더 긴 시간이 소요될 수 있다. 대규모 개발 프로젝트에서는, 특히 반복문 내에 포함된 경우에는 눈에 띌 정도의 성능 저하가 발생할 수 있다.

그렇다고 개발자들이 화살표 함수 사용을 멈추어야 하는가?
그것에 대한 내 대답은 “아니오”이다.
프로젝트 내 컨벤션도 존재할 것이고, 대다수의 개발자들은 코드를 최소화하기 위해 노력한다. 또한, 배포 전 코드를 컴파일을 하고, 파일을 최소화 하다보면 자연스럽게 이런 사소한 성능 이슈는 상쇄시킬 수 있다고 생각한다.
이런 측면에서 보면 이 정도의 문제는 나처럼 알고리즘 문제를 푸는 과정이 아니고서야 아주 사소한 문제로 보인다.

오히려 잘못 작성되거나 잘못 최적화 된 반복문 등의 기능들이 화살표 함수보다 더 많은 성능 저하를 일으킬 가능성이 높다.

문제를 풀면서 억울하고, 답답한 부분이 많았는데, 오히려 이렇게 찾아보면서 속이 시원해져서 다행인 것 같다. 화살표 함수에 대한 반감이 생겼었는데, 보다 보니 그러려니 싶다.

Reference

Velog: 코린이 기욱쓰
DEV: Using arrow functions might be costing you performance