Benchmark: Reduce Object.assign vs spread vs Map vs Function assignment

Tests:

Spread
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => ({ ...memo, [`id-${val}`]: val }), {});
Object.assign
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => Object.assign(memo, { [`id-${val}`]: val }), {});
Map
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => memo.set(`id-${val}`, val), new Map())
Map with Object.fromEntries
const items = Array.from(Array(10).keys()); Object.fromEntries(items.reduce((memo, val) => memo.set(`id-${val}`, val), new Map()));
Function with assignment
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => { memo[`id-${val}`] = val; return memo }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Object.assign
Map
Map with Object.fromEntries
Function with assignment

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'm ready to break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of four different approaches for object assignment:

1. Spread (`Spread`)
2. `Object.assign` (`Object.assign`)
3. Map (`Map`)
4. Map with `Object.fromEntries` (`Map with Object.fromEntries`)
5. Function with assignment (`Function with assignment`)

**Options Compared**

The benchmark compares the performance of these five approaches for object assignment, specifically when creating an object with 10 properties and assigning values to each property.

**Pros and Cons of Each Approach:**

1. **Spread**: Using the spread operator (`...`) creates a new object by copying the source object's properties. This approach is concise but may not be as efficient as other methods since it creates a new object unnecessarily.
2. **Object.assign**: Assigning properties to an existing object using `Object.assign` is more efficient than creating a new object, as it only updates the target object without creating a copy. However, it requires more code and can be slower for very large objects due to the method invocation overhead.
3. **Map**: Using a Map to store the object's properties and then converting it to an object using `Object.fromEntries` is a creative approach that avoids creating a new object. This method is likely to be faster than `Object.assign`, but may incur additional overhead due to the use of a Map.
4. **Map with Object.fromEntries**: This approach is similar to the previous one, but uses `Object.fromEntries` to convert the Map to an object directly. While it avoids the need for an intermediate conversion, it may be slower than using a Map and then converting it to an object due to the additional overhead of `Object.fromEntries`.
5. **Function with assignment**: Assigning properties to an existing object using a function is a common pattern that can be faster than other methods since it avoids creating a new object or using method invocations. However, this approach requires more code and may not be as concise as others.

**Library Usage**

* `Object.assign`: Part of the ECMAScript standard, `Object.assign` is a built-in function that assigns properties from one or more source objects to an existing target object.
* `Object.fromEntries`: Introduced in ECMAScript 2015 (ES6), `Object.fromEntries` is a static method that converts an iterable (like a Map) to an object.

**Special JS Features/Syntax**

None mentioned, but note that the benchmark uses modern JavaScript features like Array.from, template literals (`[...]`), and the spread operator (`...`).

**Other Alternatives**

Some alternative approaches for object assignment might include:

* Using a library like Lodash or Underscore.js, which provide various functions for object manipulation.
* Creating an object using an array of key-value pairs and then iterating over it to assign properties.

However, these alternatives may not be as efficient or concise as the methods being compared in the benchmark.

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread	446106.8 Ops/sec
Object.assign	358185.4 Ops/sec
Map	1013361.8 Ops/sec
Map with Object.fromEntries	446924.1 Ops/sec
Function with assignment	1354790.6 Ops/sec

Related benchmarks:

Reduce Object.assign vs spread vs Map vs Function assignment (version: 0)

Comparing performance of: Spread vs Object.assign vs Map vs Map with Object.fromEntries vs Function with assignment

Created: 2 years ago by: Guest

Jump to the latest result

Spread

Object.assign

Map

Map with Object.fromEntries

Function with assignment

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