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

Script Preparation code:

var source = Array.from({ length: 1000 }, (_, index) => index + 1);

Tests:

Array.prototype.concat
source.reduce((acc, cur) => { acc = acc.concat(cur + cur); return acc; }, [])
spread operator
source.reduce((acc, cur) => { acc = [...acc, cur + cur]; return acc; }, [])
Push
source.reduce((acc, cur) => { acc.push(cur + cur); return acc; }, [])

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 is being tested, compared options, pros and cons, library usage, special JS features, and other considerations.

**Benchmark Definition**

The benchmark compares the performance of three ways to concatenate an array in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. Using the `push()` method on the accumulator array

**Test Cases**

Each test case has a unique name and a corresponding "Benchmark Definition" that defines how to create a test case:

* `Array.prototype.concat`: Concatenates two numbers using `concat()`.
* `spread operator`: Concatenates two numbers using the spread operator (`...`).
* `Push`: Concatenates two numbers by pushing one number onto an accumulator array.

**Options Compared**

The benchmark is comparing the performance of three different approaches to concatenate arrays:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. Using the `push()` method on the accumulator array

**Pros and Cons of Each Approach**

* **`Array.prototype.concat()`**: This approach creates a new array each time it's called, which can be inefficient for large datasets.
	+ Pros: Easy to use, well-documented, widely supported.
	+ Cons: Creates unnecessary intermediate arrays.
* **Spread Operator (`...`)**: This approach avoids creating intermediate arrays by concatenating elements directly onto the accumulator array.
	+ Pros: More memory-efficient than `concat()`, can improve performance for large datasets.
	+ Cons: Less readable and less well-documented than `concat()` in older JavaScript versions.
* **`push()` method on accumulator array**: This approach modifies the original accumulator array, which can be a concern if the array is not intended to be modified.
	+ Pros: Avoids creating unnecessary intermediate arrays, can improve performance for large datasets.
	+ Cons: Can modify unintended data structures.

**Library Usage**

There are no external libraries used in this benchmark.

**Special JS Features**

The benchmark uses the new ES6 spread operator (`...`), which was introduced in ECMAScript 2015. The `push()` method on accumulator array is also a standard JavaScript feature, but its usage can be nuanced depending on the context.

**Other Considerations**

* **Browser Support**: The benchmark measures performance across different browsers (Chrome 114) and devices (Desktop). This ensures that the results are applicable to various environments.
* **Execution Frequency**: Each test case is executed multiple times per second (305663.8125, 1656.6131591796875, and 688.9426879882812 for `Push`, `spread operator`, and `Array.prototype.concat`, respectively). This provides a representative sample of performance.

**Alternatives**

Other alternatives for concatenating arrays in JavaScript include:

* Using `Array.prototype.reduce()` with the accumulator array.
* Using `Array.prototype.push.apply()` or `Array.prototype.splice()`.
* Implementing a custom concatenation function using loops and indexing.

Related benchmarks:

Array concat vs spread operator vs push (reduce) (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: 2 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

No previous run results

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