Benchmark: Object.fromEntries vs new Map vs Reduce

Script Preparation code:

var ids = Array.from(Array(10000).keys())

var data = ids.map(item => ({ id: item, random: Math.random() }))

Tests:

Object.fromEntries with Array.map
// Create the dictionary // Using `Object.fromEntries` and `Array.map` const dictionary = Object.fromEntries( data.map((item) => [ // Key item.id, // Item item, ]) ); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);
new Map with Array.map
// Create the dictionary // Using `new Map` and `Array.map` const dictionary = new Map( data.map((item) => [ // Key item.id, // Item item, ]) ); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary.get(id));
Reduce (reusing object)
// Create the dictionary // Using `Array.reduce` // And reusing the object const dictionary = data.reduce((obj, item) => { obj[item.id] = item; return obj; }, {}); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);
Reduce (creating temporary objects)
// Create the dictionary // Using `Array.reduce` // And NOT reusing the object const dictionary = data.reduce((obj, item) => { return { ...obj, [item.id]: item }; }, {}); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Reduce (reusing object)

8K/s

Object.fromEntries with Array.map

2K/s

new Map with Array.map

1K/s

Reduce (creating temporary objects)

60/s

Fastest: Reduce (reusing object) (130.3x faster)

View exact numbers

✓ Reduce (reusing object): 7,777 ops/sec
• Object.fromEntries with Array.map: 1,825 ops/sec
• new Map with Array.map: 1,244 ops/sec
• Reduce (creating temporary objects): 60 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
Object.fromEntries with Array.map
new Map with Array.map
Reduce (reusing object)
Reduce (creating temporary objects)

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; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

Reduce (reusing object)

7K/s

Object.fromEntries with Array.map

4K/s

new Map with Array.map

1K/s

Reduce (creating temporary objects)

0/s

View exact numbers

Test name	Executions per second
✓ Reduce (reusing object)	7,057 Ops/sec
Object.fromEntries with Array.map	3,651 Ops/sec
new Map with Array.map	1,373 Ops/sec
Reduce (creating temporary objects)	0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of three different approaches to create and utilize dictionaries in JavaScript: `Object.fromEntries`, `new Map`, and `Array.reduce`. The benchmark tests the execution speed of each approach on a dataset of 10,000 objects.

**Approaches Compared**

1. **`Object.fromEntries` with `Array.map`**: This approach uses `Object.fromEntries` to create a dictionary from an array of key-value pairs generated by `Array.map`.
2. **`new Map` with `Array.map`**: This approach uses `new Map` to create a dictionary from an array of key-value pairs generated by `Array.map`. Note that `Map` does not have a direct equivalent to `Object.fromEntries`, so we use the constructor and `set()` method.
3. **`Reduce` (reusing object)**: This approach uses `Array.reduce` to create a dictionary by iteratively adding key-value pairs to an existing object, without creating temporary objects.
4. **`Reduce` (creating temporary objects)**: This approach is similar to the previous one but creates new temporary objects for each iteration.

**Pros and Cons of Each Approach**

1. **`Object.fromEntries` with `Array.map`**:
	* Pros: concise and readable syntax, efficient creation of dictionaries.
	* Cons: may incur additional overhead due to the use of `map()` and `Object.fromEntries()`.
2. **`new Map` with `Array.map`**:
	* Pros: provides a lightweight alternative to `Object.fromEntries`, can be more memory-efficient.
	* Cons: requires manual iteration using `get()` method, may have performance overhead due to the use of a `Map`.
3. **`Reduce` (reusing object)**:
	* Pros: avoids creating temporary objects, reduces memory allocation and garbage collection overhead.
	* Cons: can be less readable and maintainable due to the need to manually iterate and update the object.
4. **`Reduce` (creating temporary objects)**:
	* Pros: provides a clear and explicit way of creating dictionaries using `reduce()`.
	* Cons: incurs additional memory allocation and garbage collection overhead.

**Library Used**

None explicitly mentioned, but `Array.from()` is used to convert an array to an array-like object. `Object.fromEntries()` and `Map` are built-in JavaScript methods.

**Special JS Features or Syntax**

None explicitly mentioned, but the use of `reduce()` might be unfamiliar to some developers who are not familiar with this method.

**Alternative Approaches**

Other approaches that could be compared in a benchmark include:

* Using `Array.prototype.reduce()` instead of the `reduce()` method
* Using other libraries like Lodash or Ramda for dictionary creation and manipulation
* Using different data structures, such as `Set` or `WeakMap`, to store key-value pairs.

These alternatives would require modifications to the benchmark setup and script preparation code.

Object.fromEntries vs new Map vs Reduce (version: 0) Benchmark.js

Comparing performance of: `Object.fromEntries with Array.map vs new Map with Array.map vs Reduce (reusing object) vs Reduce (creating temporary objects)`

Created: 3 years ago by: Guest

Go to the latest result

Object.fromEntries with Array.map

new Map with Array.map

Reduce (reusing object)

Reduce (creating temporary objects)

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.fromEntries vs new Map vs Reduce (version: 0) Benchmark.js

Comparing performance of: Object.fromEntries with Array.map vs new Map with Array.map vs Reduce (reusing object) vs Reduce (creating temporary objects)

Created: 3 years ago by: Guest

Go to the latest result

Object.fromEntries with Array.map

new Map with Array.map

Reduce (reusing object)

Reduce (creating temporary objects)

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `Object.fromEntries with Array.map vs new Map with Array.map vs Reduce (reusing object) vs Reduce (creating temporary objects)`