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);

​x
 
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);
const object7 = Object.assign({}, object1, object2);
Spread two objects
const object7 = {...object1, ...object2};
const object7 = {...object1, ...object2};
Object.assign three objects
const object7 = Object.assign({}, object1, object2, object3);
const object7 = Object.assign({}, object1, object2, object3);
Spread three objects
const object7 = {...object1, ...object2, ...object3};
const object7 = {...object1, ...object2, ...object3};
Object.assign four objects
const object7 = Object.assign({}, object1, object2, object3, object4);
const object7 = Object.assign({}, object1, object2, object3, object4);
Spread four objects
const object7 = {...object1, ...object2, ...object3, ...object4};
const object7 = {...object1, ...object2, ...object3, ...object4};
Object.assign five objects
const object7 = Object.assign({}, object1, object2, object3, object4, object5);
const object7 = Object.assign({}, object1, object2, object3, object4, object5);
Spread five objects
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5};
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5};
Object.assign six objects
const object7 = Object.assign({}, object1, object2, object3, object4, object5, object6);
const object7 = Object.assign({}, object1, object2, object3, object4, object5, object6);
Spread six objects
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5, ...object6};
const object7 = {...object1, ...object2, ...object3, ...object4, ...object5, ...object6};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 135 on Android

View result in a separate tab

Test name	Executions per second
Object.assign two objects	24189.3 Ops/sec
Spread two objects	26174.3 Ops/sec
Object.assign three objects	10600.7 Ops/sec
Spread three objects	15264.8 Ops/sec
Object.assign four objects	6889.2 Ops/sec
Spread four objects	10860.3 Ops/sec
Object.assign five objects	5204.4 Ops/sec
Spread five objects	8977.7 Ops/sec
Object.assign six objects	4163.4 Ops/sec
Spread six objects	7041.8 Ops/sec

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

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:

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.
Optimized implementation: Modern JavaScript engines have optimized implementations for the spread operator that take advantage of existing data structures and algorithms.
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.

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 (`...`)**

**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):