Benchmark: Array 2000 spread vs concat

Script Preparation code:

var a = Array.from({ length: 2000 }, (_, index) => index);
var b = Array.from({ length: 2000 }, (_, index) => 2000 - index);

Tests:

Spread
const spread = [...a, ...b];
Concat
const concat = a.concat(b);
Concat from empty
const concatEmpty = [].concat(a).concat(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Concat
Concat from empty

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
Spread	51575.7 Ops/sec
Concat	300218.8 Ops/sec
Concat from empty	225175.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's tested in the provided JSON, compare different approaches, and provide pros and cons of each.

**Benchmark Definition:**

The benchmark tests how fast JavaScript can spread two arrays (`a` and `b`) together using the spread operator (`...`). There are three test cases:

1. **Spread**: Tests the performance of spreading two arrays together using the spread operator.
2. **Concat**: Tests the performance of concatenating two arrays together using the `concat()` method.
3. **Concat from empty**: Tests the performance of concatenating an empty array with another array and then concatenating them.

**Approaches:**

1. **Spread Operator (`...`)**
	* This approach creates a new array by iterating over each element in the original arrays and includes it in the new array using the spread operator.
	* Pros:
		+ Efficient, as it avoids creating intermediate arrays.
		+ Native JavaScript support, so no additional libraries are required.
	* Cons:
		+ May incur a slight overhead due to the creation of a new array object.
2. **`concat()` method**
	* This approach creates two new arrays by concatenating the original arrays using the `concat()` method.
	* Pros:
		+ Well-established and widely supported, so it's likely to be optimized for performance.
	* Cons:
		+ Creates intermediate arrays, which can lead to increased memory usage.
3. **`concat()` from empty**
	* This approach creates an empty array, concatenates the original arrays with it using the `concat()` method, and then concatenates the resulting arrays together.

**Other Considerations:**

* The benchmark is run on a desktop platform (Windows) using Google Chrome 122.
* The test cases are executed approximately 300-520 times per second, depending on the approach.
* The results show that the spread operator approach performs relatively poorly compared to the `concat()` method approach.

**Library and Special JS Feature:**

There is no external library used in this benchmark. However, it does utilize a feature of modern JavaScript: **Rest parameter syntax (`...`)**, which allows for spreading arrays or objects into new expressions.

Now, let's take a look at the alternative approaches:

1. Using `Array.prototype.push()`: This approach would involve using the `push()` method to add elements from one array to another. While this approach is also efficient, it may not be as well-supported in older browsers.
2. Using `Array.prototype.forEach()`: This approach would involve iterating over each element in the original arrays and adding them to a new array using the `forEach()` method. However, this approach is likely to be less efficient due to the overhead of the callback function.

Keep in mind that these alternative approaches may not be supported by older browsers or have different performance characteristics compared to the original spread operator approach.

Related benchmarks:

Array 2000 spread vs concat (version: 0)

Comparing performance of: Spread vs Concat vs Concat from empty

Created: 2 years ago by: Guest

Jump to the latest result

Spread

Concat

Concat from empty

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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