Benchmark: Array.prototype.concat vs spread operator - larger arrays

Script Preparation code:

var arr1 = [];
var arr2 = [];
for(let i = 0; i < 1000000; i++) {
  arr1.push(i);
  arr2.push(i);
}

Tests:

Array.prototype.concat
[].concat(arr1, arr2);
spread operator
[...arr1, ...arr2];

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: 3 years ago)

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

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	427.7 Ops/sec
spread operator	68.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmarking scenario.

**Benchmark Definition**

The benchmark is designed to compare two approaches for concatenating arrays in JavaScript: `Array.prototype.concat()` and the spread operator (`...`). The test case uses larger arrays (1 million elements each) as specified in the "Script Preparation Code" section of the benchmark definition.

**Options Compared**

There are two options compared:

1. **`Array.prototype.concat(arr1, arr2)`**: This is the traditional method for concatenating two arrays using the `concat()` function on the `Array.prototype`.
2. **`[...arr1, ...arr2]`**: This uses the spread operator (`...`) to create a new array by spreading the elements of `arr1` and `arr2`.

**Pros and Cons**

* **`Array.prototype.concat(arr1, arr2)`**:
	+ Pros: Widely supported in older browsers, easy to read and understand.
	+ Cons: Less efficient than the spread operator, can be slower due to the overhead of creating a new function call.
* **`[...arr1, ...arr2]`**:
	+ Pros: More efficient than `concat()`, takes advantage of modern JavaScript's syntax improvements.
	+ Cons: Requires support for the spread operator (introduced in ES6), may be less readable to those unfamiliar with it.

**Library and Syntax**

There is no specific library used in this benchmark. However, the use of the spread operator (`[...arr1, ...arr2]`) introduces a new syntax feature introduced in ECMAScript 2015 (ES6).

**Other Considerations**

* Browser support: The benchmark measures performance on Chrome 91, which supports the spread operator.
* Device and operating system: The test is run on a desktop platform with Mac OS X 10.15.7.

**Alternatives**

If you wanted to compare other concatenation methods or explore different approaches, some alternatives could include:

* Using `Array.prototype.push()` instead of `concat()`
* Comparing the performance of `concat()` and spread operator in older browsers that don't support modern syntax features.
* Evaluating the impact of using `concat()` vs. spread operator on memory allocation and garbage collection.

Overall, this benchmark is designed to demonstrate the efficiency difference between two common concatenation methods in JavaScript, highlighting the benefits of newer syntax features like the spread operator.

Related benchmarks:

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

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

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

Created: 3 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 2 months ago):