Run results for: Array concat vs spread operator vs push vs assignment

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Array.prototype.concat	17433066.0 Ops/sec
spread operator	80708432.0 Ops/sec
Push	104542936.0 Ops/sec
assign	9544988.0 Ops/sec

Script Preparation code:

const append = (arr1, arr2) => {
    // Pre-allocate space for the new elements
    arr1.length += arr2.length;

    // Copy elements from arr2 to arr1
    for (let i = 0; i < arr2.length; i++) {
        arr1[arr1.length - arr2.length + i] = arr2[i];
    }

    return arr1;
};
window.append = append

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
assign
var params = [ "hello", true, 7 ]; var other = append([1,2], params);

Run results for: Array concat vs spread operator vs push vs assignment

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

Array.prototype.concat

spread operator

Push

assign