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

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];

Tests:

Array.flat
params.flat();
reduce + concat
params.reduce((acc, val) => acc.concat(val), []);
reduce + destructure
params.reduce((acc, curr) => [...acc, ...curr], []);
reduce + push
params.reduce((acc, curr) => (acc.push(...curr), acc), []);
lodash.flatten
_.flatten(params)
destructuring
[ ...params[0], ...params[1], ...params[2], ...params[3], ...params[4] ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.flat
reduce + concat
reduce + destructure
reduce + push
lodash.flatten
destructuring

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

lodash.flatten

12.0M/s

destructuring

8.1M/s

reduce + concat

4.4M/s

Array.flat

4.1M/s

reduce + push

1.4M/s

reduce + destructure

1.1M/s

View exact numbers

Test name	Executions per second
✓ lodash.flatten	11,986,697 Ops/sec
destructuring	8,094,135 Ops/sec
reduce + concat	4,387,020 Ops/sec
Array.flat	4,080,629 Ops/sec
reduce + push	1,415,444 Ops/sec
reduce + destructure	1,140,488 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided JSON.

**Benchmark Description**

The benchmark measures the performance of different approaches to flatten an array of arrays. The test case uses an array `params` that contains multiple sub-arrays with various data types, including numbers, strings, booleans, null, undefined, and objects.

**Options Compared**

The benchmark compares six different approaches:

1. **Array.flat()**: A built-in JavaScript method that flattens an array of arrays.
2. **reduce + concat**: Using the `reduce()` method to concatenate sub-arrays using the `concat()` method.
3. **reduce + destructure**: Using the `reduce()` method and destructuring syntax (`...`) to flatten the sub-arrays.
4. **reduce + push**: Using the `reduce()` method and pushing elements onto an array using the `push()` method.
5. **lodash.flatten**: Using the Lodash library's `flatten()` function to flatten the arrays.
6. **destructuring**: Using the spread operator (`...`) to flatten the sub-arrays.

**Pros and Cons of Each Approach**

1. **Array.flat()**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: May not be as flexible or performant for very large arrays.
2. **reduce + concat**:
	* Pros: Flexible, can handle various data types, and easy to implement.
	* Cons: Can be slower due to the overhead of concatenating sub-arrays.
3. **reduce + destructure**:
	* Pros: Similar performance to `Array.flat()` with added flexibility.
	* Cons: May require more memory due to the creation of intermediate arrays.
4. **reduce + push**:
	* Pros: Simple and efficient, similar to `Array.flat()`.
	* Cons: May not be as flexible or performant for very large arrays.
5. **lodash.flatten**:
	* Pros: Robust and widely tested, handles various data types and edge cases.
	* Cons: Adds an external dependency (Lodash), may be slower due to the overhead of function calls.
6. **destructuring**:
	* Pros: Simple, flexible, and easy to implement.
	* Cons: May not be as efficient or performant for very large arrays.

**Special JS Features**

The benchmark uses the spread operator (`...`) in some test cases, which is a modern JavaScript feature introduced in ECMAScript 2018. This syntax allows for concise and expressive array flattening.

**Other Considerations**

* The benchmark uses Chrome Mobile 120 as the browser, which may affect performance due to hardware and software limitations.
* The benchmark is run on Android devices, which may have different performance characteristics compared to desktop or other mobile platforms.

**Alternative Approaches**

Some alternative approaches that are not tested in this benchmark include:

* Using `map()` instead of `reduce()`
* Using `Array.prototype.flat.call()` instead of `Array.prototype.flat()`
* Implementing a custom flattening function using loops and conditional statements
* Using third-party libraries like Ramda or Immutable.js for array manipulation

Note that these alternatives may offer different trade-offs in terms of performance, flexibility, and memory usage.

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

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

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

lodash.flatten

destructuring

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) vs lodash.flatten vs destructuring (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

lodash.flatten

destructuring

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 vs lodash.flatten vs destructuring`