Benchmark: object.assign vs spread vs create new object object.assign

Script Preparation code:

var baseObj = {"field0":"value0","field1":"value1","field2":"value2","field3":"value3","field4":"value4","field5":"value5","field6":"value6","field7":"value7","field8":"value8","field9":"value9","field10":"value10","field11":"value11","field12":"value12","field13":"value13","field14":"value14","field15":"value15","field16":"value16","field17":"value17","field18":"value18","field19":"value19","field20":"value20","field21":"value21","field22":"value22","field23":"value23","field24":"value24","field25":"value25","field26":"value26","field27":"value27","field28":"value28","field29":"value29","field30":"value30","field31":"value31","field32":"value32","field33":"value33","field34":"value34","field35":"value35","field36":"value36","field37":"value37","field38":"value38","field39":"value39","field40":"value40","field41":"value41","field42":"value42","field43":"value43","field44":"value44","field45":"value45","field46":"value46","field47":"value47","field48":"value48","field49":"value49","field50":"value50","field51":"value51","field52":"value52","field53":"value53","field54":"value54","field55":"value55","field56":"value56","field57":"value57","field58":"value58","field59":"value59","field60":"value60","field61":"value61","field62":"value62","field63":"value63","field64":"value64","field65":"value65","field66":"value66","field67":"value67","field68":"value68","field69":"value69","field70":"value70","field71":"value71","field72":"value72","field73":"value73","field74":"value74","field75":"value75","field76":"value76","field77":"value77","field78":"value78","field79":"value79","field80":"value80","field81":"value81","field82":"value82","field83":"value83","field84":"value84","field85":"value85","field86":"value86","field87":"value87","field88":"value88","field89":"value89","field90":"value90","field91":"value91","field92":"value92","field93":"value93","field94":"value94","field95":"value95","field96":"value96","field97":"value97","field98":"value98","field99":"value99"}
var newObj = {"n0":"v0","n1":"v0","n2":"v0","n3":"v0","n4":"v0"}

Tests:

object.assign
var c = Object.assign(baseObj, newObj);
spread
var c = {...baseObj, ...newObj}
without immutable
Object.keys(newObj).forEach(key=>(baseObj[key]=newObj[key]))
create new object with assign
var c = Object.assign({},baseObj, newObj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object.assign
spread
without immutable
create new object with assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
object.assign	11508653.0 Ops/sec
spread	5249312.5 Ops/sec
without immutable	9553102.0 Ops/sec
create new object with assign	532890.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three ways to copy an object in JavaScript:

1. `Object.assign()`
2. Spread operator (`...`)
3. Creating a new object using `Object.assign()` (with an empty object as the first argument)

**Options Compared**

* `object.assign()`: This method takes two objects and merges their properties into a new object.
* Spread operator (`...`): This syntax creates a new object by copying the properties of another object.
* Creating a new object with `Object.assign()` (with an empty object as the first argument): This creates a new object and then copies the properties from the source object to it using `Object.assign()`. The purpose of this variation is to see if the overhead of creating a new object affects performance.

**Pros and Cons**

* `object.assign()`: Pros:
	+ Wide support across browsers
	+ Can handle nested objects
	+ Easy to read and write
* Cons:
	+ Can be slower than other methods due to the overhead of merging properties
	+ May not work as expected if the source object is very large
* Spread operator (`...`): Pros:
	+ Fast and efficient
	+ Works well with nested objects
	+ Easy to read and write
* Cons:
	+ Only works in modern browsers that support the spread syntax
* Creating a new object with `Object.assign()`: Pros:
	+ May be faster than `object.assign()` due to reduced overhead of merging properties
	+ Reduces the risk of unexpected behavior if the source object is very large
* Cons:
	+ Requires an additional step (creating an empty object)
	+ May not work as expected in older browsers

**Library and Purpose**

In the benchmark, the `Object.keys()` method and the `forEach` loop are used to iterate over the properties of the `newObj` object. These methods are part of the JavaScript standard library.

**Special JS Features or Syntax**

None mentioned in this specific benchmark.

**Other Alternatives**

Other ways to copy an object in JavaScript include:

* Using a library like Lodash's `cloneDeep()` function
* Using a third-party implementation of the spread operator (e.g., `Object.assign()` from a separate module)
* Using a different data structure, such as a JSON string or an array of objects.

These alternatives may have their own trade-offs in terms of performance, readability, and compatibility across browsers.

Related benchmarks:

object.assign vs spread vs create new object object.assign (version: 0)

Comparing performance of: object.assign vs spread vs without immutable vs create new object with assign

Created: 7 years ago by: Guest

Jump to the latest result

object.assign

spread

without immutable

create new object with assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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