Benchmark: reduce.concat() vs flat() vs spread concat()

Tests:

reduce + Array.prototype.concat
var params = [[ "a", "b" ], [ "c", "d", "e" ]]; var other = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
var params = [[ "a", "b" ], [ "c", "d", "e" ]]; var other = params.flat();
spread concat
var params = [[ "a", "b" ], [ "c", "d", "e" ]]; var other = ([]).concat(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flat
spread concat

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/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	21576130.0 Ops/sec
Array.prototype.flat	11721929.0 Ops/sec
spread concat	23640148.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 Definition**

The benchmark is comparing three different approaches to concatenate arrays in JavaScript:

1. `reduce.concat()`
2. `Array.prototype.flat()`
3. The new ES6 spread operator (`...`)

**Options Compared**

Each test case compares a specific approach with the others, so we have three pairs of comparisons:

* `reduce.concat()` vs `Array.prototype.flat()`
* `reduce.concat()` vs spread concat
* `Array.prototype.flat()` vs spread concat

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

1. **`reduce.concat()`**: This method uses the `reduce()` function to concatenate arrays, which can be efficient for small arrays but may become slower for larger ones due to the overhead of the `reduce()` function.
	* Pros: Can work well for small arrays and is a simple implementation.
	* Cons: May be slower for large arrays and has more overhead compared to native array methods.
2. **`Array.prototype.flat()`**: This method flattens an array of arrays into a single array, which can be faster than concatenating individual arrays.
	* Pros: Can be faster than concatenation for larger arrays and is a native array method.
	* Cons: May not work as expected if the input array contains non-array values.
3. **Spread Concat**: This method uses the spread operator (`...`) to concatenate arrays, which can be efficient but may have performance issues with large arrays due to the creation of new arrays.
	* Pros: Can be faster than traditional concatenation for small to medium-sized arrays and is a modern JavaScript feature.
	* Cons: May not work well for very large arrays and has performance issues when dealing with large amounts of data.

**Test Cases**

Each test case represents a specific implementation:

1. `reduce + Array.prototype.concat`: This test case uses the `reduce()` function to concatenate two arrays, followed by a call to `Array.prototype.concat()`.
2. `Array.prototype.flat`: This test case simply calls `Array.prototype.flat()` on an array of arrays.
3. `spread concat`: This test case uses the spread operator (`...`) to concatenate two arrays.

**Library Used**

None, this benchmark only uses built-in JavaScript methods and features.

**Special JS Feature or Syntax**

The ES6 spread operator (`...`) is a new feature introduced in ECMAScript 2015. It allows for efficient concatenation of arrays by avoiding the creation of intermediate arrays.

**Other Alternatives**

Other alternatives to consider:

* `Array.prototype.push()`: This method can be used to concatenate arrays, but it's less efficient than using native array methods like `reduce()` or `flat()`.
* Other libraries or frameworks may have their own optimized implementations for array concatenation, but this benchmark only tests built-in JavaScript features.

Overall, the goal of this benchmark is to compare the performance of different approaches to concatenate arrays in JavaScript and provide insights into the trade-offs between simplicity, readability, and performance.

Related benchmarks:

reduce.concat() vs flat() vs spread concat() (version: 0)

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

Comparing performance of: reduce + Array.prototype.concat vs Array.prototype.flat vs spread concat

Created: 3 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

spread concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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