Benchmark: lodash flatten vs reduce array

HTML Preparation code:

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

Script Preparation code:

myList = [];

for (let i = 0; i < 100; i++) {
  const arr = [];
  for (var n = 0; n < 100; n++) {
    arr.push({ ['key' + n]: n });
  }
  myList.push(arr)
}

Tests:

flatten
_.flatten(myList)
reduce
myList.reduce((acc, item) => { return [...acc, ...item]; }, [])

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

flatten

33K/s

reduce

3K/s

Fastest: flatten (12.1x faster)

View exact numbers

✓ flatten: 33,137 ops/sec
• reduce: 2,741 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
flatten
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

flatten

33K/s

reduce

2K/s

View exact numbers

Test name	Executions per second
✓ flatten	33,448 Ops/sec
reduce	2,229 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Purpose**

The benchmark measures the performance difference between two approaches to flatten an array using JavaScript: `lodash.flatten()` and `Array.prototype.reduce()`. The test case creates a large array with 100 nested arrays, each containing 100 objects. This setup is designed to simulate a scenario where you need to process large datasets.

**Options Compared**

The benchmark compares the performance of two options:

1. **`_.flatten(myList)`**: This uses the `lodash.flatten()` function from the Lodash library. Lodash is a popular JavaScript utility library that provides a lot of helper functions for common tasks.
2. **`myList.reduce((acc, item) => {\r\n  return [...acc, ...item];\r\n}, [])`**: This uses the `Array.prototype.reduce()` method to flatten the array. The callback function takes each item in the array and returns a new array with all items from the original array and the current item.

**Pros and Cons of Each Approach**

**`_.flatten(myList)`:**

Pros:

* Written by a third-party library, so you don't have to maintain it
* Typically optimized for performance

Cons:

* Adds an extra dependency (Lodash) that may not be available in all environments
* May introduce some overhead due to the function call and object creation

**`Array.prototype.reduce()`:**

Pros:

* No additional dependencies required
* Can be highly performant if implemented correctly

Cons:

* Requires manual implementation, which can lead to errors or inefficiencies if not done correctly
* Can be slower than `lodash.flatten()` due to the overhead of function calls and object creation

**Other Considerations**

Both approaches have some nuances to consider:

* **Lodash's flatten()**: When flattening an array with a nested structure, Lodash will create a new array with all elements from the original arrays. This can lead to increased memory usage.
* **Array.prototype.reduce()**: The reduce() method accumulates values in an accumulator array (`acc`). If not implemented carefully, this can lead to increased memory usage or slow performance.

**Library and Syntax Explanation**

In this benchmark, `lodash` is used as a library to provide the `flatten()` function. This library is widely used and maintained by the Lodash team.

The `reduce()` syntax is a built-in JavaScript method that's been around since ECMAScript 2015 (ES6). It's a versatile method for processing arrays in a declarative way.

**Other Alternatives**

For flattening arrays, other alternatives include:

* **`Array.prototype.flatMap()`**: Introduced in ES2019, this method is similar to `reduce()`, but it returns a new array without accumulating values.
* **Custom implementations using `forEach()` or `map()`**: You can write your own flatten function using these methods, but keep in mind the potential pitfalls mentioned earlier.

For general-purpose utility functions like Lodash's `flatten()`, you may also consider other libraries like:

* **`underscore.js`**: Another popular JavaScript utility library that provides similar functionality.
* **`ramda`**: A functional programming library that includes various array and collection manipulation utilities, including flatten.

lodash flatten vs reduce array (version: 0) Benchmark.js

Comparing performance of: `flatten vs reduce`

Created: 6 years ago by: Guest

Go to the latest result

flatten

reduce

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 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 reduce array (version: 0) Benchmark.js

Comparing performance of: flatten vs reduce

Created: 6 years ago by: Guest

Go to the latest result

flatten

reduce

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 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: `flatten vs reduce`