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

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/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

spread operator

46.1M/s

spread operator 2

37.0M/s

Array.prototype.concat

14.4M/s

View exact numbers

Test name	Executions per second
✓ spread operator	46,109,456 Ops/sec
spread operator 2	37,036,720 Ops/sec
Array.prototype.concat	14,382,587 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

spread operator 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

spread operator 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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