Benchmark: reduce.concat() vs reduce + destructure vs flat()

Tests:

reduce + Array.prototype.concat
var params = [[ 1, 2 ], [ "hello", true, 7 ], [null, undefined, {}]]; var other = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
var params = [[ 1, 2 ], [ "hello", true, 7 ], [null, undefined, {}]]; var other = params.flat();
reduce + destructure
var params = [[ 1, 2 ], [ "hello", true, 7 ], [null, undefined, {}]]; var other = params.reduce((acc, curr) => [...acc, ...curr], []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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/99.0.4844.84 Safari/537.36

Browser/OS: Chrome 99 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	2430857.0 Ops/sec
Array.prototype.flat	703831.2 Ops/sec
reduce + destructure	3644162.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, `reduce.concat() vs reduce + destructure vs flat()`, compares the performance of three different approaches to concatenate arrays in JavaScript:

1.  **`reduce()` with `concat()`**: This is an older approach that uses the `Array.prototype.concat()` method.
2.  **`reduce()` with destructuring**: This approach uses a new ES6 feature called "spread operator" (also known as "rest parameter") to destructure the array elements and concatenate them into a new array.
3.  **`flat()`**: This is a newer method introduced in ECMAScript 2019, which flattens an array of arrays into a single array.

**Options Comparison**

Here's a brief overview of each option:

*   **`reduce()` with `concat()`**:
    *   **Pros**: Widely supported and easy to understand.
    *   **Cons**: Less efficient than newer approaches due to the overhead of concatenating arrays using `Array.prototype.concat()`.
*   **`reduce()` with destructuring** (using spread operator):
    *   **Pros**: More concise, modern approach that leverages ES6 features for better performance and readability.
    *   **Cons**: May not be as widely supported in older browsers or environments without ES6 support.
*   **`flat()`**:
    *   **Pros**: Most efficient approach, optimized for performance by avoiding array concatenation overhead.
    *   **Cons**: Requires ECMAScript 2019+ support and may have varying levels of compatibility across browsers.

**Library Usage**

In the provided benchmark definition, there are no explicit library references. However, JavaScript's built-in `Array.prototype` methods (`concat()`, `flat()`) are used in each test case.

**Special JS Features/Syntax**

The test cases use ES6 features such as:

*   **Destructuring**: The spread operator (three dots) is used to destructure array elements into separate variables.
*   **Rest parameter syntax**: The `(acc, curr)` part of the `reduce()` callback function syntax is a rest parameter that captures all remaining arguments, allowing for more concise code.

**Benchmark Preparation Code**

There is no specific preparation code provided in the benchmark definition or test cases. It's assumed that the JavaScript engines being tested will execute the given code snippets without additional setup.

**Alternatives**

Some alternative approaches to concatenating arrays could be considered:

*   Using `Array.prototype.push()` and assigning the result to a variable.
*   Using `Array.prototype.map()` with an identity function (`x => x`) followed by `Array.prototype.concat()`.
*   Using other custom libraries or frameworks that provide optimized array concatenation methods.

Related benchmarks:

reduce.concat() vs reduce + destructure vs flat() (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 reduce + destructure

Created: 2 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

reduce + destructure

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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