Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Object.assign vs. JSON String/Parse deeper object
(version: 0)
Benchmark.js
Creating a "new" object reference every time
Comparing performance of:
Spread operator vs JSON Parse vs Object.assign
Created:
5 years ago
by:
Guest
Go to the latest result
Tests:
Spread operator
var n = {"foo":"bar","objectinobject":{"obj1":{"hello":"world","foo":"bar"},"arra":[1,2,3,4,5,6],"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]},"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]}; while(n.length < 1000) { n = [...n]; }
JSON Parse
var n = {"foo":"bar","objectinobject":{"obj1":{"hello":"world","foo":"bar"},"arra":[1,2,3,4,5,6],"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]},"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]}; while(n.length < 1000) { n = JSON.parse(JSON.stringify(n)) }
Object.assign
var n = {"foo":"bar","objectinobject":{"obj1":{"hello":"world","foo":"bar"},"arra":[1,2,3,4,5,6],"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]},"hello":[{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"},{"hello":"world","foo":"bar"}]}; while(n.length < 1000) { n = Object.assign({}, n); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Spread operator
JSON Parse
Object.assign
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Browser/OS:
Chrome 124 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=520031" width="100%" height="500px"></iframe>
Object.assign
2.4M/s
JSON Parse
2.4M/s
Spread operator
2.3M/s
View exact numbers
Test name
Executions per second
✓
Object.assign
2,405,628 Ops/sec
JSON Parse
2,397,198 Ops/sec
Spread operator
2,298,110 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and explain what's being tested, compared, and considered. **Benchmark Overview** The benchmark compares three different approaches to create and modify an object in JavaScript: 1. **Object.assign()**: Using the `Object.assign()` method to create a new object reference by copying properties from an existing object. 2. **JSON Parse**: Using the `JSON.parse()` function with `JSON.stringify()` to deep clone an object. 3. **Spread Operator** (also known as the rest/spread operator): Using the spread operator (`...`) to create a new array and then assign it to another variable, which is used to create a new object. **Comparison** The benchmark measures the performance of each approach when creating a deeply nested object with multiple levels of recursion. The test case uses a complex JSON structure to simulate real-world scenarios where objects are nested and copied. Here's a brief explanation of each approach: * **Object.assign()**: This method creates a shallow copy of an object, which means it only copies the top-level properties and does not recursively clone nested objects. In this benchmark, `Object.assign()` is used to create a new object reference by copying properties from the original object. * **JSON Parse**: This method uses `JSON.stringify()` to serialize the object to a string, which can be then parsed back into a JSON object using `JSON.parse()`. The resulting object is a deep clone of the original object. However, this approach has some overhead due to the serialization and deserialization process. * **Spread Operator** (Rest/Spread Operator): This method creates a new array by spreading the properties of an object, which can then be assigned to another variable to create a new object reference. The spread operator is used to create a new object by recursively cloning nested objects. **Pros and Cons** Here are some pros and cons for each approach: * **Object.assign()**: Pros: fast, lightweight, easy to use. Cons: creates a shallow copy, may not work well with recursive objects. * **JSON Parse**: Pros: creates a deep clone, reliable. Cons: can be slow due to serialization and deserialization overhead, may require additional libraries for compatibility. * **Spread Operator** (Rest/Spread Operator): Pros: fast, lightweight, easy to use. Cons: may not work well with very large or complex objects, can lead to stack overflow errors if used recursively. **Library Considerations** The test case uses the `JSON` library implicitly through `JSON.stringify()` and `JSON.parse()`. The `Object.assign()` method is a native JavaScript function, so no additional libraries are required. **Special JavaScript Features** There are no special JavaScript features or syntaxes being tested in this benchmark. However, the spread operator is a relatively recent feature that was introduced in ECMAScript 2015 (ES6). **Alternatives** Other alternatives to these approaches include: * Using a library like Lodash or Ramda for deep cloning and manipulation of objects. * Implementing custom recursive functions for object copying and creation. * Using native JavaScript methods like `Object.create()` and `Object.assign()` in combination. Overall, the benchmark highlights the trade-offs between different approaches to creating and modifying objects in JavaScript. The choice of approach depends on the specific use case, performance requirements, and personal preference.
Related benchmarks
Deep Clone Object: JSON.parse vs Object.assign
Object.assign vs spreading object copy
Comments
Confirm delete:
Do you really want to delete benchmark?