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), []);

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

Test name	Executions per second
Array.flat	3532410.0 Ops/sec
reduce + concat	3625401.0 Ops/sec
reduce + destructure	5598235.5 Ops/sec
reduce + push	10099776.0 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

Related benchmarks:

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

Jump to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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