Benchmark: Lodash flatten vs native js

HTML Preparation code:

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

Script Preparation code:

const arr = [1, [2, [3, [4]], 5]];

Tests:

native 1
[1, [2, [3, [4]], 5]].reduce( (a, b) => a.concat(b), [])
native 2
[].concat(...[1, [2, [3, [4]], 5]])
Native(ES2019)
[1, [2, [3, [4]], 5]].flat()
flatMap
[1, [2, [3, [4]], 5]].flatMap(number => number)
_.flatten
_.flatten([1, [2, [3, [4]], 5]])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
native 1
native 2
Native(ES2019)
flatMap
_.flatten

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
native 1	12662251.0 Ops/sec
native 2	9515508.0 Ops/sec
Native(ES2019)	23843726.0 Ops/sec
flatMap	19679622.0 Ops/sec
_.flatten	8831565.0 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's being tested in this benchmark.

The goal of this benchmark is to compare the performance of three different methods for flattening an array with nested arrays:

1. The native JavaScript method, which uses the `reduce()` and `concat()` methods.
2. The `flatMap()` method (introduced in ES2019).
3. A custom implementation using Lodash's `flatten()` function.

The benchmark creates a test case with an array of depth 4: `[1, [2, [3, [4]], 5]]`. It then runs this benchmark multiple times on different browsers and platforms to measure the execution time.

Let's examine each option:

**Native JavaScript (Methods 1 & 2)**

* These methods use `reduce()` and `concat()` to flatten the array. The idea is that `reduce()` will iterate over the array, applying a callback function to each element, while `concat()` will concatenate the results.
* Pros:
	+ No external dependencies required.
	+ Easy to implement.
* Cons:
	+ Can be slower than other methods due to the overhead of `reduce()` and concatenation.

**Native JavaScript (Method 3)**

* This method uses the spread operator (`...`) to flatten the array. The idea is that spreading an array creates a new array with all elements from the original array.
* Pros:
	+ Faster than the previous native methods, as it avoids the overhead of `reduce()` and concatenation.
	+ Still a simple implementation.
* Cons:
	+ Only available in ES2019 and later.

**Lodash (`flatten()` function)**

* This method uses Lodash's built-in `flatten()` function to flatten the array. The idea is that Lodash provides an optimized implementation for flattening arrays.
* Pros:
	+ Faster than native methods, as it leverages Lodash's optimized implementation.
	+ No external dependencies required (besides Lodash).
* Cons:
	+ Adds an extra dependency to the benchmark.

Now, let's examine some other alternatives that could be used:

* **Array.prototype.flat()`**: This is a newer method introduced in ES2020. It provides a more efficient way of flattening arrays.
* **Array.prototype.flatMap()`**: Similar to `flatMap()`, but returns a new array with flattened sub-arrays.

The test cases show the performance results for each method, which can be used to identify the fastest approach for specific use cases.

In general, the choice of method depends on factors like:

* Performance requirements
* Browser support (e.g., ES2019)
* Code readability and maintainability

It's worth noting that Lodash is a popular library among developers, but it may not be suitable for all projects due to its additional dependency. The native methods, while slower, are simpler and more self-contained.

Related benchmarks:

Lodash flatten vs native js (version: 0)

Comparing performance of: native 1 vs native 2 vs Native(ES2019) vs flatMap vs _.flatten

Created: 5 years ago by: Guest

Jump to the latest result

native 1

native 2

Native(ES2019)

flatMap

_.flatten

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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