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

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, {}], 5, [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) => Array.isArray(curr) ? [...acc, ...curr] : [...acc, curr] , []);
reduce + push
params.reduce((acc, curr) => { Array.isArray(curr) ? acc.push(...curr) : acc.push(curr); return acc; }, []);
lodash.flatten
_.flatten(params)
destructuring
[ ...params[0], ...params[1], params[2], ...params[3], params[4], ...params[5], ...params[6] ]

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: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Array.flat	3975374.8 Ops/sec
reduce + concat	2153330.8 Ops/sec
reduce + destructure	5517188.0 Ops/sec
reduce + push	10431564.0 Ops/sec
lodash.flatten	8893849.0 Ops/sec
destructuring	20469772.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**What is being tested?**

The website measures the performance of different approaches to flatten an array in JavaScript. The test case uses a predefined `params` array, which contains various types of values: arrays, objects, booleans, numbers, and null/undefined.

**Comparison options**

There are four primary comparison options:

1. **Array.flat()**: A built-in method that returns a new flattened array.
2. **reduce + concat**: Using the `reduce()` method with an accumulator array and concatenating values using the `concat()` method.
3. **reduce + destructure**: Similar to the previous option, but uses destructuring assignment to extract values from arrays.
4. **reduce + push**: Using the `reduce()` method with an accumulator array and pushing new values onto it.

**Pros and Cons of each approach**

Here's a brief analysis:

* **Array.flat()**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: May not work as expected for nested arrays with complex structures.
* **reduce + concat**: 
	+ Pros: Can handle complex arrays and objects, but may be slower due to concatenation overhead.
	+ Cons: Requires more memory allocation and copying, making it less efficient than flat().
* **reduce + destructure**:
	+ Pros: Similar to the previous option, with the added benefit of using destructuring for better code readability.
	+ Cons: May require more complex setup and may not be supported in older browsers or environments.
* **reduce + push**: 
	+ Pros: Can handle complex arrays and objects, similar to the previous options, but with a different approach.
	+ Cons: Requires more memory allocation and copying, making it less efficient than flat().

**Lodash.flatten**

The test case also includes Lodash's `flatten()` method, which is a utility function for flattening arrays. While this option provides an additional benchmarking point, its performance may not be as competitive as the native JavaScript approaches.

**Destructuring 2**

This test case seems to be a variation of the "reduce + destructure" approach, with some differences in the destructuring syntax. The results will likely be similar, but it's worth noting that this option might have slightly different performance characteristics due to the variations in implementation.

**Other considerations**

When working with arrays and objects in JavaScript, it's essential to consider factors like:

* Performance: Different approaches can have varying overheads, making some more efficient than others for specific use cases.
* Code readability: Some methods, like destructuring assignment, provide better code organization and maintainability.
* Browser support: Older browsers or environments might not support certain features or functions.

**Alternatives**

Other alternatives to flatten arrays in JavaScript include:

* Using `Array.prototype.map()` with a callback function
* Employing libraries like Ramda or Underscore.js, which offer more comprehensive array manipulation capabilities

However, it's worth noting that these approaches may have different performance characteristics and might not be as optimized for production use cases.

By analyzing the test results and considering the pros and cons of each approach, you can make informed decisions about which method to use depending on your specific requirements.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Array.flat

reduce + concat

reduce + destructure

reduce + push

lodash.flatten

destructuring

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):