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

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

Latest run results:

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

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.assign two objects	43872.2 Ops/sec
Spread two objects	64576.5 Ops/sec
Object.assign three objects	21610.5 Ops/sec
Spread three objects	41835.0 Ops/sec
Object.assign four objects	14846.5 Ops/sec
Spread four objects	30330.7 Ops/sec
Object.assign five objects	11497.4 Ops/sec
Spread five objects	23543.9 Ops/sec
Object.assign six objects	9641.8 Ops/sec
Spread six objects	19017.1 Ops/sec

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: 6 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 26 days ago):