Benchmark: Object.fromEntries vs reduce vs Map

Script Preparation code:

var data = { ...Array.from(Array(10000).keys()) };

Tests:

Object.fromEntries
Object.fromEntries(Object.entries(data).map((key, value) => [key, value]));
Reduce (reuse object)
Object.entries(data).reduce((acc, [k, v]) => { acc[k] = v.toString(); return acc; }, {});
Reduce (creating temporary objects)
Object.entries(data).reduce((acc, [k, v]) => ({ ...acc, [k]: v.toString() }), {});
Map
Object.entries(data).reduce((acc, [k, v]) => { acc.set(k, v.toString()) return acc; }, new Map());

Historical Performance Data aggregated from 213 community runs

Desktop Results:

Chrome 168 runs

Reduce (reuse object)

3K/s

Map

2K/s

Object.fromEntries

305/s

Reduce (creating temporary objects)

94/s

Fastest: Reduce (reuse object) (28.6x faster)

View exact numbers

✓ Reduce (reuse object): 2,697 ops/sec
• Map: 1,768 ops/sec
• Object.fromEntries: 305 ops/sec
• Reduce (creating temporary objects): 94 ops/sec

Firefox 33 runs

Reduce (reuse object)

2K/s

Map

811/s

Object.fromEntries

331/s

Reduce (creating temporary objects)

0/s

Fastest: Reduce (reuse object) (4832.5x faster)

View exact numbers

✓ Reduce (reuse object): 1,847 ops/sec
• Map: 811 ops/sec
• Object.fromEntries: 331 ops/sec
• Reduce (creating temporary objects): 0 ops/sec

Safari 5 runs

Reduce (reuse object)

594/s

Map

509/s

Object.fromEntries

321/s

Reduce (creating temporary objects)

0/s

Fastest: Reduce (reuse object) (2801.5x faster)

View exact numbers

✓ Reduce (reuse object): 594 ops/sec
• Map: 509 ops/sec
• Object.fromEntries: 321 ops/sec
• Reduce (creating temporary objects): 0 ops/sec

Mobile Results:

Chrome 7 runs

Reduce (reuse object)

843/s

Map

320/s

Object.fromEntries

112/s

Reduce (creating temporary objects)

17/s

Fastest: Reduce (reuse object) (48.2x faster)

View exact numbers

✓ Reduce (reuse object): 843 ops/sec
• Map: 320 ops/sec
• Object.fromEntries: 112 ops/sec
• Reduce (creating temporary objects): 17 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
Reduce (reuse object)
Reduce (creating temporary objects)
Map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome Mobile 144 on Android

View result in a separate tab

Reduce (reuse object)

922/s

Map

320/s

Object.fromEntries

110/s

Reduce (creating temporary objects)

25/s

View exact numbers

Test name	Executions per second
✓ Reduce (reuse object)	922 Ops/sec
Map	320 Ops/sec
Object.fromEntries	110 Ops/sec
Reduce (creating temporary objects)	25 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 and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition:**

The benchmark compares three methods to create an object from an array of key-value pairs:

1. `Object.fromEntries`
2. `Array.prototype.reduce` (with reuse object approach)
3. `Array.prototype.reduce` (with creating temporary objects approach)

**Test Cases:**

Each test case represents one of the above methods being tested on a specific dataset. The dataset is created using `Array.from(Array(10000).keys())`, which generates an array of 10,000 numbers.

Here's a brief explanation of each test case:

1. **Object.fromEntries**: This method creates an object from an iterable (in this case, an array of key-value pairs) by iterating over the array and adding each pair to the resulting object.
2. **Reduce (reuse object)**: This approach uses `Array.prototype.reduce` to create a new object by accumulating values in an accumulator object. The reuse object approach avoids creating temporary objects by reusing the same accumulator object for all iterations.
3. **Reduce (creating temporary objects)**: Similar to the previous approach, but instead of reusing the same accumulator object, a new object is created for each iteration.
4. **Map**: This test case uses `Array.prototype.reduce` with a `Map` object as the accumulator, which avoids creating temporary objects by using the map's built-in methods.

**Pros and Cons:**

Here are some pros and cons of each approach:

1. **Object.fromEntries**:
	* Pros: Easy to read and write, fast execution time.
	* Cons: May not be suitable for large datasets due to memory constraints.
2. **Reduce (reuse object)**:
	* Pros: Reduces memory allocation by reusing the same accumulator object, can be faster than creating temporary objects.
	* Cons: Can lead to performance issues if the accumulator object grows too large or is not properly cleared.
3. **Reduce (creating temporary objects)**:
	* Pros: Avoids potential performance issues with the reuse object approach.
	* Cons: Creates a new object on each iteration, which can lead to slower execution times and higher memory usage.
4. **Map**:
	* Pros: Efficiently uses `Map` data structure, avoids creating temporary objects.
	* Cons: May require additional setup and understanding of the `Map` API.

**Library/Technology Used:**

The benchmark utilizes:

1. **Array.prototype.reduce**: A built-in JavaScript method for reducing an array to a single value.
2. **Object.fromEntries**: Introduced in ECMAScript 2015, this method creates an object from an iterable.
3. **Map**: A built-in JavaScript data structure used as the accumulator in the test case.

**Special JS Features/ Syntax:**

The benchmark uses:

1. **ECMAScript 2015 syntax (Object.fromEntries)**: Requires support for ECMAScript 2015 or later versions.

**Alternatives:**

Other alternatives to compare would include:

1. Using `Array.prototype.forEach` instead of `Array.prototype.reduce`.
2. Utilizing a library like Lodash or Ramda for data manipulation.
3. Comparing other object creation methods, such as using `for...in` loops or string concatenation.

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

Object.fromEntries vs reduce vs Map (version: 0)

Comparing performance of: `Object.fromEntries vs Reduce (reuse object) vs Reduce (creating temporary objects) vs Map`

Created: 4 years ago by: Guest

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Historical Performance Data aggregated from 213 community runs

Desktop Results:

Chrome 168 runs

Firefox 33 runs

Safari 5 runs

Mobile 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 reduce vs Map (version: 0)

Comparing performance of: Object.fromEntries vs Reduce (reuse object) vs Reduce (creating temporary objects) vs Map

Created: 4 years ago by: Guest

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Historical Performance Data aggregated from 213 community runs

Desktop Results:

Chrome 168 runs

Firefox 33 runs

Safari 5 runs

Mobile 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 vs Reduce (reuse object) vs Reduce (creating temporary objects) vs Map`