Benchmark: reduce.concat() vs flat()

Tests:

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

Historical Performance Data aggregated from 179 community runs

Desktop Results:

Chrome 143 runs

reduce + Array.prototype.concat

11.2M/s

Array.prototype.flat

5.0M/s

Fastest: reduce + Array.prototype.concat (2.2x faster)

View exact numbers

✓ reduce + Array.prototype.concat: 11,152,334 ops/sec
• Array.prototype.flat: 4,978,286 ops/sec

Firefox 36 runs

Array.prototype.flat

14.3M/s

reduce + Array.prototype.concat

10.4M/s

Fastest: Array.prototype.flat (1.4x faster)

View exact numbers

✓ Array.prototype.flat: 14,337,806 ops/sec
• reduce + Array.prototype.concat: 10,385,108 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

reduce + Array.prototype.concat

18.6M/s

Array.prototype.flat

8.9M/s

View exact numbers

Test name	Executions per second
✓ reduce + Array.prototype.concat	18,594,164 Ops/sec
Array.prototype.flat	8,909,694 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark is designed to compare two approaches for flattening arrays: `Array.prototype.concat()` with the traditional method (`reduce()`), and the new ES6 spread operator (`flat()`). The goal is to determine which approach performs better in terms of execution speed.

**Options Compared**

Two options are compared:

1. **Traditional Method:** Using `Array.prototype.concat()` with a callback function to flatten the array.
2. **New ES6 Spread Operator:** Using the `flat()` method, introduced in ECMAScript 2017, to flatten the array.

**Pros and Cons of Each Approach**

**Traditional Method (concat()):**

* Pros:
	+ Widely supported by older browsers that don't support `flat()`.
	+ Can be easily debugged using traditional debugging tools.
* Cons:
	+ Can be slower than the new ES6 spread operator due to its method call overhead.

**New ES6 Spread Operator (flat()):**

* Pros:
	+ Faster execution speed, as it's a native method optimized for performance.
	+ More concise and readable code.
* Cons:
	+ May not work in older browsers that don't support the `flat()` method.
	+ Requires JavaScript version 7 or higher.

**Other Considerations**

* **Array Construction:** Both approaches create an empty array as the accumulator (`acc`) and concatenate/flatten elements to it. However, the traditional method uses `concat()`, while the new ES6 spread operator uses the spread operator (`...`).
* **Callback Function:** In the traditional method, a callback function is provided to flatten each element of the array. This adds overhead due to function calls.
* **Browser Support:** As mentioned earlier, older browsers may not support the `flat()` method.

**Library and Special JS Features**

In the individual test cases:

* The first case uses `Array.prototype.concat()`, which is a built-in JavaScript method.
* The second case uses `Array.prototype.flat()`, which is also a built-in JavaScript method introduced in ECMAScript 2017.
* There are no special JavaScript features used in these test cases.

**Alternatives**

Other alternatives for flattening arrays include:

1. **Using `reduce()`**: Similar to the traditional method, but with a more concise syntax.
2. **Using `map()`, `forEach()`, and concatenating results**: This approach creates an array of flattened values using `map()` or `forEach()`, then concatenates them using the spread operator (`...`).
3. **Using `flatten()` library functions**: There are libraries available that provide a more concise and readable way to flatten arrays, such as Lodash's `flatten()` function.

Keep in mind that these alternatives may have different performance characteristics and browser support compared to the traditional method and new ES6 spread operator.

reduce.concat() 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`

Created: 7 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

Historical Performance Data aggregated from 179 community runs

Desktop Results:

Chrome 143 runs

Firefox 36 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

reduce.concat() 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

Created: 7 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

Historical Performance Data aggregated from 179 community runs

Desktop Results:

Chrome 143 runs

Firefox 36 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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