Benchmark: Array concat vs spread operator vs push (forEach)

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 ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; other.forEach((item) => { other.push(item); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3.1 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	58280196.0 Ops/sec
spread operator	884163968.0 Ops/sec
Push	27171412.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

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. Pushing elements onto an array using `forEach`

**Options Compared**

Here's a brief overview of each option:

* **`Array.prototype.concat()`**: This is the traditional method for concatenating arrays, which creates a new array by copying elements from both input arrays.
* **Spread Operator (`...`)**: Introduced in ES6, this operator allows you to spread the elements of an array onto another array. In this benchmark, it's used to concatenate two arrays using `...params` instead of `concat()`.
* **Push with `forEach()`**: This approach uses a loop to iterate over the elements of one array and push them onto another array.

**Pros and Cons**

Here are some pros and cons for each option:

* **`Array.prototype.concat()`**:
	+ Pros: Fast, widely supported, easy to understand.
	+ Cons: Creates a new array, can be slower than other methods for large inputs.
* **Spread Operator (`...`)**:
	+ Pros: More concise, faster than `concat()`, and more efficient in terms of memory allocation.
	+ Cons: Less readable for some developers, requires ES6 support.
* **Push with `forEach()`**:
	+ Pros: More control over the iteration process, can be useful in certain scenarios.
	+ Cons: Slower than other methods due to the loop overhead, less efficient in terms of memory allocation.

**Library and Special JS Features**

There are no libraries being used in this benchmark. However, the spread operator (`...`) is a special JavaScript feature introduced in ES6.

**Other Considerations**

* The benchmark tests the performance of each approach on different inputs (e.g., arrays with varying lengths).
* It measures the `ExecutionsPerSecond` value for each test case, which represents the number of iterations performed per second.
* The results are likely used to determine which approach is faster and more efficient.

**Alternative Approaches**

Some alternative approaches that could be tested in this benchmark include:

* Using `Array.prototype.push()` directly instead of using `forEach()`.
* Using `Array.prototype.set()` or other array methods specifically designed for concatenation.
* Comparing the performance of other libraries or frameworks (e.g., React, Angular) for array manipulation.

Keep in mind that these alternatives might not be relevant to the specific benchmark goals and may require modifications to the test cases.

Related benchmarks:

Array concat vs spread operator vs push (forEach) (version: 0)

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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