서론
화살표 함수(Arrow Function)은 편리하고, 뛰어난 가독성을 보여주는 ES6의 대표문법입니다. 하지만 이를 남용하는 것은 코드의 성능을 떨어뜨릴 수도 있습니다.
Why Bad?
Javascript에서는 코드가 실행되기 전에 컴파일이 필요한 다른 언어와 달리 런타임에 컴파일이 됩니다. 이는 코드를 효율적으로 해석하고 처리하기 위한 자바스크립트만의 언어적 특성입니다. 그리고 이런 런타임-컴파일엔진 특성때문에 자바스크립트로 작성된 코드는 동일한 결과가 반환 될지라도 내부로직이 다양하게 구현될 수 있습니다!
비교
테스트를 위해 다음과 같이 동일한 결과를 보여주는 '다른 형식'의 함수들을 작성했습니다.
// 기존함수
function foo(bar) {
return bar
}
// 화살표 함수
const foo = bar => {
return bar
}
// 화살표 함수(축약형)
const foo = bar => bar함수 실행시간 결과
모든 테스트는 5회 실행되었으며 NodeJ에서 실행되는 Google의 V8 엔진을 사용하여 평균값(median)을 측정했습니다.
기존 함수 : 0.0746ms
화살표 함수 : 0.0954ms
화살표 함수(축약형) : 0.105ms
결론
화살표 함수, 특히 축약형 화살표 함수는 기존 함수에 비해 실행하는데 더 많은 시간이 걸립니다. 암시적 반환(Implicit Return)은 더 많은 컴파일 시간이 소요된다는 점에서 화살표 함수 보다 더 긴 실행시간이 소요됩니다. 이 결과를 종합해보자면 더 큰 스크립트에서는 특히 루프에 포함 된 경우 다수의 화살표 함수의 사용은 코드 실행 시 눈에 띄는 성능 저하를 일으킬 수도 있습니다.
그렇다면 프론트엔드 개발자들은 지금 당장 화살표 함수 사용을 중단해야 할까요?
답은 아니오입니다. 대다수의 프로그래머들은 코드의 생산성을 위해 코드를 최소화하기를 바랍니다. 그래서 많은 프로그래머들이 호환성을 생각해 코드를 기존 함수로 미리 컴파일하여 실제 사용시 성능 손실을 무효화합니다.
그러므로 정돈되지 않은 초기 개발단계에서 속도 저하가 발생하는 일부 경우에만 화살표 함수를 성능저하의 원인으로 추론할 수 있습니다. 때론 최적화되지 않은 루프가 몇 개의 화살표 함수보다 더 많은 성능 비용을 발생시킬 수 있음을 생각해야 합니다.
원본 출처 : https://dev.to/georgecoldham/using-arrow-functions-might-be-costing-you-performance-4fm6
