Benchmark: Object.fromEntries vs reduce vs Map vs custom implementation

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());
Custom implementation
const result = {}; Object.entries(data).forEach(entry => { const [key, value] = entry; result[key] = value; }); return result;

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
Custom implementation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Object.fromEntries	378.8 Ops/sec
Reduce (reuse object)	2161.1 Ops/sec
Reduce (creating temporary objects)	0.5 Ops/sec
Map	926.0 Ops/sec
Custom implementation	2113.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance of different methods for creating an object from an array of key-value pairs. The test cases compare four approaches:

1. **Object.fromEntries**: This method was introduced in ECMAScript 2015 (ES6) and creates an object by iterating over an array of key-value pairs.
2. **Reduce with reuse of object**: In this approach, the reduce function is used to create a new object, but the accumulator is reused for each iteration.
3. **Reduce with creating temporary objects**: Similar to the previous approach, but a new object is created in each iteration.
4. **Map**: This method creates an object by mapping over an array of key-value pairs.

Now, let's discuss the pros and cons of each approach:

**Object.fromEntries**:
	* Pros: Efficient and concise way to create objects from arrays.
	* Cons: Limited support for older browsers (pre-ES6).
	* Other consideration: This method is generally faster than the reduce approaches because it avoids creating temporary objects.

**Reduce with reuse of object**:
	* Pros: Can be more memory-efficient than other approaches, as the accumulator is reused.
	* Cons: May lead to performance issues if the accumulator is large or complex, as it needs to be cloned and updated on each iteration.
	* Other consideration: This approach can be slower than Object.fromEntries due to the overhead of cloning and updating the accumulator.

**Reduce with creating temporary objects**:
	* Pros: Simple and easy to understand, especially for developers familiar with reduce.
	* Cons: Creates a new object in each iteration, which can lead to performance issues if the object is large or complex.
	* Other consideration: This approach is generally slower than Object.fromEntries due to the overhead of creating temporary objects.

**Map**:
	* Pros: Efficient and concise way to create objects from arrays, similar to Object.fromEntries.
	* Cons: Limited support for older browsers (pre-ES6) and may require additional libraries or polyfills.
	* Other consideration: This method is generally faster than the reduce approaches because it avoids creating temporary objects.

Now, let's discuss some special JavaScript features that are used in these benchmark cases:

* **Arrow functions**: Used in the Reduce with reuse of object approach to create a concise and readable implementation.
* **ES6 map function**: Used in the Map test case to create an object from an array of key-value pairs.
* **Spread operator**: Used in some implementations (not shown here) to simplify the creation of objects from arrays.

In conclusion, each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of the project. Object.fromEntries is generally a good choice for most modern browsers, while Reduce with reuse of object or Map may be preferred in certain situations where memory efficiency is crucial.

As for alternatives, some other methods that could have been included in this benchmark are:

* **Array.prototype.reduce.call()**: This method is similar to the reduce function used in the test case but uses a different syntax.
* **Array.prototype.forEach()**: This method creates an object by iterating over an array of key-value pairs, but it's not as concise or efficient as Object.fromEntries or Map.

Keep in mind that this benchmark focuses on creating objects from arrays, so other methods may be more relevant to other specific use cases.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Custom implementation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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