Benchmark: Object.assign vs spread operator vs structured clone vs for loop copy vs JSON duplicate with fallbacks

Object.assign vs spread operator vs structured clone vs for loop copy vs JSON duplicate with fallbacks (version: 7)

This test is only intended to be used to test for getting a new reference to an object, not generating a deep clone of an object. Some of the methods used here generate a deep copy and some a shallow copy, but the intent is only to find the fastest method of getting a shallow copy where the key length is long and there are lots of keys.

Comparing performance of: Get copy using Object.assign vs Get copy using spread vs Get copy using structuredClone vs Copy manually using for loop vs Copy using JSON.stringify

Created: 20 days ago by: Registered User

Jump to the latest result

Script Preparation code:

const original = {
  'this is a somewhat long key with many characters0': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters1': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters2': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters3': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters4': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters5': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters6': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters7': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters8': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters9': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters10': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters11': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters12': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters13': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters14': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters15': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters16': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters17': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters18': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters19': 'This is a value of somewhat the same length',
  'this is a somewhat long key with many characters20': 'This is a value of somewhat the same length',
};

Tests:

Get copy using Object.assign
const newVersion = Object.assign({}, original ?? {});
Get copy using spread
const newVersion = { ...(original ?? {}) };
Get copy using structuredClone
const newVersion = structuredClone(original ?? {});
Copy manually using for loop
const newVersion = {}; const keys = Object.keys(original ?? {}); const len = keys.length; for (let i = 0; i < len; i++) { newVersion[keys[i]] = original[keys[i]]; }
Copy using JSON.stringify
const newVersion = JSON.parse(JSON.stringify(original ?? {}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Get copy using Object.assign
Get copy using spread
Get copy using structuredClone
Copy manually using for loop
Copy using JSON.stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 14 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Get copy using Object.assign	1143950.1 Ops/sec
Get copy using spread	9728743.0 Ops/sec
Get copy using structuredClone	160712.1 Ops/sec
Copy manually using for loop	484449.8 Ops/sec
Copy using JSON.stringify	176001.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

This benchmark evaluates different approaches for creating a copy of an object in JavaScript. It compares five primary methods:

1. **Object.assign**: `const newVersion = Object.assign({}, original ?? {});`
2. **Spread operator**: `const newVersion = { ...(original ?? {}) };`
3. **structuredClone**: `const newVersion = structuredClone(original ?? {});`
4. **Manual copying with a for loop**: 
   ```javascript
   const newVersion = {};
   const keys = Object.keys(original ?? {});
   const len = keys.length;
   for (let i = 0; i < len; i++) {
     newVersion[keys[i]] = original[keys[i]];
   }
   ```
5. **JSON.stringify/parse**: `const newVersion = JSON.parse(JSON.stringify(original ?? {}));`

### Method Comparisons:

1. **Object.assign**:
   - **Pros**:
     - Simple and easy to understand.
     - Shallow copy: Only creates a new object, copying properties from the source object.
   - **Cons**:
     - Does not perform deep copying (nested objects won't be copied correctly).
     - Cannot copy non-enumerable properties or prototype chain properties.

2. **Spread operator**:
   - **Pros**:
     - Syntax is concise and readable.
     - Like `Object.assign`, it creates a shallow copy.
   - **Cons**:
     - Also limited by shallow copying.
     - Similar issues regarding non-enumerable properties and prototype properties.

3. **structuredClone**:
   - **Pros**:
     - Creates a deep copy of the object, handling many complex data types (e.g., dates, sets, maps).
     - Properly clones nested objects and maintains their structure.
   - **Cons**:
     - Browser compatibility: May not be available in all environments, particularly older versions.
     - Slightly more complex in terms of performance for very large or deeply nested objects.

4. **Manual copying with a for loop**:
   - **Pros**:
     - Offers control over how properties are copied.
     - Can be adapted to perform specific checks or transformations during copying.
   - **Cons**:
     - More verbose and prone to human error (e.g., forgetting to copy a property).
     - It also results in a shallow copy unless modified to handle nested structures manually.

5. **JSON.stringify/parse**:
   - **Pros**:
     - Useful for deep copying plain objects (no functions, symbols, or prototypes).
     - Compact and straightforward syntax.
   - **Cons**:
     - Loses functions, undefined values, and cannot handle special objects like Dates or Sets.
     - Can have performance issues due to serialization and deserialization.

### Performance Observations:

Based on the benchmark results, the spread operator performed exceptionally well, achieving approximately 8.75 million executions per second. The `Object.assign` method also showed a high level of performance, with around 827,765 executions per second. Manual copying was significantly slower, operating at around 378,626 executions per second, indicating the efficiency loss due to the for loop’s overhead. The `structuredClone` and JSON methods were the slowest, with values under 300,000 executions per second, which reflects their complexity when dealing with deep copying.

### Alternatives:

- **Lodash Library**: The `_.cloneDeep()` method can be used when dealing with deep copying that handles various data structures. This library is well-regarded for performance and reliability but comes with a dependency overhead.
- **Immutable.js**: This library provides immutable data structures, so you don’t need to copy objects in the traditional sense; instead, you work with efficiently managed state changes.
- **Object Destructuring** (with spread): It can be considered an alternative for simple shallow copies, especially useful within function arguments.

This benchmark encapsulates essential techniques in JavaScript for object copying, demonstrating varying degrees of performance, complexity, and capability in handling object structures.

Related benchmarks:

Object.assign vs spread operator vs structured clone vs for loop copy vs JSON duplicate with fallbacks (version: 7)

Comparing performance of: Get copy using Object.assign vs Get copy using spread vs Get copy using structuredClone vs Copy manually using for loop vs Copy using JSON.stringify

Created: 20 days ago by: Registered User

Jump to the latest result

Get copy using Object.assign

Get copy using spread

Get copy using structuredClone

Copy manually using for loop

Copy using JSON.stringify

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):