Benchmark: Array concat vs spread operator vs push vs object assign with large array

Tests:

Array.prototype.concat

// 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);

​x
 
// Array.prototype.concatfunction 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 ];

 
// spread operatorfunction 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);

 
// pushfunction 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);

 
// object assignfunction 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);​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Array.prototype.concat
spread operator
Push
Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Browser/OS: Chrome 97 on Linux

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's break down what's being tested on the provided JSON.

Benchmark Overview

The benchmark compares four different methods for creating a new array by concatenating or merging an existing large array with another array:

Array.prototype.concat()
The ES6 spread operator (...)
push() method
Object.assign() method

Options Compared

Each test case measures the execution time of each method for creating a new array by concatenating or merging an existing large array with another array.
The methods being tested are applied to two different scenarios:
- Creating a new array from scratch (createArray())
- Merging an existing array with a new array (push() and Object.assign())

Pros and Cons of Each Approach

Array.prototype.concat()
- Pros: Simple and widely supported.
- Cons: Can be slow for large arrays due to the overhead of creating intermediate arrays.
ES6 Spread Operator (...)
- Pros: Fast, concise, and efficient.
- Cons: May not work as expected in older browsers or versions of JavaScript.
push() method
- Pros: Fast and efficient for small arrays, but can lead to performance issues for large arrays due to the overhead of pushing elements onto the end of the array.
- Cons: Can be slower than Object.assign() for merging large arrays.
Object.assign() method
- Pros: Fast and efficient for merging large arrays, as it avoids creating intermediate arrays.
- Cons: May not work as expected if the existing array is modified during the merge.

Library and Syntax

None of these methods rely on specific libraries or syntax features beyond ES6 spread operator (...).

Other Considerations

When choosing between these methods, consider the following:

If you need to create a new array from scratch, Array.prototype.concat() might be a good choice if performance is not a concern.
For merging large arrays, the ES6 spread operator (...) or Object.assign() method are likely better options due to their efficiency and conciseness.

Alternatives

For alternative methods, you can consider:

Using Array.prototype.push() with an array of elements to be pushed (e.g., [...arrayToMerge, ...newElements]).
Using Array.prototype.splice() or Array.prototype.slice() to merge arrays.
Writing a custom merging function that uses Array.prototype.forEach() or Array.prototype.reduce().

Keep in mind that these alternatives might have different performance characteristics and trade-offs compared to the methods being tested here.

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON.

**Benchmark Overview**

The benchmark compares four different methods for creating a new array by concatenating or merging an existing large array with another array:

1. `Array.prototype.concat()`
2. The ES6 spread operator (`...`)
3. `push()` method
4. `Object.assign()` method

**Options Compared**

* Each test case measures the execution time of each method for creating a new array by concatenating or merging an existing large array with another array.
* The methods being tested are applied to two different scenarios:
	+ Creating a new array from scratch (`createArray()`)
	+ Merging an existing array with a new array (`push()` and `Object.assign()`)

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**
	* Pros: Simple and widely supported.
	* Cons: Can be slow for large arrays due to the overhead of creating intermediate arrays.
2. **ES6 Spread Operator (`...`)**
	* Pros: Fast, concise, and efficient.
	* Cons: May not work as expected in older browsers or versions of JavaScript.
3. **`push()` method**
	* Pros: Fast and efficient for small arrays, but can lead to performance issues for large arrays due to the overhead of pushing elements onto the end of the array.
	* Cons: Can be slower than `Object.assign()` for merging large arrays.
4. **`Object.assign()` method**
	* Pros: Fast and efficient for merging large arrays, as it avoids creating intermediate arrays.
	* Cons: May not work as expected if the existing array is modified during the merge.

**Library and Syntax**

None of these methods rely on specific libraries or syntax features beyond ES6 spread operator (`...`).

**Other Considerations**

When choosing between these methods, consider the following:

* If you need to create a new array from scratch, `Array.prototype.concat()` might be a good choice if performance is not a concern.
* For merging large arrays, the ES6 spread operator (`...`) or `Object.assign()` method are likely better options due to their efficiency and conciseness.

**Alternatives**

For alternative methods, you can consider:

1. Using `Array.prototype.push()` with an array of elements to be pushed (e.g., `[...arrayToMerge, ...newElements]`).
2. Using `Array.prototype.splice()` or `Array.prototype.slice()` to merge arrays.
3. Writing a custom merging function that uses `Array.prototype.forEach()` or `Array.prototype.reduce()`.

Keep in mind that these alternatives might have different performance characteristics and trade-offs compared to the methods being tested here.

Related benchmarks:

Array concat vs spread operator vs push vs object assign with large array (version: 2)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs Object assign

Created: 3 years ago by: Registered User

Jump to the latest result