Javascript concat vs spread vs push 성능에 대해

결론부터 말하자면 큰 배열의 경우 concat을 작은 배열의 경우 spread가 효율이 좋다.

그리고 concat은 배열에 배열을 합칠 때, pushs는 배열에 새로운 인자를 합칠 때 그 효율이 좋다.

 

먼저 concat과 push에 대해 설명하자면 concat의 경우 실행 시 배열을 리턴하고, push의 경우 배열의 총길이를 리턴함으로 성능에 있어서는 push가 더 좋을 수밖에 없다.

 

위의 이미지에서처럼 대량의 데이터의 경우 concat의 속도가 더 뛰어나다.

심지어 spread의 경우 데이터가 너무 크다면 Maximum call stack size exceeded 에러까지 발생한다.

물론 바벨을 이용한다면 아마 spread는 바벨을 걸쳐 concat으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다.

Test Results - Merging 2 10k element arrays
--------------------------------------------------------------------------
Concat                    : 9780.56 ops/sec (+138.97 %)
Spread operator           : 6278.58 ops/sec ( +53.41 %)
Uisng Push                : 4273.39 ops/sec (  +4.41 %)
Push with spread operator : 4092.72 ops/sec (  +0.00 %)
--------------------------------------------------------------------------


Test Results - Merging 2 1000 element arrays
-------------------------------------------------------------------------------
Concat                    : 329820.18 ops/sec (+574.92 %)
Spread operator           : 112274.04 ops/sec (+129.75 %)
Push with spread operator : 98152.51 ops/sec (+100.85 %)
Uisng Push                : 48868.39 ops/sec (  +0.00 %)
-------------------------------------------------------------------------------

Test Results - Merging 2 100 elements array
-------------------------------------------------------------------------------
Concat                    : 2325515.17 ops/sec (+381.10 %)
Spread operator           : 649242.79 ops/sec ( +34.31 %)
Push with spread operator : 608852.43 ops/sec ( +25.96 %)
Uisng Push                : 483378.08 ops/sec (  +0.00 %)
-------------------------------------------------------------------------------

spread가 작은 배열을 합치는 경우 더 빠르다는 결과도 있었지만 해당 링크는 현재 없어진 상태였고 추가적인 자료에서는 위와 같은 결과를 확인할 수 있었다.

 

물론 spread는 훌륭한 문법이고, 코드의 양을 줄여줄 수 있지만, 단순히 배열을 합치는 경우에는 concat을 이용해보는 것은 어떨까?

 

ps. 위의 Test코드에서는 push가 가장 성능이 안 좋다고 나오고 다른 자료들에서는 push가 가장 빠르다고 나오는데 이에 대해서는 나중에 다뤄보도록 하겠다.