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

Tests:

Array.flat
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.flat();
reduce + concat
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, val) => acc.concat(val), []);
reduce + destructure
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, curr) => [...acc, ...curr], []);
reduce + push
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, curr) => (acc.push(...curr), acc), []);

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

reduce + push

6.5M/s

reduce + destructure

4.6M/s

reduce + concat

3.0M/s

Array.flat

2.2M/s

Fastest: reduce + push (3.0x faster)

View exact numbers

✓ reduce + push: 6,536,134 ops/sec
• reduce + destructure: 4,618,496 ops/sec
• reduce + concat: 2,967,418 ops/sec
• Array.flat: 2,182,923 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
Array.flat
reduce + concat
reduce + destructure
reduce + push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

reduce + push

10.1M/s

reduce + destructure

5.6M/s

reduce + concat

3.6M/s

Array.flat

3.5M/s

View exact numbers

Test name	Executions per second
✓ reduce + push	10,099,776 Ops/sec
reduce + destructure	5,598,236 Ops/sec
reduce + concat	3,625,401 Ops/sec
Array.flat	3,532,410 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The test compares four different approaches for flattening an array of arrays:

1. `Array.flat()`
2. `(reduce + concat)`
3. `(reduce + destructure)`
4. `(reduce + push)`

Let's break down each approach and its pros and cons:

**1. `Array.flat()`**

Pros:

* Simple, concise, and easy to read.
* Native JavaScript method, so it should be fast.

Cons:

* Only available in modern browsers and Node.js versions (ECMAScript 2019+).
* May not work as expected with nested arrays of varying depths.

**2. `(reduce + concat)`**

Pros:

* Works in older browsers and Node.js versions.
* Can handle arrays of any depth.

Cons:

* Requires using the `concat()` method, which can be slower than native methods.
* More verbose code compared to other approaches.

**3. `(reduce + destructure)`**

Pros:

* Similar performance to the native `Array.flat()` method.
* Works in older browsers and Node.js versions.

Cons:

* Requires destructuring objects, which can be slower than native methods.
* May not work as expected with arrays containing non-object values.

**4. `(reduce + push)`**

Pros:

* Can handle arrays of any depth.
* Works in older browsers and Node.js versions.

Cons:

* Requires using the `push()` method, which can be slower than native methods.
* More verbose code compared to other approaches.

Other considerations:

* The test uses a fixed array of nested arrays with varying depths, which may not represent real-world scenarios.
* The benchmark only measures performance on mobile devices, which may not be representative of desktop or server-side performance.
* The use of `const` and `let` keywords is present throughout the benchmark code, but their impact on performance is negligible.

Now, let's take a closer look at the individual test cases:

Each test case consists of a single JavaScript method call that flattens the input array. The methods are implemented using different approaches as mentioned earlier.

Here's an example of how the `Array.flat()` approach would be written for one of the test cases:
```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
console.log(params.flat());
```
And here's an example of how the `(reduce + concat)` approach would be written for one of the test cases:
```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
let result = [];
params.reduce((acc, val) => acc.concat(val), []);
console.log(result);
```
Other alternatives to these approaches include:

* Using `Array.prototype.map()` or `Array.prototype.forEach()` in combination with `Array.prototype.flat()`
* Implementing a custom flattening algorithm using bitwise operations or other low-level techniques
* Using libraries like Lodash or Underscore.js, which provide utility functions for array manipulation

Array.flat vs (reduce + concat) vs (reduce + destructure) vs (reduce + push) (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.flat vs (reduce + concat) vs (reduce + destructure) vs (reduce + push) (version: 0)

Comparing performance of: Array.flat vs reduce + concat vs reduce + destructure vs reduce + push

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `Array.flat vs reduce + concat vs reduce + destructure vs reduce + push`