Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
shallow clone map vs clone object
(version: 1)
Comparing performance of:
clone map vs clone object
Created:
one year ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<!--your preparation HTML code goes here-->
Tests:
clone map
const mapA = new Map([['a', 1], ['b', 2], ['c', 3], ['d', 4], ['e', 5]]) const mapB = new Map(mapA)
clone object
const objA = { a: 1, b: 2, c: 3, d: 4, e: 5 } const objB = { ... objA}
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
clone map
clone object
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Browser/OS:
Chrome 140 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626304" width="100%" height="500px"></iframe>
clone object
52.6M/s
clone map
2.3M/s
View exact numbers
Test name
Executions per second
✓
clone object
52,594,920 Ops/sec
clone map
2,328,670 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined in the JSON provided compares two different approaches for cloning data structures in JavaScript: cloning a `Map` object and cloning a plain object (`{}`). Each test case measures the performance of the respective cloning methods. ### Test Cases Overview 1. **Cloning a Map**: - **Benchmark Definition**: `const mapA = new Map([['a', 1], ['b', 2], ['c', 3], ['d', 4], ['e', 5]]); const mapB = new Map(mapA);` - **Test Name**: "clone map" - This test creates a new `Map` instance, `mapB`, by passing an existing `Map`, `mapA`, into the `Map` constructor, leveraging the built-in capability of `Map` to clone itself. 2. **Cloning an Object**: - **Benchmark Definition**: `const objA = { a: 1, b: 2, c: 3, d: 4, e: 5 }; const objB = { ... objA };` - **Test Name**: "clone object" - This test uses the "spread syntax" (`...`) to create a shallow copy of the object `objA` into a new object `objB`. The spread operator effectively copies the properties of `objA` into `objB`. ### Performance Results Overview The performance results show the number of executions per second for each benchmark: - **Clone Object**: 31,996,362 executions/second - **Clone Map**: 1,334,891.25 executions/second This significant difference in performance indicates that cloning an object using the spread syntax is vastly more efficient than cloning a Map instance. ### Pros and Cons - **Cloning a Map**: - **Pros**: - Preserves order of insertion, which is important for certain applications that rely on the order of items. - Supports various data types as keys, not limited to strings or symbols. - **Cons**: - Performance is comparatively slower (as per benchmark results). - Requires a specific method (the `Map` constructor) to clone, which can be less intuitive for new JavaScript developers. - **Cloning an Object**: - **Pros**: - Performance is superior due to native optimizations in JavaScript engines for objects. - The spread syntax is easier to read and understand for many developers. - Directly supported in the language, making it universal for plain objects. - **Cons**: - Only shallow copies are created; nested objects will still reference the original objects. - Limited to string or symbol keys, which could be a limitation for some use cases. ### Other Considerations and Alternatives - **Shallow vs Deep Copy**: Both approaches create shallow copies, meaning that if the original structures contain nested objects, only the references are copied. For deep cloning, libraries like Lodash's `_.cloneDeep()` can be used, or one might use JSON methods (`JSON.stringify` and `JSON.parse`), although the latter has its own limitations, particularly with non-serializable values. - **Immutable.js**: For cases requiring immutable data structures, libraries such as Immutable.js can provide features that allow for efficient cloning and manipulation without mutating existing structures. - **Object.assign()**: Another alternative for shallow cloning objects is `Object.assign()`, which works similarly to the spread operator but can have slightly different behavior regarding prototype properties and enumerable properties. In conclusion, the benchmark provides a clear comparison between cloning mechanisms in JavaScript, highlighting that for basic use cases, object cloning is much faster than cloning Maps, while also indicating the various advantages and disadvantages inherent to each data structure.
Related benchmarks
creating maps vs creating objects
array clone variants
shallow clone object vs map copy vs strucutredClone
Comments
Confirm delete:
Do you really want to delete benchmark?