Benchmark: .concat vs spread vs push inside reduce

Script Preparation code:

var source = Array(100).fill(0).map((_, i) => Array(i).fill(1).map((_, i) => i))

Tests:

Array.prototype.concat
var result = source.reduce((acc, val) => { acc = acc.concat(val) return acc }, [])
Spread operator
var result = source.reduce((acc, val) => { return [...acc, ...val] }, [])
Array.prototype.push
var result = source.reduce((acc, val) => { acc.push(...val) return acc }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Spread operator
Array.prototype.push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8195.6 Ops/sec
Spread operator	139.9 Ops/sec
Array.prototype.push	3558.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark is comparing three different approaches for performing an operation on an array within the `reduce()` method:

1. Using `Array.prototype.concat()`
2. Using the spread operator (`...`)
3. Using `Array.prototype.push()` and then using the spread operator

**What's being tested?**

Each test case measures the performance of each approach in reducing an array of arrays by concatenating or pushing elements onto it.

**Options compared:**

1. **`Array.prototype.concat()`**: Concatenates two arrays and returns a new array containing all elements from both arrays.
2. **Spread operator (`...`)**: Spreads the elements of one or more arrays into separate arguments to the function, effectively "unpacking" them.
3. **`Array.prototype.push()` + Spread operator**: Pushes each element of an array onto another array, using the spread operator to unpack the elements.

**Pros and Cons:**

1. **`Array.prototype.concat()`**:
	* Pros: Efficient for concatenating two arrays, simple syntax.
	* Cons: Creates a new array, can be slower due to array creation.
2. **Spread operator (`...`)**:
	* Pros: More concise than `concat()`, doesn't create a new array (only copies the elements).
	* Cons: Can be less readable for complex operations, requires understanding of spread syntax.
3. **`Array.prototype.push()` + Spread operator**:
	* Pros: Allows for pushing elements onto an existing array without creating a new one, can be more efficient than `concat()`.
	* Cons: Requires using the spread operator after pushing each element, which might be less readable.

**Library and Special JS feature**

There are no libraries mentioned in this benchmark. The only special JS feature used is the **spread operator (`...`)**, which was introduced in ECMAScript 2015 (ES6).

**Other alternatives**

If you wanted to test alternative approaches for reducing an array of arrays, some options could be:

* Using `Array.prototype.forEach()` and iterating over each element individually
* Using a custom reduction function with loops
* Using a library like Lodash or Ramda for functional programming

However, these alternatives would likely change the focus of the benchmark from comparing different array concatenation methods to exploring other aspects of JavaScript performance.

Related benchmarks:

.concat vs spread vs push inside reduce (version: 0)

Comparing performance of: Array.prototype.concat vs Spread operator vs Array.prototype.push

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

Spread operator

Array.prototype.push

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