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

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)

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

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

15.0M/s

lodash.flatten

13.3M/s

reduce + concat

4.5M/s

Array.flat

3.4M/s

reduce + destructure

3.2M/s

View exact numbers

Test name	Executions per second
✓ reduce + push	15,029,088 Ops/sec
lodash.flatten	13,318,659 Ops/sec
reduce + concat	4,523,968 Ops/sec
Array.flat	3,426,088 Ops/sec
reduce + destructure	3,194,858 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches for array flattening. The provided JSON represents a benchmark with four test cases: `Array.flat`, `reduce + concat`, `reduce + destructure`, `reduce + push`, and `lodash.flatten`.

**Benchmark Definition**

The benchmark definition in the JSON is:

"Name": "Array.flat vs (reduce + concat) vs (reduce + destructure) vs (reduce + push) vs lodash.flatten"

This indicates that the benchmark compares the performance of five different approaches for flattening arrays.

**Options Compared**

1. **Array.flat**: A built-in JavaScript method for flattening arrays.
2. **reduce + concat**: Using the `reduce()` method to concatenate arrays using the `concat()` method.
3. **reduce + destructure**: Using the `reduce()` method to flatten arrays by destructuring elements.
4. **reduce + push**: Using the `reduce()` method to flatten arrays by pushing elements onto an accumulator array.
5. **lodash.flatten**: A utility function from the Lodash library for flattening arrays.

**Pros and Cons of Different Approaches**

1. **Array.flat**: Pros:
	* Efficient and concise syntax.
	* Built-in JavaScript method, ensuring compatibility across browsers.
	Cons:
	* May not work as expected with nested arrays or arrays with non-numeric keys.
2. **reduce + concat**: Pros:
	* Allows for manual control over the flattening process.
	Cons:
	* Inefficient due to repeated concatenations of arrays.
3. **reduce + destructure**: Pros:
	* Convenient syntax for extracting elements from arrays.
	Cons:
	* Limited support for nested arrays or arrays with non-numeric keys.
4. **reduce + push**: Pros:
	* Similar to `reduce + concat`, but avoids unnecessary array concatenations.
	Cons:
	* May be slower due to repeated pushes onto an accumulator array.
5. **lodash.flatten**: Pros:
	* Robust and flexible implementation for flattening arrays, including nested arrays and arrays with non-numeric keys.
	Cons:
	* Adds dependency on the Lodash library.

**Library: Lodash**

The `lodash.flatten` option uses the `flatten()` function from the Lodash library. This utility function is designed to flatten arrays and objects in a flexible and efficient manner.

**Special JS Feature or Syntax**

None mentioned in this benchmark.

**Other Alternatives**

If you're looking for alternative approaches to flattening arrays, consider:

* Using `Array.prototype.flat()` with options (e.g., `{ depth: 2 }`) to control the number of nested levels.
* Implementing a custom flatten function using `Array.prototype.reduce()`.
* Utilizing third-party libraries like Ramda or Immutable.js for functional programming and array manipulation.

Keep in mind that these alternatives may have varying performance characteristics, trade-offs, and compatibility issues depending on your use case.

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

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

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

lodash.flatten

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 (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

lodash.flatten

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`