Benchmark: Object.fromEntries on array vs reduce on array

Script Preparation code:

var data = Array.from(Array(10000).keys())

Tests:

Reduce
data.reduce((acc, v) => ({ ...acc, [v]: v.toString() }), {});
Object
Object.fromEntries(data.map(value => [value, value.toString()]));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 days ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce	103.5 Ops/sec
Object	2185.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to creating an object from an array: using `Object.fromEntries` (also known as "Object.fromEntries" or simply "fromEntries") on one hand, and reducing the array to create the object on the other hand.

**Options Being Compared**

1. **Object.fromEntries**: This method creates an object by mapping over the array, creating key-value pairs from each element.
2. **Reduce**: This method applies a callback function to each element in the array, accumulating a result value.

**Pros and Cons of Each Approach**

1. **Object.fromEntries**:
	* Pros: More concise, readable, and maintainable code.
	* Cons: Can be slower due to additional overhead for mapping over the array.
2. **Reduce**:
	* Pros: Can be faster since it avoids the overhead of creating an intermediate object.
	* Cons: Code can be more complex and harder to read.

**Library Used**

In this benchmark, `Object.fromEntries` uses a built-in JavaScript method, which means no external library is required.

**Special JS Feature or Syntax**

The benchmark uses a feature called "Spread operator" (`...`) introduced in ECMAScript 2015 (ES6). This operator allows creating new objects by spreading the properties of an existing object.

In this case, the spread operator is used inside the `Object.fromEntries` callback function to create key-value pairs from each element in the array.

**Other Considerations**

The benchmark measures performance on a specific input size (10,000 elements) and uses a Chrome 103 browser version. The results are likely influenced by various factors such as:

* Browser optimization
* Node.js or engine-specific optimizations
* Garbage collection overhead
* System resources available

**Alternative Approaches**

Other possible approaches to create an object from an array include:

1. Using `Array.prototype.reduce.call(null, {}, ...)`: This method is similar to the reduce approach mentioned earlier but uses the `call` method to pass the initial object as the accumulator.
2. Looping over the array and assigning each element as a property: `var obj = {}; for (var i = 0; i < data.length; i++) { obj[data[i]] = data[i].toString(); }`
3. Using an arrow function with `Array.prototype.forEach`: `data.forEach((value, index) => ({ [index]: value.toString() }))`

These alternatives may have different performance characteristics compared to the two main approaches being benchmarked (Object.fromEntries and reduce).

Related benchmarks:

Object.fromEntries on array vs reduce on array (version: 0)

Comparing performance of: Reduce vs Object

Created: 3 years ago by: Guest

Jump to the latest result

Reduce

Object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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