MeasureThat.net

Run results for: Array concat vs spread operator vs push vs object assign with large array

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

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
Chrome 97
Linux
Desktop
3 years ago
Test name Executions per second
Array.prototype.concat 5598.9 Ops/sec
spread operator 4622.7 Ops/sec
Push 4606.3 Ops/sec
Object assign 709.4 Ops/sec
Tests:

  • Array.prototype.concat

    ​x
     
    // Array.prototype.concat
    function createArray() {
        return new Array(1024*8).fill(null).map((value, index) => {
            return {
                value: index,
                index: index,
            }; 
        });
    }
    ​
    const params = createArray();
    const other = createArray().concat(params);

  • spread operator

     
    // spread operator
    function createArray() {
        return new Array(1024*8).fill(null).map((value, index) => {
            return {
                value: index,
                index: index,
            }; 
        });
    }
    ​
    const params = createArray();
    const other = [ ...createArray(), ...params ];

  • Push

     
    // push
    function createArray() {
        return new Array(1024*8).fill(null).map((value, index) => {
            return {
                value: index,
                index: index,
            }; 
        });
    }
    ​
    const params = createArray();
    const other = createArray().push(...params);

  • Object assign

     
    // object assign
    function createArray() {
        return new Array(1024*8).fill(null).map((value, index) => {
            return {
                value: index,
                index: index,
            }; 
        });
    }
    ​
    const params = createArray();
    const other = Object.assign(createArray(), params);
    ​