Benchmark: Reduce vs Flatmap 10000 items

Script Preparation code:

let id = 0

function generateId() {
    id = id + 1
    return id
}

function generateOject(id) {
    changes = []
    for (let i = 0; i < 10; i++) {
        changes.push({
            id,
            oldValue: i * 10,
            newValue: i * 20
        })
    }
    return {
        id,
        name: `Object#${id}`,
        changes
    }
}

window.lookup = {};

for (let i = 0; i < 10000 ; i++) {
    window.lookup[generateId()] = generateOject();
}

Tests:

Reduce
const uniqNodes = new Set(); const changes = Object.values(window.lookup).reduce((changes, node) => { if (!uniqNodes.has(node)) { uniqNodes.add(node); return changes.concat(node.changes) } return changes }, []);
Flatmap
const uniqNodes = new Set(); Object.entries(window.lookup).forEach(([_identifier, node]) => { if (!uniqNodes.has(node)) { uniqNodes.add(node); } }); const changes = Array.from(uniqNodes).flatMap(node => node.changes)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Flatmap

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 126 on Android

View result in a separate tab

Test name	Executions per second
Reduce	0.4 Ops/sec
Flatmap	167.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches: `reduce` and `flatMap`. The test case generates an array of 10,000 objects, where each object has a unique identifier (`id`) and multiple properties (`oldValue`, `newValue`, and `changes`). The `reduce` approach filters out duplicate nodes by creating a Set (`uniqNodes`) and concatenates the changes from each node. The `flatMap` approach uses the same Set to filter duplicates and then flattens the changes using `Array.from()` and `flatMap()`.

**Options compared**

Two options are being compared:

1. **Reduce**: This approach filters out duplicate nodes by creating a Set (`uniqNodes`) and concatenating the changes from each node. The pros of this approach include:
	* Efficient use of memory for storing unique nodes.
	* Simple to implement.
	* No need to explicitly convert arrays to sets or vice versa.

However, the cons include:

* May have performance issues due to the overhead of creating and maintaining a Set.
	* Can be slower than `flatMap` for large datasets.
2. **Flatmap**: This approach uses the same Set (`uniqNodes`) to filter duplicates but then flattens the changes using `Array.from()` and `flatMap()`. The pros of this approach include:

* Still efficient in terms of memory usage, as it doesn't require explicit conversions between arrays and sets.
	* May perform better than `reduce` for large datasets due to the optimized behavior of `flatMap()`.
3. **Other alternatives**: Depending on the context, other approaches might be considered:
	+ Using `Set.prototype.forEach()` instead of `Object.entries()` and `forEach()` for filtering duplicates.
	+ Implementing a custom solution using bitwise operations or other optimization techniques.

**Library usage**

The benchmark uses several libraries:

1. **Set**: A built-in JavaScript library used to create a Set (`uniqNodes`) for efficient duplicate filtering.
2. **Array.prototype.concat()`, `Array.prototype.flatMap()`: These are standard array methods in JavaScript, but it's worth noting that some browsers (e.g., older versions of Chrome) might not support them.

**Special JS feature or syntax**

The benchmark uses the following special features or syntax:

1. **Template literals**: The code uses template literals (`\r\n ${...}\r\n`) to create strings with backslashes and newlines.
2. `let id = 0` : This is a variable declaration using the let keyword.

Overall, this benchmark provides a useful comparison between two performance-critical array methods in JavaScript. By understanding the pros and cons of each approach, developers can make informed decisions about which method to use in their own code.

Related benchmarks:

Reduce vs Flatmap 10000 items (version: 0)

Comparing performance of: Reduce vs Flatmap

Created: 4 years ago by: Guest

Jump to the latest result

Reduce

Flatmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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