Benchmark: object.assign vs spread (when base object is large)

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object.assign
spread
without immutable

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided benchmark compares three ways to merge two objects in JavaScript:

1. `Object.assign()`: A built-in method that merges one or more source objects into a target object.
2. Spread operator (`...`): An operator that creates a new object by copying all own enumerable properties from a specified source object or multiple source objects.
3. Manual iteration using `Object.keys()` and property assignment: This approach uses the `Object.keys()` method to iterate over the keys of one of the objects (in this case, `newObj`) and assigns each key-value pair to the corresponding key in the other object (`baseObj`).

**Options being compared**

We have three options:

* **A**: `Object.assign()`
	+ Pros: Easy to read, concise syntax, built-in method.
	+ Cons: May incur a performance penalty due to the overhead of calling a function and creating an intermediate array.
* **B**: Spread operator (`...`)
	+ Pros: Concise syntax, fast execution, can handle large objects efficiently.
	+ Cons: Less readable for developers unfamiliar with this syntax.
* **C**: Manual iteration using `Object.keys()`
	+ Pros: More control over the merge process, potentially more efficient than `Object.assign()` due to avoiding function call overhead.
	+ Cons: Requires more code and is less concise.

**Pros and cons**

The choice of method depends on the specific use case and personal preference. Here's a brief summary:

* **`Object.assign()`**: Suitable for simple cases where readability is not a concern. May incur performance penalties due to function call overhead.
* **Spread operator (`...`)**: Ideal for large objects or when conciseness is important. Fast execution, but may be less readable for some developers.
* **Manual iteration using `Object.keys()`**: Recommended for complex merge scenarios or when performance is critical. More code and less concise, but provides more control over the merge process.

**Library usage**

None of the provided benchmark tests use any external libraries.

**Special JS features/syntax**

The test uses the spread operator (`...`) syntax, which is a relatively modern feature introduced in ECMAScript 2018 (ES2018). This syntax allows for concise object creation and merging. If you're using an older version of JavaScript, you might need to use one of the other approaches.

**Other alternatives**

If you're looking for alternative methods, consider:

* **`Object.merge()`**: A polyfill or library that provides a `merge()` method for object merging.
* **`lodash.merge()`**: A popular utility library that includes an `merge()` function for object merging.
* **`immer.js`**: A state management library that provides an `update()` method for creating new objects from existing ones.

Keep in mind that these alternatives may introduce additional dependencies or performance overhead.

Related benchmarks:

object.assign vs spread (when base object is large) (version: 0)

Comparing performance of: object.assign vs spread vs without immutable

Created: 7 years ago by: Guest

Jump to the latest result

object.assign

spread

without immutable

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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