Benchmark: Array.prototype.concat vs spread operator vs push with spread operator

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
push with spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	14152422.0 Ops/sec
spread operator	54931880.0 Ops/sec
push with spread operator	69313392.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of three different approaches to concatenate an array: `Array.prototype.concat`, the spread operator (`...`), and `push` with the spread operator.

**Options Comparison**

1. **`Array.prototype.concat`**: This method creates a new array by concatenating the elements of two arrays.
	* Pros:
		+ Well-established and widely supported in older browsers.
	* Cons:
		+ Creates a new array, which can be memory-intensive for large datasets.
2. **Spread Operator (`...`)**: This operator allows you to expand an array into separate arguments.
	* Pros:
		+ More concise and efficient than `concat`.
		+ Reduces memory allocation compared to creating a new array.
3. **`push` with spread operator**: This approach uses the `push` method to add elements to an existing array, followed by the spread operator to expand the array into separate arguments.
	* Pros:
		+ Similar efficiency benefits to the spread operator alone.
4. **Other Considerations**:

* Modern JavaScript engines (like V8 in Chrome) have optimized implementations for these methods, which can affect performance.
* The benchmark might not reflect real-world usage scenarios, as it's a controlled test case.

**Library: None**

There are no external libraries used in this benchmark.

**Special JS Features/Syntax: Spread Operator (`...`)**

The spread operator is a new feature introduced in ECMAScript 2015 (ES6). It allows you to expand an array or object into separate arguments. In the benchmark, it's used to concatenate the `params` array with another array using the syntax `var other = [ 1, 2, ...params ]`.

**Alternative Approaches**

Other approaches to concatenating arrays in JavaScript might include:

* Using a library like Lodash (if available)
* Creating an intermediate array and then pushing elements into it
* Using a custom implementation that avoids array concatenation altogether

However, these alternatives are not included in this benchmark.

Related benchmarks:

Array.prototype.concat vs spread operator vs push with spread operator (version: 0)

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

push with spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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