Benchmark: Deep clone object vs map

Script Preparation code:

var obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
  f: 6,
  g: 7,
  h: 8,
  i: 9,
  j: 10,
  k: 11,
  l: 12,
  m: 13,
  n: 14,
  o: 15,
  p: 16,
  q: 17,
  r: 18,
  s: 19,
  t: 20,
  u: 21,
  v: 22,
  w: 23,
  x: 24,
  y: 25,
  z: 26
};
var map = new Map(Object.entries(obj));

Tests:

Object deep clone
const banana = {...obj}
Map deep clone
const coconut = new Map(map)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object deep clone
Map deep clone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object deep clone	13120234.0 Ops/sec
Map deep clone	925434.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents two test cases: "Deep clone object vs map" and individual tests for object and map deep cloning.

**Test Case 1: Deep Clone Object vs Map**

This test case compares the performance of two approaches to create a deep clone of an object:

1. **Object Deep Clone**: The `const banana = {...obj}` approach uses the spread operator (`...`) to create a new object with the same properties as the original `obj`. This method is often considered efficient, but it may not be suitable for all cases, such as when dealing with complex objects or circular references.
2. **Map Deep Clone**: The `const coconut = new Map(map)` approach uses JavaScript's built-in `Map` data structure to create a deep clone of the `map` object.

**Options Compared**

The two options are compared in terms of their execution time, measured in executions per second (EPs/s).

**Pros and Cons**

* **Object Deep Clone**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: May not work correctly with circular references or very large objects, as it uses a shallow copy by default.
* **Map Deep Clone**:
	+ Pros: Can handle circular references and large objects more efficiently than the object deep clone approach.
	+ Cons: Requires the creation of an additional `Map` object, which can be slower for small inputs.

**Library Used**

In both test cases, no external library is required. The `Map` data structure is a built-in JavaScript feature.

**Special JS Feature or Syntax**

The spread operator (`...`) used in the object deep clone approach is a modern JavaScript feature introduced in ECMAScript 2018 (ES10). It allows for efficient and concise creation of new objects with the same properties as an existing object. This syntax is widely supported across modern browsers.

**Other Alternatives**

If you need to create a deep clone of an object, other approaches can be used:

1. **Lodash.cloneDeep**: A popular third-party library that provides a `cloneDeep` function for creating deep clones of objects.
2. **JSON.parse(JSON.stringify(obj))**: This method uses JSON serialization and deserialization to create a deep clone of an object. However, it may not work correctly with circular references or certain types of objects (e.g., functions).
3. **For...of loop and Array.from()**: You can use a for-of loop and `Array.from()` to iterate over the properties of an object and create a new array with the same values.

Keep in mind that each approach has its own trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

Deep clone object vs map (version: 0)

Comparing performance of: Object deep clone vs Map deep clone

Created: one year ago by: Guest

Jump to the latest result

Object deep clone

Map deep clone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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