Benchmark: Array.prototype.concat vs spread operator

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 2
var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
spread 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. A variation of the spread operator, where an array is used as a prefix before spreading (`[ ...array, ...other]`)

**Options Compared**

The benchmark compares these three approaches on different test cases:

* Test case 1: `Array.prototype.concat()` with an array containing strings, booleans, and numbers.
* Test case 2: The new ES6 spread operator (`...`) without any prefix or suffix.
* Test case 3: A variation of the spread operator, where an array is used as a prefix before spreading.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `Array.prototype.concat()`
	* Pros:
		+ Well-supported by older browsers and engines.
		+ Easy to read and maintain.
	* Cons:
		+ May lead to slower performance due to the overhead of creating a new array object.
2. New ES6 spread operator (`...`)
	* Pros:
		+ Fast and efficient, with good browser support.
		+ Concise and expressive syntax.
	* Cons:
		+ May be less readable for developers familiar with traditional concatenation methods.
3. Variation of the spread operator (`[ ...array, ...other]`)
	* Pros:
		+ Combines the benefits of `concat()` and the spread operator.
	* Cons:
		+ Less common usage pattern, which may affect readability.

**Library Usage**

There is no explicit library usage in this benchmark. However, it's worth noting that modern JavaScript engines are optimized for ES6 features, including the spread operator.

**Special JS Feature or Syntax**

The benchmark uses a special syntax feature: the new ES6 spread operator (`...`). This was introduced in ECMAScript 2015 (ES6) and has become widely supported by modern browsers and engines.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Safari/604.1.38

Browser/OS: Safari 11 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	13371355.0 Ops/sec
spread operator	25865824.0 Ops/sec
spread 2	47403604.0 Ops/sec

Related benchmarks:

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 vs spread 2

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

spread 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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