애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Javascript concat vs spread vs push 성능에 대해
    Tip 2021. 9. 9. 11:54
    728x90

    결론부터 말하자면 큰 배열의 경우 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가 가장 빠르다고 나오는데 이에 대해서는 나중에 다뤄보도록 하겠다.

     

     

    댓글

Designed by Tistory.