Benchmark: object assign vs object spread on growing objects

Tests:

assign
const obj = {} for (let i = 0; i < 10000; i++) { Object.assign(obj, { i }) }
spread
let obj = {} for (let i = 0; i < 10000; i++) { obj = { ...obj, ...{ i } } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
assign
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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 Edg/146.0.0.0

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
assign	7131.7 Ops/sec
spread	5482.2 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 benchmark and explain what is being tested.

The benchmark measures the performance of two methods for updating an object: `Object.assign()` and the spread operator (`...`). The test case creates an empty object, then uses a loop to add 10,000 properties with unique keys (the values are just numeric strings).

**What's being compared?**

* Two approaches to update an object:
	+ `Object.assign()`: This method takes two arguments: the target object and an array of key-value pairs. It merges the values into the target object.
	+ Spread operator (`...`): This operator creates a new object by taking all enumerable own properties from one or more source objects. In this case, it's used to create a new object with 10,000 properties (keys) set to unique values.

**Pros and Cons of each approach:**

* `Object.assign()`: Pros:
	+ More straightforward syntax.
	+ Can handle nested objects by passing in multiple arrays of key-value pairs.
Cons:
	+ Can be slower for large datasets because it needs to create a new object with the same structure, which can lead to excessive memory allocation.
* Spread operator (`...`): Pros:
	+ Generally faster than `Object.assign()` because it doesn't need to create a new object.
	+ More concise syntax.
Cons:
	+ Can be slower for very large datasets because it needs to create an extremely large object.
	+ Requires modern JavaScript versions (ECMAScript 2018+) and may not work in older browsers.

**Library/ Framework considerations:**

There are no libraries or frameworks explicitly mentioned, but `Object.assign()` has been a built-in method of the `Object` prototype since ECMAScript 5 (2009), so it's widely supported. The spread operator (`...`) is also a standard feature introduced in ECMAScript 2018+.

**Special JS features:**

There are no special JavaScript features or syntax mentioned in this benchmark, but if you're interested in learning more about the latest features and updates, I can provide information on that.

**Alternatives:**

If you want to test other approaches for updating objects, you could consider:

* Using the `Array.prototype.map()` method with an object constructor, like so:
```javascript
const obj = {};
for (let i = 0; i < 10000; i++) {
  obj[i] = {};
}
```
Or using a custom object creation function with a loop:
```javascript
function createObject(keys) {
  const obj = {};
  for (let key of keys) {
    obj[key] = {};
  }
  return obj;
}

const obj = [];
for (let i = 0; i < 10000; i++) {
  obj.push(createObject([i]));
}
```
Keep in mind that these alternatives may have different performance characteristics than the `Object.assign()` and spread operator approaches.

I hope this explanation helps you understand the benchmark!

Related benchmarks:

object assign vs object spread on growing objects (version: 2)

Object.assign and the spread operator are about equally fast on tiny objects. But how do they scale as objects get increasingly more keys?

Comparing performance of: assign vs spread

Created: 7 years ago by: Registered User

Jump to the latest result

assign

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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