Benchmark: Object.fromEntries(Array.map) vs Array.reduce (with different methods)

Script Preparation code:

var array = Array.from(Array(10000).keys()).map((i) => ({
    id: i,
    count: i * 100,
}))

Tests:

Object.fromEntries(array.map)
Object.fromEntries(array.map(({ id, count }) => [id, count]));
Array.reduce (reuse same object)
array.reduce((obj, { id, count }) => { obj[id] = count; return obj; }, {});
Array.reduce (use Object.assign)
array.reduce((obj, { id, count }) => Object.assign(obj, { [id]: count }), {});
Array.reduce (use destructuring)
array.reduce((obj, { id, count }) => ({ ...obj, [id]: count }), {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.fromEntries(array.map)
Array.reduce (reuse same object)
Array.reduce (use Object.assign)
Array.reduce (use destructuring)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries(array.map)	2415.2 Ops/sec
Array.reduce (reuse same object)	17950.7 Ops/sec
Array.reduce (use Object.assign)	238.3 Ops/sec
Array.reduce (use destructuring)	115.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition**

The benchmark tests four different approaches for reducing an array to a single object:

1. `Object.fromEntries(array.map(({ id, count }) => [id, count]));`
2. `array.reduce((obj, { id, count }) => {\r\n    obj[id] = count;\r\n    return obj;\r\n}, {});`
3. `array.reduce((obj, { id, count }) => Object.assign(obj, { [id]: count }), {});`
4. `array.reduce((obj, { id, count }) => ({ ...obj, [id]: count }), {});`

These approaches are used to create an object from the array's elements, where each element is mapped to a key-value pair.

**Options Comparison**

Let's examine each option:

1. **`Object.fromEntries(array.map(({ id, count }) => [id, count]));`**: This approach uses the `fromEntries` method, which creates an object from an array of key-value pairs.
	* Pros: Concise and easy to read.
	* Cons: May have performance issues due to the overhead of creating an intermediate array.
2. **`array.reduce((obj, { id, count }) => {\r\n    obj[id] = count;\r\n    return obj;\r\n}, {});`**: This approach uses the `reduce` method, which applies a callback function to each element in the array and accumulates the results.
	* Pros: Can be more flexible than other approaches, as it allows for arbitrary object updates.
	* Cons: May have performance issues due to the overhead of creating an intermediate object.
3. **`array.reduce((obj, { id, count }) => Object.assign(obj, { [id]: count }), {});`**: This approach uses `Object.assign`, which copies properties from one or more source objects into a target object.
	* Pros: Efficient and easy to read.
	* Cons: May not be suitable for large datasets, as it can lead to memory issues.
4. **`array.reduce((obj, { id, count }) => ({ ...obj, [id]: count }), {});`**: This approach uses the spread operator (`{ ...obj, [id]: count }`) to create a new object with updated properties.
	* Pros: Efficient and easy to read.
	* Cons: May have performance issues due to the overhead of creating an intermediate object.

**Library**

None of the approaches use a specific JavaScript library. However, `Object.fromEntries` is a relatively recent addition to the ECMAScript standard (ES2020), while `Object.assign` has been part of the standard since ES5.

**Special JS Features or Syntax**

The benchmark uses the following special features or syntax:

* The spread operator (`{ ...obj, [id]: count }`) in option 4.
* The arrow function (`() => { obj[id] = count; return obj; }`) in options 2 and 3.
* The template literals (e.g., `\r\n    obj[id] = count;\r\n    return obj;\r\n}`) in options 2 and 3.

**Other Alternatives**

For reducing an array to a single object, other alternatives include:

* Using the `reduce` method with a callback function that returns an updated object.
* Using the `map` method followed by the `reduce` method.
* Using libraries like Lodash or Ramda, which provide specialized functions for working with arrays and objects.

Keep in mind that the best approach will depend on the specific use case and performance requirements.

Related benchmarks:

Object.fromEntries(Array.map) vs Array.reduce (with different methods) (version: 0)

Comparing performance of: Object.fromEntries(array.map) vs Array.reduce (reuse same object) vs Array.reduce (use Object.assign) vs Array.reduce (use destructuring)

Created: one year ago by: Registered User

Jump to the latest result

Object.fromEntries(array.map)

Array.reduce (reuse same object)

Array.reduce (use Object.assign)

Array.reduce (use destructuring)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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