Benchmark: lodash flatten vs array.flatMap corrected transform

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(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(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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap	118888.7 Ops/sec
lodash flatten	76160.8 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's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is defined by two test cases: `flatMap` and `lodash flatten`. Both tests aim to transform an array of objects by applying a transformation function to each object. The difference lies in the implementation used:

1. **Native JavaScript `flatMap`**: This method is used on native arrays. It returns a new array with the results of applying the provided function on every element.
2. **Lodash `flatten` and `map`**: Lodash provides a `flatten` function that flattens an array (in this case, an array of objects) into a one-dimensional array, followed by a `map` function that applies a transformation to each element.

**Comparison**

The benchmark compares the performance of:

1. Native JavaScript `flatMap`
2. Lodash `flatten` and `map`

**Pros and Cons**

### Native JavaScript `flatMap`

Pros:

* **Native performance**: This method is implemented in native code, which means it has direct access to hardware resources.
* **Efficient memory usage**: The native implementation likely uses efficient data structures and algorithms.

Cons:

* **Browser support limitations**: Since this method is not part of the standard array prototype, browsers may not have optimized implementations or may not support it at all.
* **Debugging challenges**: Implementing a custom `flatMap` function in JavaScript can be complex and prone to errors.

### Lodash `flatten` and `map`

Pros:

* **Cross-browser compatibility**: Since Lodash provides this functionality as a separate module, it is likely available on most browsers or Node.js environments.
* **Easy integration**: Using Lodash simplifies the implementation of the transformation function.

Cons:

* **Overhead from library usage**: Loading the entire Lodash library may introduce unnecessary overhead in terms of file size and execution time.
* **Additional dependencies**: The benchmark relies on Lodash, which means additional dependencies need to be considered when deploying or sharing this code.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, string manipulation, and more. In this context, the `flatten` function takes an array as input and returns a flattened version of it, while the `map` function applies a transformation to each element.

**Special JS feature: None**

There are no special JavaScript features or syntax used in these benchmark tests. Both implementations rely on standard JavaScript concepts like functions, arrays, and object manipulation.

**Other Alternatives**

If you need to perform array transformations without using Lodash, alternative approaches include:

1. **Using `forEach` and concatenating results**: This approach can be slower than the native `flatMap` method but is more widely supported.
2. **Implementing a custom flattening function**: You could write your own implementation for flattening an array of objects into a one-dimensional array.
3. **Utilizing modern JavaScript features like `flat()` and `map()`**: Some browsers support these methods natively, which could provide faster execution times.

Keep in mind that the performance difference between these alternatives might be negligible unless you're working with very large datasets or need to optimize for extreme performance.

Related benchmarks:

lodash flatten vs array.flatMap corrected transform (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):