Benchmark: Array concat vs spread operator vs spread push vs push

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);
single push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; other.push(params[0]); other.push(params[1]); other.push(params[2]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
single push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

Browser/OS: Chrome 83 on Windows 7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3685863.0 Ops/sec
spread operator	25777298.0 Ops/sec
Push	17120542.0 Ops/sec
single push	29517440.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of different ways to concatenate or push elements onto an array in JavaScript, specifically using the new ES6 spread operator (`...`), traditional `concat()` method, and `push()` method.

**Benchmark Definition**

The benchmark definition json explains that it compares four approaches:

1. **Array.prototype.concat**: The traditional way to concatenate two arrays.
2. **Spread operator (`...`)**: A new feature introduced in ES6, allowing for spreading elements onto an array.
3. **Push with spread operator (`push(...)`)**: Using the `push()` method with the spread operator to add elements to an array.
4. **Single push**: Adding each element individually using the `push()` method.

**Options Compared**

The benchmark compares these four approaches:

* **Pros and Cons:**
	+ Array.prototype.concat:
		- Pros: Simple, widely supported, and efficient for small arrays.
		- Cons: Creates a new array object, which can be memory-intensive for large arrays.
	+ Spread operator (`...`):
		- Pros: Concise, efficient, and supports adding arbitrary numbers of elements.
		- Cons: May not work as expected with certain data types or in older browsers.
	+ Push with spread operator (`push(...)`):
		- Pros: Similar to the spread operator but avoids creating a new array object.
		- Cons: May be slower than other methods due to the overhead of `push()` calls.
	+ Single push:
		- Pros: Simple and easy to understand, but may not be the most efficient approach.
		- Cons: Can result in slower performance compared to more optimized methods like spread operator or `concat()`.
* **Other Considerations**
	+ Array.prototype.concat is generally considered the best option for concatenating large arrays due to its efficient implementation and support across browsers.
	+ The spread operator (`...`) offers a concise alternative with good performance, making it an attractive choice for most use cases.
	+ Push with spread operator (`push(...)`), while avoiding creating a new array object, may introduce unnecessary overhead compared to other methods.

**Library**

None of the benchmark test cases explicitly use any JavaScript libraries. However, if we assume that the script preparation and HTML preparation codes are included as part of the benchmark setup (not explicitly shown in this snippet), they might involve some utility functions or library imports.

**Special JS Feature/Syntax**

The benchmark makes use of a new feature introduced in ES6: the spread operator (`...`). This allows for spreading elements onto an array using the syntax `array.push(...elements)`.

Please note that if you're testing other JavaScript versions prior to ES6, the spread operator might not work as expected.

Related benchmarks:

Array concat vs spread operator vs spread push vs push (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs single push

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

single push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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