Benchmark: concat 2 arrays: Array.prototype.concat vs spread operator

Script Preparation code:

var a = [ 1, 2, 3 ];
var b = [ 4, 5, 6 ];

Tests:

Array.prototype.concat
var result = a.concat(b);
spread operator
var result = [ ...a, ...b ];

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

spread operator

30.1M/s

Array.prototype.concat

12.7M/s

Fastest: spread operator (2.4x faster)

View exact numbers

✓ spread operator: 30,083,042 ops/sec
• Array.prototype.concat: 12,735,915 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

spread operator

42.0M/s

Array.prototype.concat

25.1M/s

View exact numbers

Test name	Executions per second
✓ spread operator	42,029,056 Ops/sec
Array.prototype.concat	25,058,402 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is tested?**

The benchmark tests two approaches for concatenating two arrays: `Array.prototype.concat` and the spread operator (`[ ...a, ...b ]`). The goal is to compare their performance in JavaScript microbenchmarks.

**Options compared**

Two options are being compared:

1. **`Array.prototype.concat`**: A traditional method for concatenating arrays, which was part of the ECMAScript standard before the introduction of the spread operator.
2. **Spread operator (`[ ...a, ...b ]`)**: A new syntax introduced in ECMAScript 2015 (ES6) that allows creating a new array by spreading elements from existing arrays.

**Pros and cons of each approach**

1. `Array.prototype.concat`:
	* Pros:
		+ Widely supported and well-established.
		+ Can be used with older browsers or environments that don't support the spread operator.
	* Cons:
		+ May have performance overhead due to the function call and array creation.
2. Spread operator (`[ ...a, ...b ]`):
	* Pros:
		+ More concise and expressive syntax.
		+ Can be faster than `concat` because it avoids the function call overhead.
	* Cons:
		+ Requires ECMAScript 2015 support (ES6+) for older browsers or environments.

**Library usage**

In this benchmark, there is no explicit library usage mentioned. However, the spread operator syntax relies on the `Array.prototype` object and the `...` spread syntax, which are built-in JavaScript features.

**Special JS feature/syntax**

The spread operator (`[ ...a, ...b ]`) uses a new syntax introduced in ECMAScript 2015 (ES6). This syntax is not mentioned in older browsers or environments that don't support ES6+.

concat 2 arrays: Array.prototype.concat vs spread operator (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

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

Created: 7 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

concat 2 arrays: Array.prototype.concat vs spread operator (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

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

Created: 7 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

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`