Benchmark: lodash flattenDeep vs js native

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Script Preparation code:

var elements = [1, [2, [3, [4]], 5]];

const flattenDeep = (arr) => Array.isArray(arr)
  ? arr.reduce( (a, b) => a.concat(flattenDeep(b)) , [])
  : [arr];

const flattenDeepL = (arr) => arr.flatMap((subArray, index) => Array.isArray(subArray) ? flattenDeepL(subArray) : subArray);

Tests:

_.flattenDeep
_.flattenDeep(elements);
// Native
const flattenDeep = (arr) => Array.isArray(arr) ? arr.reduce( (a, b) => a.concat(flattenDeep(b)) , []) : [arr]; flattenDeep(elements)
Native(ES2019)
elements.flat(Infinity)
native 2
const flattenDeep = (arr) => arr.flatMap((subArray, index) => Array.isArray(subArray) ? flattenDeep(subArray) : subArray) flattenDeep(elements)

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

_.flattenDeep

6.7M/s

Native(ES2019)

5.8M/s

native 2

1.3M/s

// Native

1.1M/s

Fastest: _.flattenDeep (5.9x faster)

View exact numbers

✓ _.flattenDeep: 6,729,920 ops/sec
• Native(ES2019): 5,801,457 ops/sec
• native 2: 1,279,577 ops/sec
• // Native: 1,138,194 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
_.flattenDeep
// Native
Native(ES2019)
native 2

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

_.flattenDeep

18.8M/s

Native(ES2019)

13.5M/s

native 2

4.6M/s

// Native

4.3M/s

View exact numbers

Test name	Executions per second
✓ _.flattenDeep	18,807,174 Ops/sec
Native(ES2019)	13,471,334 Ops/sec
native 2	4,616,020 Ops/sec
// Native	4,307,239 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches to flatten a deeply nested array in JavaScript:

1. **Lodash `flattenDeep`**: This is a library function that flattens an array recursively.
2. **Native ES2019 `flat` method**: This is a built-in JavaScript method introduced in ECMAScript 2019, which can be used to flatten arrays.

**Options compared:**

The test compares the performance of three different approaches:

1. **Lodash `flattenDeep`**: The original implementation provided by MeasureThat.net.
2. **Native ES2019 `flat` method**: A built-in JavaScript method that can be used to flatten arrays.
3. **Alternative implementation**: Another way of implementing `flattenDeep` using the `flatMap` method.

**Pros and cons:**

1. **Lodash `flattenDeep`**:
	* Pros: Widely supported, well-documented, and reliable.
	* Cons: Adds an external dependency (Lodash), which may not be desirable for all use cases.
2. **Native ES2019 `flat` method**:
	* Pros: Built-in, no additional dependencies required.
	* Cons: Requires support for ES2019, and its performance may vary depending on the browser.
3. **Alternative implementation (native 2)**:
	* Pros: No external dependencies required, uses modern JavaScript features.
	* Cons: May have a steeper learning curve due to the use of `flatMap`, which is not as well-known as `reduce`.

**Library and syntax used in test cases:**

The test case using Lodash is loading the library from a CDN (`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js`). The native ES2019 implementation uses the built-in `flat` method.

There are no special JavaScript features or syntax mentioned in the provided code snippet.

**Other alternatives:**

If you need to flatten arrays, other alternatives to Lodash's `flattenDeep` include:

1. **Array.prototype.flat()**: This method is part of the ECMAScript 2019 standard and can be used to flatten arrays.
2. **lodash-es**: A smaller and faster version of Lodash that only includes the essential functions.
3. **A simpler implementation using recursion or iteration**: Depending on your specific requirements, you may want to implement a custom flattening function using basic JavaScript features like `for` loops or recursive functions.

Keep in mind that these alternatives may have their own pros and cons, which are not discussed here for brevity.

lodash flattenDeep vs js native (version: 0) Benchmark.js

Comparing performance of: `_.flattenDeep vs // Native vs Native(ES2019) vs native 2`

Created: 5 years ago by: Guest

Go to the latest result

_.flattenDeep

// Native

Native(ES2019)

native 2

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash flattenDeep vs js native (version: 0) Benchmark.js

Comparing performance of: _.flattenDeep vs // Native vs Native(ES2019) vs native 2

Created: 5 years ago by: Guest

Go to the latest result

_.flattenDeep

// Native

Native(ES2019)

native 2

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 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: `_.flattenDeep vs // Native vs Native(ES2019) vs native 2`