Benchmark: Map from .reduce vs Map from .map

Script Preparation code:

var arr10k = Array.from(Array(10000)).map((x, i) => ({ x1: i, x2: i * 2, x4: i * 4 }));

Tests:

Map from .reduce
arr10k.reduce((acc, x) => acc.set(x.x1, x), new Map());
Map from .map
new Map(arr10k.map(x => [x.x1, x]));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map from .reduce
Map from .map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
Map from .reduce	894.5 Ops/sec
Map from .map	679.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark is designed to compare the performance of two approaches for creating and manipulating maps in JavaScript: using `.reduce()` versus using `.map()`. The test case consists of an array of 10,000 objects, each with three properties (`x1`, `x2`, and `x4`).

**Options Compared**

Two options are compared:

1. **Map from .reduce**: This approach uses the `.reduce()` method to create a map, where each iteration of the accumulator accumulates values in the map.
2. **Map from .map**: This approach uses the `.map()` method to create an array of arrays, and then converts this array into a map using the spread operator (`new Map(arr)`).

**Pros and Cons**

* **Map from .reduce**:
	+ Pros: Can be more efficient when dealing with large datasets, as it allows for early accumulation of values.
	+ Cons: Can be less readable and maintainable due to its accumulator-based nature.
* **Map from .map**:
	+ Pros: More straightforward and easier to understand, especially for those familiar with `map()` and `reduce()`.
	+ Cons: May incur higher overhead due to the additional step of converting an array into a map.

**Library Used**

None. The benchmark does not use any external libraries or dependencies.

**Special JS Features/Syntax (Not Applicable)**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

* **Cache Locality**: When using `.reduce()`, the accumulator accumulates values in memory, which can lead to cache locality issues. In contrast, when using `.map()` and then converting to a map, each value is stored separately in memory, reducing cache locality concerns.
* **Memory Usage**: When using `.map()`, the array of arrays is created first, which may increase memory usage compared to using `.reduce()`.

**Alternatives**

If you were to recreate this benchmark, here are some alternative approaches:

1. Using `Promise.all()` instead of `.map()` and then converting to a map.
2. Using `Array.from()` with an array of functions, similar to the current `.map()` approach.
3. Using other data structures, such as `Set` or `WeakMap`, which may offer different performance characteristics.

Keep in mind that these alternatives may alter the benchmark's focus and results, so it's essential to carefully consider your goals when recreating the benchmark.

Related benchmarks:

Map from .reduce vs Map from .map (version: 0)

Comparing performance of: Map from .reduce vs Map from .map

Created: 3 years ago by: Registered User

Jump to the latest result

Map from .reduce

Map from .map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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