Benchmark: Array concat vs spread operator vs spread with 2

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 ]
spread operator 2
var params1 = [ 1, 2 ] var params2 = [ "hello", true, 7 ] var other = [ ...params1, ...params2 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
spread operator 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three different ways of concatenating arrays in JavaScript:

1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from two or more existing arrays.
2. **Spread operator (`...`) with `concat()`**: This method uses the spread operator to copy elements from an array and then calls the `concat()` method on the resulting array.
3. **Spread operator (`...`) without `concat()```**: This method uses the spread operator to copy elements from two arrays and combines them into a new array.

**Options Compared**

The three options are compared in terms of their execution speed, which is measured as executions per second.

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros: Well-established and widely supported method.
	* Cons: Can be slower than other methods due to the overhead of creating a new array.
2. **Spread operator (`...`) with `concat()`**:
	* Pros: Can be faster than `concat()` alone, as it avoids creating an intermediate array.
	* Cons: Requires modern browsers that support the spread operator (added in ES6).
3. **Spread operator (`...`) without `concat()`**:
	* Pros: Fast and efficient, but may not work in older browsers that don't support the spread operator.
	* Cons: May require additional checks to ensure compatibility with older browsers.

**Libraries and Special Features**

There are no libraries explicitly mentioned in the benchmark definition. However, the use of the spread operator (`...`) is a modern JavaScript feature introduced in ES6 (ECMAScript 2015).

**Benchmark Preparation Code and Html Preparation Code**

The `Script Preparation Code` field is empty, which means that the script for each test case will be generated automatically by the benchmarking tool. The `Html Preparation Code` field is also empty, indicating that no HTML code needs to be prepared for this benchmark.

**Other Alternatives**

If you're interested in exploring alternative methods for concatenating arrays, here are a few examples:

1. **`Array.prototype.push()`**: You can use the `push()` method to add elements to an array and then repeat the process for each array you want to concatenate.
2. **`Array.prototype.splice()`**: Similar to `push()`, but uses the `splice()` method instead.

Keep in mind that these alternatives may be slower or more prone to errors than the methods tested in this benchmark.

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	14382587.0 Ops/sec
spread operator	46109456.0 Ops/sec
spread operator 2	37036720.0 Ops/sec

Related benchmarks:

Array concat vs spread operator vs spread with 2 (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 spread operator 2

Created: 5 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

spread operator 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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