Benchmark: array.map() with spread vs for-loop

Script Preparation code:

var entries = Object.entries({ ...Array.from(Array(10000).keys()) });

Tests:

Object.fromEntries with spread
const obj = Object.fromEntries([ ...entries.map((key, value) => [key, value]) ]);
for-loop and object (reuse object)
const obj = {}; for (const [key, value] of entries) { obj[key] = value; }
for-loop and object (creating temporary objects)
let obj = {}; for (const [key, value] of entries) { obj = { ...obj, [key]: value }; }
for-loop and map
const map = new Map(); for (const [key, value] of entries) { map.set(key, value); } const obj = Object.fromEntries(map);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.fromEntries with spread
for-loop and object (reuse object)
for-loop and object (creating temporary objects)
for-loop and map

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases to explain what's being tested, compare options, and discuss pros and cons.

**Benchmark Definition**

The benchmark is designed to measure the performance of creating an object from a list of key-value pairs using different approaches. The script preparation code provides an array of 10,000 objects with numerical keys using `Object.entries` and `Array.from`.

**Test Cases**

There are four test cases:

1. **Object.fromEntries with spread**
	* Benchmark Definition: `const obj = Object.fromEntries([...entries.map((key, value) => [key, value])]);`
2. **For-loop and object (reuse object)**
	* Benchmark Definition: `const obj = {}; for (const [key, value] of entries) { obj[key] = value; };`
3. **For-loop and object (creating temporary objects)**
	* Benchmark Definition: `let obj = {}; for (const [key, value] of entries) { obj = { ...obj, [key]: value }; }`
4. **For-loop and map**
	* Benchmark Definition: `const map = new Map(); for (const [key, value] of entries) { map.set(key, value); }; const obj = Object.fromEntries(map);`

**What's being tested**

These test cases compare the performance of:

1. Using the spread operator (`Object.fromEntries`) with an array created from `entries`.
2. Reusing an object instance while adding new properties using a for-loop.
3. Creating temporary objects and assigning them to the main object using a for-loop.
4. Using a Map to create an object from key-value pairs.

**Options comparison**

The benchmark is designed to compare these four approaches, each with its own trade-offs:

1. **Object.fromEntries with spread**: This approach uses a concise syntax and is likely to be faster since it avoids the overhead of creating intermediate objects.
2. **For-loop and object (reuse object)**: This approach reuses an object instance, which can lead to performance benefits due to reduced object creation costs. However, it may not be as readable or maintainable.
3. **For-loop and object (creating temporary objects)**: This approach creates temporary objects and assigns them to the main object, which may introduce unnecessary overhead due to object creation and assignment.
4. **For-loop and map**: Using a Map can provide a performance benefit since it avoids the need for Object.fromEntries. However, converting the Map to an object using Object.fromEntries introduces additional overhead.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Object.fromEntries with spread**:
	* Pros: Concise syntax, likely faster execution.
	* Cons: May introduce additional overhead due to array creation.
2. **For-loop and object (reuse object)**:
	* Pros: Reduces object creation costs, potentially faster execution.
	* Cons: Less readable or maintainable code.
3. **For-loop and object (creating temporary objects)**:
	* Pros: None notable.
	* Cons: May introduce unnecessary overhead due to object creation and assignment.
4. **For-loop and map**:
	* Pros: Avoids Object.fromEntries, potentially faster execution.
	* Cons: Converts Map to object using Object.fromEntries, introduces additional overhead.

**Alternative approaches**

Other alternatives for creating an object from a list of key-value pairs include:

1. Using the `reduce` method with an accumulator function.
2. Utilizing libraries like Lodash or Ramda, which provide utility functions for working with objects and arrays.
3. Implementing a custom loop-based solution using JavaScript's built-in array methods.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case and browser/JavaScript environment.

Latest run results:

Run details: (Test run date: 8 months ago)

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries with spread	154.1 Ops/sec
for-loop and object (reuse object)	7519.6 Ops/sec
for-loop and object (creating temporary objects)	54.1 Ops/sec
for-loop and map	848.7 Ops/sec

Related benchmarks:

array.map() with spread vs for-loop (version: 0)

Comparing performance of: Object.fromEntries with spread vs for-loop and object (reuse object) vs for-loop and object (creating temporary objects) vs for-loop and map

Created: 8 months ago by: Guest

Jump to the latest result

Object.fromEntries with spread

for-loop and object (reuse object)

for-loop and object (creating temporary objects)

for-loop and map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):