Benchmark: reduce.concat() vs flat() vs [].concat(...arr)

Tests:

reduce + Array.prototype.concat + [].concat
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.reduce((acc, val) => acc.concat(val), []); var otherother = [].concat(...params);
Array.prototype.flat
var params = [[1, 2, params], [ "hello", true, 7 ]]; var other = params.flat();
[].concat
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var otherother = [].concat(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat + [].concat
Array.prototype.flat
[].concat

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Definition**
The test compares three different approaches for concatenating arrays: `reduce.concat()`, `flat()`, and `[] .concat(...arr)` (the latter being the traditional way of using `concat()` method with spread operator).

**Options Compared**

1. **`reduce.concat()`**: This approach uses the `reduce()` method to concatenate two arrays together, where the initial value is an empty array (`[]`) and each element in the second array is passed as a callback argument to `reduce()`. The function returns the concatenated result.
2. **`Array.prototype.flat()`**: This approach uses the `flat()` method, which was introduced in ES6, to flatten an array of arrays into a single array. In this test, it's used without any additional arguments.
3. **`[] .concat(...arr)`**: This approach uses the spread operator (`...`) to pass each element in the array as separate arguments to `concat()`, effectively flattening and concatenating all elements.

**Pros and Cons**

* **`reduce.concat()`**:
	+ Pros: Can be more efficient if you need to concatenate arrays of different lengths.
	+ Cons: May have performance issues with large arrays due to the overhead of `reduce()` method calls. Also, not as readable or intuitive as other approaches.
* **`Array.prototype.flat()`**:
	+ Pros: Efficient and modern way to flatten arrays. Fastest among the three options in most cases.
	+ Cons: Requires at least ES6 support (or use polyfills) and may not be as widely supported as other methods.
* **`[] .concat(...arr)`**:
	+ Pros: Widely supported, readable, and intuitive way to concatenate arrays. Works well for small arrays.
	+ Cons: May be slower than `flat()` or `reduce.concat()` due to the overhead of multiple `concat()` calls.

**Special JS Features/Syntax**

* **`...` spread operator**: Introduced in ES6, allows passing elements as separate arguments to functions (like `concat()`) or creating new arrays from existing ones.
* **`Array.prototype.flat()`**: Introduced in ES6, flattens an array of arrays into a single array.

**Library/Function Used**

None. These are built-in JavaScript methods and functions.

**Considerations**

When choosing the best approach, consider:

* Performance requirements: `flat()` is usually the fastest option.
* Browser support: If you need to support older browsers, use a polyfill for `flat()`.
* Code readability and maintainability: Use `[] .concat(...arr)` for small arrays or when code clarity is important.

**Alternatives**

If you don't have access to modern JavaScript features like `flat()` or if you're using an older browser that doesn't support it, you can use other approaches, such as:

* Using a custom implementation of `reduce.concat()` with a loop.
* Using the `Array.prototype.reduce.call()` method to achieve similar results.

However, these alternatives may be slower and less efficient than the modern methods used in this benchmark.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat + [].concat	3254338.5 Ops/sec
Array.prototype.flat	934972.7 Ops/sec
[].concat	6568447.0 Ops/sec

Related benchmarks:

reduce.concat() vs flat() vs [].concat(...arr) (version: 0)

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

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

Created: 2 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat + [].concat

Array.prototype.flat

[].concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):