Benchmark: Array concat vs. spread operator

Script Preparation code:

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

Tests:

Array concat
arr1.concat(arr2)
ES6 spread operator
[ ...arr1, ...arr2 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array concat
ES6 spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 Edg/79.0.309.71

Browser/OS: Chrome 79 on Windows

View result in a separate tab

Test name	Executions per second
Array concat	1028234.0 Ops/sec
ES6 spread operator	1813151.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases to understand what is being tested.

**Benchmark Definition:**

The benchmark measures the performance difference between two approaches:

1. `arr1.concat(arr2)`
2. `[ ...arr1, ...arr2 ]` (using the ES6 spread operator)

These two approaches are used to concatenate two arrays, `arr1` and `arr2`. The main difference between them is how they handle the resulting array.

**Pros and Cons of each approach:**

1. **`arr1.concat(arr2)`**
	* Pros:
		+ Wide browser support (not specific to modern browsers)
		+ Easy to understand and implement
	* Cons:
		+ Creates a new, shallow copy of `arr1`, which can lead to unnecessary memory allocations.
		+ May be slower than the spread operator due to its overhead.
2. **`[ ...arr1, ...arr2 ]` (using ES6 spread operator)**
	* Pros:
		+ More efficient than `concat()` as it only creates a new array reference without creating a copy of the original arrays.
		+ Faster execution time due to its optimized implementation in modern browsers.
	* Cons:
		+ Requires modern browser support (ES6+).
		+ May require additional setup or transpilation for older browsers.

**Library:**

In this benchmark, there is no explicit library mentioned. However, the use of ES6 spread operator (`[ ...arr1, ...arr2 ]`) implies that the benchmark is using a modern JavaScript engine with ES6 support.

**Special JS feature/syntax:**

The benchmark uses the ES6 spread operator (`[ ...arr1, ...arr2 ]`), which is a modern JavaScript syntax introduced in ECMAScript 2015. This syntax allows for concise array creation by expanding arrays or iterables.

**Other alternatives:**

For concatenating two arrays, other approaches include:

* `arr1.push(...arr2)`: This approach modifies the original `arr1` and can be slower due to its mutability.
* Array.prototype.slice().concat(arr2): This approach creates a shallow copy of `arr1` using `slice()` and then concatenates `arr2`.

These alternatives may have different performance characteristics, depending on the specific use case and browser support.

**Benchmark Preparation Code:**

The provided preparation code sets up two arrays, `arr1` and `arr2`, with three elements each. This allows for a straightforward test of the concatenation methods.

**Latest Benchmark Result:**

The latest benchmark result shows that Chrome 79 on Windows Desktop achieved:

* 1813151 executions per second using ES6 spread operator (`[ ...arr1, ...arr2 ]`)
* 1028234 executions per second using `arr1.concat(arr2)`

This suggests that the ES6 spread operator outperforms the traditional `concat()` method in this specific benchmark.

Related benchmarks:

Array concat vs. spread operator (version: 0)

Comparing performance of: Array concat vs ES6 spread operator

Created: 4 years ago by: Guest

Jump to the latest result

Array concat

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