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); });

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 42 runs

Push

39.4M/s

spread operator

32.8M/s

Array.prototype.concat

8.4M/s

Fastest: Push (4.7x faster)

View exact numbers

✓ Push: 39,366,576 ops/sec
• spread operator: 32,809,436 ops/sec
• Array.prototype.concat: 8,448,888 ops/sec

Firefox 6 runs

Push

47.3M/s

spread operator

27.6M/s

Array.prototype.concat

22.9M/s

Fastest: Push (2.1x faster)

View exact numbers

✓ Push: 47,256,924 ops/sec
• spread operator: 27,557,266 ops/sec
• Array.prototype.concat: 22,862,526 ops/sec

Safari 5 runs

spread operator

539.4M/s

Array.prototype.concat

41.4M/s

Push

15.5M/s

Fastest: spread operator (34.9x faster)

View exact numbers

✓ spread operator: 539,369,024 ops/sec
• Array.prototype.concat: 41,368,864 ops/sec
• Push: 15,450,798 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
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months 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

spread operator

884.2M/s

Array.prototype.concat

58.3M/s

Push

27.2M/s

View exact numbers

Test name	Executions per second
✓ spread operator	884,163,968 Ops/sec
Array.prototype.concat	58,280,196 Ops/sec
Push	27,171,412 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.

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

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 42 runs

Firefox 6 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 42 runs

Firefox 6 runs

Safari 5 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 vs Push`