Benchmark: shallow clone map vs clone object

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>

Previous results

Test case name	Result
clone map
clone object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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

Test name	Executions per second
clone map	2328669.8 Ops/sec
clone object	52594920.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):

LLMs can make mistakes. Check important info.

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:

shallow clone map vs clone object (version: 1)

Comparing performance of: clone map vs clone object

Created: 9 months ago by: Registered User

Jump to the latest result

clone map

clone object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):