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 < 10; 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 < 10; 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: 2025 years ago)

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

Browser/OS: Chrome 64 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
Object.assign two objects	262009.9 Ops/sec
Spread two objects	260144.5 Ops/sec
Object.assign three objects	179373.6 Ops/sec
Spread three objects	180740.7 Ops/sec
Object.assign four objects	134389.0 Ops/sec
Spread four objects	133780.3 Ops/sec
Object.assign five objects	105595.2 Ops/sec
Spread five objects	104432.9 Ops/sec
Object.assign six objects	85612.9 Ops/sec
Spread six objects	85289.5 Ops/sec

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

Let's break down what's being tested in this benchmark.

Benchmark Definition

The benchmark is comparing the performance of two approaches:

Object.assign()
Spread syntax ({...})

Options Compared

Both approaches are used to merge objects, but with different syntax and behavior.

Object.assign()

Uses the assign() method of an object to add properties from another object.
Returns the original object with new properties added.
Can be called on any object, not just native JavaScript objects.
Performance can vary depending on the browser's implementation.

Spread Syntax ({...})

Uses the spread operator ({...}) to create a new object with properties from another object.
Returns a new object with copied properties.
Only works on native JavaScript objects (e.g., Object, Array).
Performance is generally faster than Object.assign().

What's Being Tested

The benchmark measures the performance of both approaches in terms of:

Time taken to execute each approach
Number of executions per second

Key Takeaways

The spread syntax ({...}) generally outperforms Object.assign() in this benchmark.
Performance differences may vary depending on the browser's implementation and specific use cases.

Overall, this benchmark provides a useful comparison between two commonly used approaches for merging objects in JavaScript.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is comparing the performance of two approaches:

1. `Object.assign()`
2. Spread syntax (`{...}`)

**Options Compared**

Both approaches are used to merge objects, but with different syntax and behavior.

**`Object.assign()`**

* Uses the `assign()` method of an object to add properties from another object.
* Returns the original object with new properties added.
* Can be called on any object, not just native JavaScript objects.
* Performance can vary depending on the browser's implementation.

**Spread Syntax (`{...}`)**

* Uses the spread operator (`{...}`) to create a new object with properties from another object.
* Returns a new object with copied properties.
* Only works on native JavaScript objects (e.g., `Object`, `Array`).
* Performance is generally faster than `Object.assign()`.

**What's Being Tested**

The benchmark measures the performance of both approaches in terms of:

1. Time taken to execute each approach
2. Number of executions per second

**Key Takeaways**

1. The spread syntax (`{...}`) generally outperforms `Object.assign()` in this benchmark.
2. Performance differences may vary depending on the browser's implementation and specific use cases.

Overall, this benchmark provides a useful comparison between two commonly used approaches for merging objects in JavaScript.

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