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:

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 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: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Spread operator

Array.prototype.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):