Benchmark: Array.prototype.concat vs spread operator new 2020

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 ]

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

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is testing the performance difference between two ways to concatenate arrays in JavaScript: using the `concat()` method and the spread operator (`...`).

The benchmark compares these two approaches on an example dataset containing a string, a boolean, and an integer. The goal is to determine which approach is faster.

**Options Comparison**

There are two options being compared:

1. **Array.prototype.concat**: This method takes two or more arrays as arguments and returns a new array that contains all the elements from the original arrays.
2. **Spread operator (`...`)**: This operator allows you to expand an array into individual elements, which can then be used in a function call.

**Pros and Cons of Each Approach**

* **Array.prototype.concat**:
	+ Pros:
		- Well-supported across most browsers
		- Easy to read and understand for developers familiar with the method
	+ Cons:
		- Can lead to unnecessary memory allocations, potentially causing performance issues
		- May not be as efficient as the spread operator in modern JavaScript engines
* **Spread operator (`...`)**:
	+ Pros:
		- Generally faster than `concat()` due to reduced overhead
		- More concise and readable for many developers
	+ Cons:
		- Not supported in older browsers (e.g., Internet Explorer)
		- May require additional syntax changes for some developers

**Library Consideration**

None of the benchmark test cases use any external libraries. The JavaScript core functions (`Array.prototype.concat` and the spread operator) are being tested.

**Special JS Features/Syntax**

The benchmark uses the ES6 spread operator (`...`). This feature was introduced in ECMAScript 2015 (ES6) and allows for more concise array expansion.

**Other Alternatives**

Alternative approaches to concatenate arrays could include:

1. Using `Array.prototype.push()` with an array as an argument
2. Using `Array.prototype.set()` (although this is not a standard method and may not be supported in all browsers)
3. Creating a new array using the `Array` constructor and iterating over the elements from the original arrays

Keep in mind that these alternatives might have different performance characteristics or syntax requirements compared to the spread operator.

**Benchmark Preparation Code**

The provided code snippet is a minimal example, likely created for benchmarking purposes:
```javascript
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params);
```
And similarly for the spread operator test case:
```javascript
var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ];
```
These examples illustrate how to concatenate arrays using the two tested approaches.

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/84.0.4147.135 Safari/537.36 OPR/70.0.3728.189

Browser/OS: Opera 70 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5215034.0 Ops/sec
spread operator	36878792.0 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator new 2020 (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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