Benchmark Overview

This benchmark compares the performance of two JavaScript methods for creating a shallow copy of an object: the spread operator ({ ...voucher }) and the structuredClone function (structuredClone(voucher)).

Test Cases

1. Test Name: structuredClone

   • Benchmark Definition: const copy = structuredClone(voucher)
   • Library/Feature Used: structuredClone is a built-in JavaScript function introduced in the HTML Living Standard and widely in modern JavaScript environments. Its purpose is to create a deep copy of a JavaScript object, handling complex types like nested objects and arrays seamlessly.
   • Pros:
     • Creates deep copies, which is beneficial for objects that contain nested structures or non-primitive data types (such as Maps, Sets, and Dates).
     • Handles cyclic references without throwing an error.
   • Cons:
     • May perform slower for simple objects due to the additional overhead of deep copying rather than a shallow copy.
     • Not available in all environments, particularly older browsers or JavaScript engines that do not support this feature.

2. Test Name: spread

   • Benchmark Definition: const copy = { ...voucher }
   • Feature Used: The spread syntax (...) is a feature of ES6 (ECMAScript 2015) that allows an iterable (e.g., an array or object) to be expanded into its elements.
   • Pros:
     • Quick and easy syntax for creating shallow copies of objects.
     • Generally faster than structuredClone for creating copies of simple objects, as it does not have the overhead of deep copying.
   • Cons:
     • Only creates shallow copies, meaning that nested objects are still referenced. If they change, both the original and copied object will reflect this change.
     • Cannot handle complex structures like Dates or instances of custom classes, which will not behave as expected in the copied object.

Performance Results

The benchmark results show a significant difference in performance:

• The spread operator achieved 34,831,788 executions per second.
• The structuredClone function achieved 306,444.53 executions per second.

This indicates that for simple object copying, the spread operator is vastly superior in performance. However, if the object being copied contains nested structures, the structuredClone method's ability to deep copy those structures becomes invaluable, despite its performance drawbacks.

Considerations and Alternatives

• Shallow vs. Deep Copy: Understanding the distinction between how data is copied (shallow vs. deep) is critical when deciding which method to use. If you only need to copy the top level of an object and there are no nested references of concern, the spread operator is likely preferable due to its speed.

• Other Alternatives:

  • Object.assign: Another way to perform a shallow copy is using Object.assign({}, voucher). It's similar in functionality to the spread operator with slightly different syntax and may have different performance characteristics.
  • Lodash or other Utility Libraries: Libraries like Lodash provide functions such as _.cloneDeep for deep copying, if you need to deal with complex structures in a more controlled manner. While powerful, using external libraries can influence bundle size and performance.

In summary, the choice between using structuredClone and the spread operator (or alternatives) should carefully consider the nature of the object being copied and the trade-offs between performance and the need for deep vs. shallow copies.