Benchmark: JSON.stringify and parse vs Object.assign vs Destructure

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var obj = {a: "hello", c: "test", po: 33, arr: [1, 2, 3, 4], anotherObj: {a: 33, str: "whazzup"}};

Tests:

JSON.stringify and parse
const obj1 = JSON.parse(JSON.stringify(obj));
Object.assign
const obj2 = Object.assign({}, obj);
Destructure
const obj3 = {...obj};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify and parse
Object.assign
Destructure

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/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Destructure

65.9M/s

Object.assign

20.7M/s

JSON.stringify and parse

2.6M/s

View exact numbers

Test name	Executions per second
✓ Destructure	65,914,984 Ops/sec
Object.assign	20,717,650 Ops/sec
JSON.stringify and parse	2,623,167 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark you provided tests three different methods for creating a shallow copy of a JavaScript object. The methods being compared are `JSON.stringify` and `JSON.parse`, `Object.assign`, and the object spread syntax (or destructuring). Each method has its own use cases, pros, and cons.

### Methods Compared

1. **JSON.stringify and JSON.parse**
   - **Benchmark Definition:** `const obj1 = JSON.parse(JSON.stringify(obj));`
   - **Usage:** This method serializes the object into a JSON string and then parses it back into an object.
   - **Pros:**
     - Deep clones objects, so nested objects are also copied.
     - Simple syntax.
   - **Cons:**
     - Fails for objects with methods (e.g., functions) or non-JSON data types like undefined, functions, or symbols, as they get lost in the serialization process.
     - Typically slower because of the overhead of converting to a string and back.
   - **Use Case:** Useful when you need to deep clone a simple object composed of primitive properties and other objects.

2. **Object.assign**
   - **Benchmark Definition:** `const obj2 = Object.assign({}, obj);`
   - **Usage:** This method copies properties from one or more source objects to a target object.
   - **Pros:**
     - Creates a shallow copy of the object.
     - Can copy properties from multiple objects.
   - **Cons:**
     - Only creates a shallow copy, meaning that nested objects or arrays will still reference the original objects.
     - Will not copy properties that are non-enumerable.
   - **Use Case:** Suitable for merging properties of one object into another, but remember it’s only a shallow copy.

3. **Destructure (Spread syntax)**
   - **Benchmark Definition:** `const obj3 = {...obj};`
   - **Usage:** Uses the spread operator to spread the properties of an object into a new object.
   - **Pros:**
     - Simple and concise syntax for copying objects.
     - Similar to `Object.assign`, it creates a shallow copy.
     - More readable and often preferred in modern JavaScript code.
   - **Cons:**
     - Also creates a shallow copy, so properties that are objects will still reference the same object.
   - **Use Case:** Commonly used for creating shallow copies and merging state in frameworks like React.

### Benchmark Results
The benchmark results show the number of executions per second for each method, indicating performance:

- **Destructure** performs significantly better at **41,672,228 executions per second**.
- **Object.assign** comes next, with **9,264,061 executions per second**.
- **JSON.stringify and parse** is the slowest, at **1,120,727 executions per second**.

### Other Considerations
- **Choosing the Right Method:** The choice of method depends on whether you need a shallow or deep copy. If you only need a shallow copy and are working with properties that are not objects, then `Object.assign` or the spread operator is more efficient. For deep cloning, while `JSON.stringify`/`JSON.parse` is a common choice, developers must be cautious about the data types involved.
- **Alternatives:** Other alternatives for deep cloning include using libraries like **Lodash** (specifically `_.cloneDeep(obj)`), which can handle complex cases without losing data types, but this comes with the overhead of including an additional library.

In summary, the benchmark compares methods for copying objects in JavaScript, weighing performance against the type of copy (shallow vs deep), and the appropriate use cases for each method.

JSON.stringify and parse vs Object.assign vs Destructure (version: 1)

Comparing performance of: `JSON.stringify and parse vs Object.assign vs Destructure`

Created: one year ago by: Guest

Go to the latest result

JSON.stringify and parse

Object.assign

Destructure

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

JSON.stringify and parse vs Object.assign vs Destructure (version: 1)

Comparing performance of: JSON.stringify and parse vs Object.assign vs Destructure

Created: one year ago by: Guest

Go to the latest result

JSON.stringify and parse

Object.assign

Destructure

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `JSON.stringify and parse vs Object.assign vs Destructure`