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 })) );

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: 7 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Windows

View result in a separate tab

Test name	Executions per second
Object.fromEntries	196.2 Ops/sec
Reduce (reuse object)	1570.4 Ops/sec
Reduce (creating temporary objects)	0.2 Ops/sec
Map	402.5 Ops/sec
forEach	1771.6 Ops/sec
Object.assign	170.8 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).

Related benchmarks:

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

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

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

forEach

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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