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"]
    }
  ]
}

​x
 
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};
const finalObject = {...firstObject};
Using Object.assign
const finalObject = Object.assign(firstObject);
const finalObject = Object.assign(firstObject);

forEach

const finalObject = {}
Object.keys(firstObject).forEach(key => {finalObject[key] = firstObject[key] })

 
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);

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Using the spread operator
Using Object.assign
forEach
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/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

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

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:

Spread operator (...): This method creates a new object by spreading the properties of the original object.
Object.assign(): This method creates a new object and assigns properties from the original object to it.
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.
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:

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.
Lodash's cloneDeep() function: This function provides a more robust and flexible way to create deep clones, especially for large or complex objects.
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.

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.

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