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

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

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 2 months ago):