Benchmark: lodash flatten vs array.flatMap

HTML Preparation code:

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

Tests:

flatMap
const data = [ [{ id: 1 }, { id: 2 }], [{ id: 3 }, { id: 4 }], [{ id: 5 }, { id: 6 }], [{ id: 7 }, { id: 8 }], [{ id: 9 }, { id: 10 }], [{ id: 11 }, { id: 12 }], [{ id: 13 }, { id: 14 }], [{ id: 15 }, { id: 16 }], [{ id: 17 }, { id: 18 }], [{ id: 19 }, { id: 20 }], [{ id: 21 }, { id: 22 }], [{ id: 23 }, { id: 24 }], [{ id: 25 }, { id: 26 }], [{ id: 27 }, { id: 28 }], [{ id: 29 }, { id: 30 }], [{ id: 31 }, { id: 32 }], [{ id: 33 }, { id: 34 }], [{ id: 35 }, { id: 36 }], [{ id: 37 }, { id: 38 }], [{ id: 39 }, { id: 40 }] ]; // Transformation function const transform = obj => ({ id: obj.id + 10 }); // Using JavaScript native flatMap const transformedAndFlattened = data.flatMap(subArray => subArray.map(transform)); console.log(transformedAndFlattened);
lodash flatten
const data = [ [{ id: 1 }, { id: 2 }], [{ id: 3 }, { id: 4 }], [{ id: 5 }, { id: 6 }], [{ id: 7 }, { id: 8 }], [{ id: 9 }, { id: 10 }], [{ id: 11 }, { id: 12 }], [{ id: 13 }, { id: 14 }], [{ id: 15 }, { id: 16 }], [{ id: 17 }, { id: 18 }], [{ id: 19 }, { id: 20 }], [{ id: 21 }, { id: 22 }], [{ id: 23 }, { id: 24 }], [{ id: 25 }, { id: 26 }], [{ id: 27 }, { id: 28 }], [{ id: 29 }, { id: 30 }], [{ id: 31 }, { id: 32 }], [{ id: 33 }, { id: 34 }], [{ id: 35 }, { id: 36 }], [{ id: 37 }, { id: 38 }], [{ id: 39 }, { id: 40 }] ]; // Transformation function const transform = obj => ({ id: obj.id + 10 }); // Using lodash map and flatten const transformedAndFlattened = _.flatten(data.map(subArray => subArray.map(transform))); console.log(transformedAndFlattened);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
lodash flatten

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0

Browser/OS: Opera 106 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	43871.8 Ops/sec
lodash flatten	49160.4 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 benchmark and analyze what's being tested.

**Benchmark Test**

The provided benchmark tests two approaches to flatten an array of arrays: using JavaScript native `flatMap()` method versus using Lodash's `flatten()` function.

**Native `flatMap()` Method**

The native `flatMap()` method is a part of the Array prototype in modern JavaScript. It takes a callback function as an argument, which is executed for each element in the array, and returns a new array with the results of the callback function applied to each element.

In this benchmark, the test case uses an array of arrays (`data`) with multiple inner arrays containing objects with an `id` property. The transformation function (`transform`) takes an object with an `id` property as input and returns a new object with an incremented `id`. The test uses both native `flatMap()` and Lodash's `flatten()` to apply this transformation to the array of arrays.

**Lodash's `flatten()` Function**

Lodash is a popular JavaScript utility library that provides a wide range of functions for common tasks, including array manipulation. The `flatten()` function takes an array as input and returns a new array with all elements flattened into a single array.

In this benchmark, the test case uses Lodash's `flatten()` to apply the same transformation as the native `flatMap()` method to the array of arrays.

**Comparison**

The two approaches differ in how they handle the inner arrays:

1. Native `flatMap()`: It returns a new array with the results of applying the callback function to each element in the original array, which means that all elements from the inner arrays are preserved.
2. Lodash's `flatten()`: It flattens all elements from all inner arrays into a single array, without preserving the individual elements.

**Pros and Cons**

**Native `flatMap()` Method**

Pros:

* Preserves individual elements from inner arrays
* May be more efficient for small to medium-sized datasets

Cons:

* Can be slower for very large datasets due to the creation of new arrays
* Does not flatten all elements into a single array, which may be desirable in some cases

**Lodash's `flatten()` Function**

Pros:

* Flattens all elements into a single array, which can be useful for data analysis or processing
* May be faster for very large datasets due to optimized implementation

Cons:

* Discards individual elements from inner arrays, which may not be desirable in some cases
* Requires an additional dependency (Lodash) and may introduce latency due to loading the library

**Other Considerations**

1. Memory usage: The native `flatMap()` method creates new arrays for each iteration, while Lodash's `flatten()` function uses a more efficient algorithm that flattens all elements into a single array.
2. Performance: The native `flatMap()` method may be slower due to the creation of new arrays, while Lodash's `flatten()` function is optimized for performance.

**Alternatives**

1. Other JavaScript libraries (e.g., Underscore.js) provide similar functions for flattening arrays.
2. Using a different programming language or library that provides built-in support for array manipulation may be an alternative approach.

In summary, the benchmark tests two approaches to flatten an array of arrays: using JavaScript native `flatMap()` method versus using Lodash's `flatten()` function. The choice between these approaches depends on the specific use case and requirements, including preserving individual elements, handling large datasets, and minimizing latency due to dependencies.

Related benchmarks:

lodash flatten vs array.flatMap (version: 0)

lodash flatten vs native array flatMap

Comparing performance of: flatMap vs lodash flatten

Created: 2 years ago by: Guest

Jump to the latest result

flatMap

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):