Benchmark: Spread vs Object.assign

Script Preparation code:

window.object1 = {};
window.object2 = {};
window.object3 = {};
window.object4 = {};
window.object5 = {};
window.object6 = {};

function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
};

function populate(object) {
  for (let i = 0; i < 100; i++) {
    object[makeid()] = makeid();
  }
};

populate(object1);
populate(object2);
populate(object3);
populate(object4);
populate(object5);
populate(object6);

Tests:

Object.assign two objects
const object7 = Object.assign({}, object1, object2);
Spread two objects
const object7 = {...object1, ...object2};
Object.assign three objects
const object7 = Object.assign({}, object1, object2, object3);
Spread three objects
const object7 = {...object1, ...object2, ...object3};
Object.assign four objects
const object7 = Object.assign({}, object1, object2, object3, object4);
Spread four objects
const object7 = {...object1, ...object2, ...object3, ...object4};
Object.assign five objects
const object7 = Object.assign({}, object1, object2, object3, object4, object5);
Spread five objects
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5};
Object.assign six objects
const object7 = Object.assign({}, object1, object2, object3, object4, object5, object6);
Spread six objects
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5, ...object6};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign two objects
Spread two objects
Object.assign three objects
Spread three objects
Object.assign four objects
Spread four objects
Object.assign five objects
Spread five objects
Object.assign six objects
Spread six objects

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.assign two objects	37000.2 Ops/sec
Spread two objects	57854.2 Ops/sec
Object.assign three objects	18858.8 Ops/sec
Spread three objects	37755.0 Ops/sec
Object.assign four objects	13147.2 Ops/sec
Spread four objects	27808.5 Ops/sec
Object.assign five objects	10074.8 Ops/sec
Spread five objects	21890.7 Ops/sec
Object.assign six objects	9083.2 Ops/sec
Spread six objects	17937.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark compares the performance of two JavaScript methods: `Object.assign` and the spread operator (`...`). The benchmark creates an array of 6 objects, populates each object with 100 random properties, and then uses each method to assign values to a target object.

**Method 1: Object.assign**

`Object.assign` is a built-in method that assigns values from one or more source objects to a target object. In this benchmark, `Object.assign` is used to copy the entire contents of an object into another object.

**Method 2: Spread Operator (`...`)**

The spread operator is a new feature introduced in ECMAScript 2015 (ES6). It allows you to expand an array or an object into individual elements or properties. In this benchmark, the spread operator is used to create a shallow copy of an object and then assign values from it to another object.

**Performance Comparison**

The benchmark provides execution times for each test case, which can be used to compare the performance of `Object.assign` and the spread operator. The results show that:

* For small sets of objects (2-4), both methods have similar performance.
* As the number of objects increases, the spread operator consistently outperforms `Object.assign`.
* The spread operator is generally faster for assigning values to individual properties.

**Why is the Spread Operator Faster?**

There are several reasons why the spread operator might be faster:

1. **Less overhead**: The spread operator creates a new object with shallow copies of the original object's properties, which can be more efficient than using `Object.assign`, which involves more complex operations like iterating over property names and values.
2. **Optimized implementation**: Modern JavaScript engines have optimized implementations for the spread operator that take advantage of existing data structures and algorithms.
3. **Fewer method calls**: The spread operator typically involves fewer method calls compared to `Object.assign`, which can reduce overhead.

**Conclusion**

In general, the spread operator is a better choice than `Object.assign` when assigning values to individual properties or small sets of objects. However, for larger datasets or more complex assignments, `Object.assign` might be a better option due to its flexibility and control over the assignment process.

Related benchmarks:

Spread vs Object.assign (version: 0)

Comparing performance of: Object.assign two objects vs Spread two objects vs Object.assign three objects vs Spread three objects vs Object.assign four objects vs Spread four objects vs Object.assign five objects vs Spread five objects vs Object.assign six objects vs Spread six objects

Created: 7 years ago by: Guest

Jump to the latest result

Object.assign two objects

Spread two objects

Object.assign three objects

Spread three objects

Object.assign four objects

Spread four objects

Object.assign five objects

Spread five objects

Object.assign six objects

Spread six objects

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):