Benchmark: Array.prototype.concat vs spread operator real

Tests:

Array.prototype.concat
const params = 7; const other = [ 1, 2 ].concat([params]);
spread operator
const params = [ 1, 2] const other = [...params, 7]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16194000.0 Ops/sec
spread operator	49581492.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches for concatenating arrays in JavaScript: the traditional `Array.prototype.concat()` method and the new ES6 spread operator (`...`).

**Options compared**

The benchmark compares the performance of two options:

1. **Traditional `Array.prototype.concat()`**: This method creates a new array by copying elements from the original arrays.
2. **New ES6 spread operator (`...`)**: This method uses the spread operator to create a new array by copying elements from the original arrays.

**Pros and cons of each approach**

* **Traditional `Array.prototype.concat()`**:
	+ Pros: widely supported, well-understood behavior, often used in production code.
	+ Cons: can be slower than the spread operator, especially for large arrays.
* **New ES6 spread operator (`...`)**:
	+ Pros: more efficient, creates a new array with less overhead, and is generally faster.
	+ Cons: relatively new feature, not all browsers support it yet (although most do), and may require additional setup or libraries.

**Library and its purpose**

In the provided benchmark definition, there is no explicit library mentioned. However, some test cases might use external libraries that are not shown in this code snippet. If a library is used, its purpose would be to make the test more robust, reliable, or relevant.

**Special JS features or syntax**

There are no special JavaScript features or syntax mentioned in the provided benchmark definition.

**Alternative approaches**

Other alternatives for concatenating arrays include:

1. **`Array.prototype.push()`**: This method appends elements to an array and returns the updated length of the array.
2. **`Array.concat()` with a new array**: Creating a new array using `Array.from()` or another method, followed by the `concat()` method.

These alternatives might be faster or more efficient in certain scenarios, but they may not offer the same performance benefits as the spread operator in modern JavaScript engines.

**Benchmark preparation code**

The benchmark definition does not provide any script preparation code. This suggests that the test cases are already simplified and designed to focus on the performance comparison between the two approaches.

Keep in mind that benchmarking can be complex, and the results might depend on various factors such as the specific use case, browser version, platform, and hardware configuration.

Related benchmarks:

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

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

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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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