Benchmark: Object.fromEntries vs reduce vs assign

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() }), {});
Object.assign
Object.assign({}, ...Object.entries(data).map(([k,v]) => ({[k]:v.toString()})))

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)
Object.assign

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Reduce (reuse object)

3K/s

Object.fromEntries

337/s

Object.assign

284/s

Reduce (creating temporary objects)

108/s

View exact numbers

Test name	Executions per second
✓ Reduce (reuse object)	3,036 Ops/sec
Object.fromEntries	337 Ops/sec
Object.assign	284 Ops/sec
Reduce (creating temporary objects)	108 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 provided benchmark and explain what is being tested.

**Benchmark Description**

The benchmark compares the performance of three different methods to create an object from key-value pairs:

1. `Object.fromEntries`
2. `Array.prototype.reduce` (with object reuse)
3. `Object.assign`

These methods are used to create a new object from an array of key-value pairs.

**What is being tested?**

The benchmark tests the execution time and number of executions per second for each method on different browsers (Firefox 127) with various devices (Desktop). The goal is to determine which method is the most efficient in terms of performance.

**Options Compared:**

1. `Object.fromEntries`: A modern JavaScript method introduced in ECMAScript 2015, which creates an object from key-value pairs.
2. `Array.prototype.reduce`:
	* Method 1: Reusing the same object for accumulation (`Reduce (reuse object)`). This approach is likely to be slower due to the overhead of modifying an existing object.
	* Method 2: Creating temporary objects during reduction (`Reduce (creating temporary objects)`).
3. `Object.assign`: A method that assigns new properties to an existing object.

**Pros and Cons:**

1. **`Object.fromEntries`**:
	* Pros: Modern, concise syntax, and efficient.
	* Cons: May not be supported by older browsers or versions.
2. **`Array.prototype.reduce`**:
	* Method 1 (reuse object):
		+ Pros: Efficient memory usage.
		+ Cons: Slower due to object modification overhead.
	* Method 2 (creating temporary objects):
		+ Pros: Faster due to reduced overhead.
		+ Cons: Higher memory usage and potentially slower performance.
3. **`Object.assign`**:
	* Pros: Simple syntax, widely supported by older browsers and versions.
	* Cons: May be less efficient than other methods.

**Library Used (if applicable)**

None of the tested methods require any specific libraries.

**Special JS Features or Syntax**

None mentioned.

**Benchmark Preparation Code**

The preparation code creates an array with 10,000 key-value pairs using `Array.from(Array(10000).keys())` and stores it in a variable named `data`.

**Individual Test Cases**

Each test case represents one of the three methods being compared:

1. `Object.fromEntries`: Creates an object from the `data` array using `Object.fromEntries`.
2. `Reduce (reuse object)`: Reuses an object for accumulation during reduction using `Array.prototype.reduce`.
3. `Reduce (creating temporary objects)`: Creates temporary objects during reduction using `Array.prototype.reduce`.
4. `Object.assign`: Assigns new properties to an existing object using `Object.assign`.

**Other Alternatives**

Some possible alternatives to the tested methods include:

1. Using a library like Lodash or Ramda for functional programming.
2. Utilizing other array methods, such as `map` and `forEach`, in combination with object creation methods.
3. Implementing custom object creation logic using JavaScript's built-in methods.

Keep in mind that these alternatives might not be the most efficient or commonly used approaches and may not be relevant to the specific use case of creating an object from key-value pairs.

Object.fromEntries vs reduce vs assign (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

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

Object.fromEntries vs reduce vs assign (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

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

Related benchmarks

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