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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Other 6 runs

lodash flatten

19K/s

flatMap

17K/s

Fastest: lodash flatten (1.1x faster)

View exact numbers

✓ lodash flatten: 19,364 ops/sec
• flatMap: 16,860 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
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

lodash flatten

49K/s

flatMap

44K/s

View exact numbers

Test name	Executions per second
✓ lodash flatten	49,160 Ops/sec
flatMap	43,872 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.

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

Go to the latest result

flatMap

lodash flatten

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Other 6 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 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

Go to the latest result

flatMap

lodash flatten

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Other 6 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: `flatMap vs lodash flatten`