Benchmark: spread operator vs array.concat()

Script Preparation code:

var a = Array.from({length: 1000}).map((_, i)=>`${i}`);
var b = Array.from({length: 2000}).map((_, i)=>`${i}`);
var aSmall = ['a', 'b', 'c', 'd'];
var bSmall = ['e', 'f', 'g', 'h', 'i'];

Tests:

spread big
const c = [...a, ...b];
concat big
const c = a.concat(b);
spread small
const c = [...aSmall, ...bSmall];
concat small
const c = aSmall.concat(bSmall);
spread big smal
const c = [...a, ...bSmall];
spread small big
const c = [...aSmall, ...b];
concat big small
const c = a.concat(bSmall);
concat small big
const c = aSmall.concat(b);
shallow copy spread
const c = [...b];
shallow copy concat
const c = [].concat(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread big
concat big
spread small
concat small
spread big smal
spread small big
concat big small
concat small big
shallow copy spread
shallow copy concat

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 dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Overview**

The benchmark compares the performance of two approaches:

1. Spread operator (`...`)
2. Array `concat()` method

Both methods are used to create a new array by combining existing arrays or arrays with primitive values (e.g., strings).

**Test Cases**

There are eight test cases, each testing one specific scenario:

1. `spread small`: Combines two small arrays using the spread operator.
2. `concat small`: Combines two small arrays using the `concat()` method.
3. `shallow copy spread`: Creates a shallow copy of an array using the spread operator.
4. `shallow copy concat`: Creates a shallow copy of an array using the `concat()` method.
5. `concat big small`: Combines a larger array with a smaller array using the `concat()` method.
6. `spread small big`: Combines two smaller arrays with a larger array using the spread operator.
7. `concat big`: Combines two larger arrays using the `concat()` method.
8. `spread big smal` and `spread small big`: These test cases are essentially duplicates of scenarios 1 and 6, respectively.

**Library Used**

None, as this benchmark is a simple JavaScript microbenchmark that doesn't rely on any external libraries.

**Special JS Feature or Syntax**

The spread operator (`...`) is a relatively recent addition to the ECMAScript standard (ECMA-262). It was introduced in ECMAScript 2015 (ES6) as a shorthand for creating new arrays by "spreading" existing arrays.

**Performance Comparison**

The benchmark measures the execution time of each test case on a desktop machine running Chrome 117. The results show that:

* The spread operator tends to perform better than the `concat()` method, especially for smaller arrays.
* Shallow copying an array using either method is relatively fast.
* Combining larger arrays using the `concat()` method can be slower than using the spread operator.

**Interpretation**

The performance differences between these methods can be attributed to various factors, such as:

* Overhead of function calls: The `concat()` method involves a function call, whereas the spread operator is simply an expression.
* Array allocation and copying: When using the spread operator, a new array is created by copying elements from the original arrays. In contrast, `concat()` creates a new array by allocating memory for the combined elements.
* Optimizations: The JavaScript engine (V8 in this case) may optimize some operations, like array concatenation, to reduce overhead.

Keep in mind that these results are specific to this benchmark and might not generalize to all scenarios. Other factors, such as system resources, browser version, and hardware configuration, can influence performance.

**Conclusion**

In conclusion, this benchmark highlights the relative performance of two JavaScript methods: the spread operator and the `concat()` method. The results suggest that the spread operator tends to be faster for smaller arrays and shallow copying, while `concat()` might perform better for larger array concatenations. However, it's essential to consider the specific use case and system configuration when making decisions about which approach to use.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 117 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread big	136963.8 Ops/sec
concat big	1409220.2 Ops/sec
spread small	11836159.0 Ops/sec
concat small	8426919.0 Ops/sec
spread big smal	1314117.5 Ops/sec
spread small big	149564.7 Ops/sec
concat big small	2799274.0 Ops/sec
concat small big	1885578.1 Ops/sec
shallow copy spread	3805911.0 Ops/sec
shallow copy concat	3703314.8 Ops/sec

Related benchmarks:

spread operator vs array.concat() (version: 0)

Comparing performance of: spread big vs concat big vs spread small vs concat small vs spread big smal vs spread small big vs concat big small vs concat small big vs shallow copy spread vs shallow copy concat

Created: one year ago by: Guest

Jump to the latest result

spread big

concat big

spread small

concat small

spread big smal

spread small big

concat big small

concat small big

shallow copy spread

shallow copy concat

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