-
Javascript concat vs spread vs push 성능에 대해Tip 2021. 9. 9. 11:54728x90
결론부터 말하자면 큰 배열의 경우 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가 가장 빠르다고 나오는데 이에 대해서는 나중에 다뤄보도록 하겠다.
'Tip' 카테고리의 다른 글
VSCode ESLint, Prettier 자동 수정 적용안될 때 (0) 2021.12.08 Expo xcrun exited with non-zero code: 2에러 해결하기 (0) 2021.10.27 readonly 객체 수정하기 (0) 2021.09.06 ESLint react/display-name 해결하기 (0) 2021.09.02 eslint, prettier 수정, 검색 후 commit하기 (0) 2021.08.27