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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign two objects	46656.2 Ops/sec
Spread two objects	59759.6 Ops/sec
Object.assign three objects	27480.6 Ops/sec
Spread three objects	38656.4 Ops/sec
Object.assign four objects	18785.5 Ops/sec
Spread four objects	24167.0 Ops/sec
Object.assign five objects	13126.7 Ops/sec
Spread five objects	20153.3 Ops/sec
Object.assign six objects	11772.3 Ops/sec
Spread six objects	16154.4 Ops/sec

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

Fastest: N/A

Slowest: N/A

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