MeasureThat.net

Run results for: Array concat vs spread operator vs push (many)

Compare the new ES6 spread operator with the traditional concat() method and push

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15
Safari 14
Mac OS X 10.15.7
Desktop
3 years ago
Test name Executions per second
Array.prototype.concat 4600818.5 Ops/sec
spread operator 4277373.0 Ops/sec
copy on push 1251066.9 Ops/sec
directly push 2345274.8 Ops/sec
flat 2.1 Ops/sec
HTML Preparation code:
​x
 
1
​
2
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
 
var existing = [ 1, 2, "hello", true, 7 ];
var newi = [1, 1, 1];
Tests:

  • Array.prototype.concat

     
    var other = existing.concat(newi);

  • spread operator

     
    var other = [ ...existing, ...newi ];

  • copy on push

     
    var other = newi.forEach(i => existing.concat().push(i));

  • directly push

     
    newi.forEach(i => existing.push(i));

  • flat

     
    var other = _.flatten([ existing, newi ]);
    ​