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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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: 4 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push

Object assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):