Benchmark: Object.fromEntries vs reduce vs Map vs Object.assign vs forEach

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());
forEach
const result = {}; Object.keys(data).forEach((key) => { result[key] = data[key].toString(); });
Object.assign
Object.assign( {}, ...Object.entries(data).map(([key, value]) => ({ [key]: value })) );

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Reduce (reuse object)

2K/s

forEach

2K/s

Map

1K/s

Object.fromEntries

186/s

Object.assign

156/s

Reduce (creating temporary objects)

54/s

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

View exact numbers

✓ Reduce (reuse object): 1,925 ops/sec
• forEach: 1,855 ops/sec
• Map: 1,211 ops/sec
• Object.fromEntries: 186 ops/sec
• Object.assign: 156 ops/sec
• Reduce (creating temporary objects): 54 ops/sec

Firefox 5 runs

forEach

1K/s

Reduce (reuse object)

1K/s

Map

403/s

Object.fromEntries

177/s

Object.assign

155/s

Reduce (creating temporary objects)

0/s

Fastest: forEach (7657.9x faster)

View exact numbers

✓ forEach: 1,489 ops/sec
• Reduce (reuse object): 1,180 ops/sec
• Map: 403 ops/sec
• Object.fromEntries: 177 ops/sec
• Object.assign: 155 ops/sec
• Reduce (creating temporary objects): 0 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
forEach
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

forEach

3K/s

Reduce (reuse object)

3K/s

Map

1K/s

Object.fromEntries

383/s

Object.assign

373/s

Reduce (creating temporary objects)

0/s

View exact numbers

Test name	Executions per second
✓ forEach	3,417 Ops/sec
Reduce (reuse object)	2,842 Ops/sec
Map	1,008 Ops/sec
Object.fromEntries	383 Ops/sec
Object.assign	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.

Let's dive into the world of JavaScript microbenchmarks and analyze what's being tested in this benchmark.

**Benchmark Overview**

This benchmark compares six different approaches to create an object from an array of key-value pairs:

1. `Object.fromEntries`
2. `Reduce` (with a temporary object)
3. `Map`
4. `forEach`
5. `Object.assign`

The goal is to determine which approach is the fastest and most efficient.

**Options Compared**

Here's a brief overview of each option:

1. **Object.fromEntries**: Creates an object from an array of key-value pairs using `Object.fromEntries`. This method was introduced in ECMAScript 2019.
2. **Reduce (reuse object)**: Uses `Array.prototype.reduce()` to iterate over the array and create an object. The callback function creates a temporary object that's reused on each iteration.
3. **Map**: Creates a Map object from an array of key-value pairs using `new Map()`.
4. **forEach**: Iterates over the array using `Array.prototype.forEach()` and creates an object by assigning values to properties of an empty object.
5. **Object.assign**: Uses `Object.assign()` to create a new object by copying properties from an array of objects.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Object.fromEntries**:
	* Pros: Simple, efficient, and concise.
	* Cons: Limited support in older browsers (pre-2019).
2. **Reduce (reuse object)**:
	* Pros: Can be more efficient than `Object.fromEntries` due to reuse of temporary object.
	* Cons: Creates a temporary object that may cause memory allocation issues for large datasets.
3. **Map**:
	* Pros: Efficient and concise, with good support in modern browsers.
	* Cons: May not be suitable for older browsers or environments without Map support.
4. **forEach**:
	* Pros: Simple and easy to understand.
	* Cons: Can be slower than other approaches due to the overhead of iterating over the array.
5. **Object.assign**:
	* Pros: Well-supported in most browsers, including older versions.
	* Cons: May not be the most efficient approach due to the need to create a new object and copy properties.

**Library Used**

The `Array.prototype.reduce()` method is used in the "Reduce (reuse object)" test case. This method is a built-in function in JavaScript that allows you to iterate over an array and apply a reduction operation to each element.

**Special JS Feature or Syntax**

There's no special JS feature or syntax being tested in this benchmark, apart from the use of `Object.fromEntries` which was introduced in ECMAScript 2019.

**Other Considerations**

When choosing an approach for creating an object from an array of key-value pairs, consider the following factors:

* Browser support: If you need to support older browsers, choose an approach that's widely supported.
* Performance: If performance is critical, choose an efficient approach like `Object.fromEntries` or `Map`.
* Memory allocation: Be aware of potential memory allocation issues with approaches like `Reduce (reuse object)`.
* Code readability and maintainability: Choose an approach that's easy to understand and maintain.

**Alternatives**

If you're looking for alternative approaches, consider the following:

* Using a library like Lodash or Underscore.js, which provides functions for working with arrays and objects.
* Using a different data structure, such as a JSON object or a DOM element, depending on your specific use case.
* Optimizing the approach using techniques like caching, memoization, or parallel processing (if possible).

Object.fromEntries vs reduce vs Map vs Object.assign vs forEach (version: 1) Benchmark.js

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

Created: 3 years ago by: Registered User

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

forEach

Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 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 vs Object.assign vs forEach (version: 1) Benchmark.js

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

Created: 3 years ago by: Registered User

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

forEach

Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 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 vs forEach vs Object.assign`