Benchmark: Object.fromEntries vs reduce vs Map vs for of vs for

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());
for of
const entries = Object.entries(data); const result = {} for (const entry of entries) { result[entry[0]] = entry[1]; }
for
const entries = Object.entries(data); const result = {} for (let i = 0; i < entries.length; i++) { result[entries[i][0]] = entries[i][1]; }

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
for of
for

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to creating an object from key-value pairs is a fundamental benchmark in JavaScript development.

The provided JSON defines a benchmark with six test cases, each comparing a different approach to create an object:

1. `Object.fromEntries`
2. `reduce` (with and without creating temporary objects)
3. `Map`
4. `for...of` loop
5. `for` loop

Let's dive into the pros and cons of each approach:

**1. Object.fromEntries**

`Object.fromEntries` is a modern JavaScript method that creates an object from key-value pairs. It's a concise and expressive way to create objects.

Pros: Efficient, easy to read, and maintainable.
Cons: Not all browsers support it (older versions of Chrome), and its performance might not be optimized for older browsers.

**2. Reduce**

The `reduce` method is a powerful array method that can be used to create an object by accumulating key-value pairs into an accumulator object.

Pros: Flexible, allows for creating temporary objects, and works well with older browsers.
Cons: Can be less readable than other approaches, especially when dealing with complex logic.

**3. Reduce (creating temporary objects)**

This approach is similar to the previous one but creates a new object for each iteration of the `reduce` method, which can lead to increased memory usage.

Pros: None notable.
Cons: Increased memory usage and slower performance due to creating temporary objects.

**4. Map**

The `Map` data structure is another way to create an object from key-value pairs. It's similar to an array but stores key-value pairs instead of values only.

Pros: Efficient, easy to use, and works well with older browsers.
Cons: Might not be as readable as other approaches, especially when dealing with large datasets.

**5. for...of loop**

The `for...of` loop is a modern JavaScript loop that can be used to iterate over arrays or iterables.

Pros: Efficient, easy to read, and maintainable.
Cons: Not optimized for older browsers, and might not work well with large datasets due to string interpolation overhead.

**6. for loop**

The traditional `for` loop is still a viable option for creating objects from key-value pairs.

Pros: Well-established, widely supported, and works well with older browsers.
Cons: Less readable than other approaches, especially when dealing with complex logic.

Now, let's discuss the libraries used in these benchmarks:

* No external libraries are used in these benchmark definitions. The test cases only rely on built-in JavaScript methods and features.

As for special JavaScript features or syntax, there is no explicit mention of any advanced features like async/await, closures, or generators in the provided code snippets.

When comparing these approaches, it's essential to consider factors such as:

* Browser support: Older browsers might not support modern features like `Object.fromEntries`.
* Performance: Larger datasets can impact performance due to increased memory usage or string interpolation overhead.
* Readability and maintainability: Choose an approach that balances conciseness with clarity.

Alternatives to these approaches include:

* Using a library like Lodash or Ramda, which provides additional utility functions for working with objects and arrays.
* Implementing custom object creation logic using bitwise operations (e.g., using `Object.assign()` with bitwise operators).
* Utilizing native Web Assembly (WASM) or Web Workers for parallel processing.

Keep in mind that these alternatives might add complexity to your codebase, so it's essential to weigh the benefits against the potential costs.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
Object.fromEntries	19.0 Ops/sec
Reduce (reuse object)	160.6 Ops/sec
Reduce (creating temporary objects)	4.5 Ops/sec
Map	89.9 Ops/sec
for of	203.7 Ops/sec
for	200.0 Ops/sec

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

for of

for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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