Benchmark: Spread vs Object.assign vs Object.keys with forEach deep clone

Script Preparation code:

var firstObject = {
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipcode": "12345"
  },
  "contacts": [
    {
      "type": "email",
      "value": "john.doe@example.com"
    },
    {
      "type": "phone",
      "value": "+1 123-456-7890"
    }
  ],
  "skills": {
    "programming": ["JavaScript", "Python", "Java"],
    "design": ["Photoshop", "Illustrator"],
    "languages": {
      "spoken": ["English", "Spanish"],
      "written": ["English", "French"]
    }
  },
  "isActive": true,
  "projects": [
    {
      "name": "Project A",
      "status": "completed",
      "team": ["Alice", "Bob"]
    },
    {
      "name": "Project B",
      "status": "in progress",
      "team": ["Charlie", "David"]
    }
  ]
}

Tests:

Using the spread operator
const finalObject = {...firstObject};
Using Object.assign
const finalObject = Object.assign(firstObject);
forEach
const finalObject = {} Object.keys(firstObject).forEach(key => {finalObject[key] = firstObject[key] })
deep clone
function deepClone(original) { const cloned = {}; Object.keys(original).forEach(key => { const value = original[key]; if (typeof value === 'object' && value !== null) { // Recursively clone nested objects cloned[key] = deepClone(value); } else { // Copy non-object values directly cloned[key] = value; } }); return cloned; } const finalObject = deepClone(firstObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
forEach
deep clone

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different methods for creating a deep clone of an object in JavaScript can be an interesting benchmark.

**Overview**

The benchmark compares four methods:

1. **Spread operator (`...`)**: This method creates a new object by spreading the properties of the original object.
2. **`Object.assign()`**: This method creates a new object and assigns properties from the original object to it.
3. **`forEach()` with `Object.keys()`**: This method iterates over the properties of the original object using `Object.keys()` and assigns each property value to a new object using the `forEach()` method.
4. **Deep clone function (`deepClone()`)**: This is a custom function that recursively clones nested objects.

**Options comparison**

Each method has its pros and cons:

* **Spread operator`**: Pros:
	+ Fast and concise
	+ Works well for simple objects
Cons:
	+ May not work correctly with complex objects or arrays
	+ May not preserve object references
* **`Object.assign()`**: Pros:
	+ Works well with simple objects
	+ Preserves object references
Cons:
	+ Can be slower than the spread operator for large objects
	+ May not work correctly with nested objects
* **`forEach()` with `Object.keys()`**: Pros:
	+ Flexible and reusable
	+ Works with complex objects and arrays
Cons:
	+ Can be slower than other methods due to iteration overhead
	+ Requires manual property assignment
* **Deep clone function (`deepClone()`)**: Pros:
	+ Ensures complete object recreation, including nested objects
	+ Preserves object references
Cons:
	+ Can be slower due to recursive cloning
	+ May require more memory allocation

**Library and custom functions**

The `deepClone()` function is a custom implementation that recursively clones nested objects. It uses `Object.keys()` to iterate over the properties of the original object and assigns each property value to a new object using the `forEach()` method.

**Other considerations**

* The benchmark measures the execution speed of each method, which may not reflect other important aspects like memory usage or code readability.
* The use of a custom `deepClone()` function introduces additional complexity compared to the other methods.

**Alternatives**

If you're interested in exploring alternative methods for creating deep clones, consider:

1. **JSON.parse(JSON.stringify())**: This method can be used to create a deep clone of simple objects or arrays. However, it may not work correctly with complex objects or nested arrays.
2. **Lodash's `cloneDeep()` function**: This function provides a more robust and flexible way to create deep clones, especially for large or complex objects.
3. **Underscore.js's `_cloneDeep()` function**: Similar to Lodash's `cloneDeep()`, this function provides a simple and efficient way to create deep clones.

Ultimately, the choice of method depends on your specific use case and performance requirements.

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

Browser/OS: Chrome 117 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	19153344.0 Ops/sec
Using Object.assign	10854715.0 Ops/sec
forEach	1855195.9 Ops/sec
deep clone	377658.8 Ops/sec

Related benchmarks:

Spread vs Object.assign vs Object.keys with forEach deep clone (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs forEach vs deep clone

Created: one year ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

forEach

deep clone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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