Benchmark: flatMap vs filter.map vs reduce to Object

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

filter().map()
Object.fromEntries(arr.filter(x => x !== 0 && x % 3 && x !== 666).map(x => [x, Math.round(x * Math.sqrt(x/100))]))
flatMap()
Object.fromEntries(arr.flatMap(x => (x !== 0 && x % 3 && x !== 666) ? [[x, Math.round(x * Math.sqrt(x/100))]] : []))
reduce()
arr.reduce((acc, x) => { if (x !== 0 && x % 3 && x !== 666) { acc[x] =Math.round(x * Math.sqrt(x/100)) } return acc }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
reduce()

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/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	39.4 Ops/sec
flatMap()	38.2 Ops/sec
reduce()	51.5 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 benchmark and explain what's being tested.

**Benchmark Definition**
The benchmark is testing three different approaches to create an object from an array:

1. `Object.fromEntries()`
2. `filter().map()`
3. `flatMap()`

**Options Compared**

The three options are compared in terms of their performance, efficiency, and complexity.

**Pros and Cons:**

* **`Object.fromEntries()`**:
	+ Pros: Simple, efficient, and modern approach.
	+ Cons: Requires a minimum of 2 elements for the array (the key-value pair) to be used as an entry point. It also requires modern browsers that support this method.
* **`filter().map()`**:
	+ Pros: Widely supported, easy to understand, and suitable for most use cases.
	+ Cons: Can lead to performance issues if the filters or mapping functions are computationally expensive. Also, it may create intermediate arrays, which can be memory-intensive.
* **`flatMap()`**:
	+ Pros: Efficient, flexible, and suitable for reducing arrays into objects with the `Object.fromEntries()` method.
	+ Cons: Not as widely supported as `filter().map()`. Its behavior depends on the return type of the mapping function.

**Library/Functionality Used**

* None explicitly mentioned. However, `Object.fromEntries()` relies on modern browser support and a standard JavaScript method for creating an object from entries.
* `flatMap()` is part of the Array prototype since ECMAScript 2019.

**Special JS Features/Syntax**
None are explicitly used in this benchmark.

**Other Considerations**

The benchmark is designed to provide insight into the performance differences between these three approaches, making it useful for developers who need to choose an optimal method for their specific use cases. By understanding these differences, developers can optimize their code for better performance and memory usage.

**Alternatives**

If you're looking for alternative approaches or methods, consider:

* Using a library like `lodash` that provides a `mapValues()` function for converting arrays into objects.
* Utilizing built-in functions like `Array.prototype.reduce()` for creating objects from arrays with the specified key-value pairs.
* Implementing custom logic using loops and object literal syntax.

These alternatives might offer different trade-offs in terms of performance, complexity, or compatibility across browsers.

Related benchmarks:

flatMap vs filter.map vs reduce to Object (version: 0)

flatMap vs filter map

Comparing performance of: filter().map() vs flatMap() vs reduce()

Created: 2 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

reduce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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