Benchmark: JavaScript fastest way to clone an object + JSON copy

JavaScript fastest way to clone an object + JSON copy (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Manually copying properties vs Create new object while copying vs Create new object from scratch

Comparing performance of: Using the spread operator vs Using Object.assign vs Manually copying properties vs Create new object while copying vs Create new object from scratch vs JSON

Created: 4 years ago by: Guest

Jump to the latest result

Tests:

Using the spread operator
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = {...firstObject};
Using Object.assign
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = Object.assign({}, firstObject);
Manually copying properties
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; let finalObject = {}; finalObject.prop0 = firstObject.prop0; finalObject.prop1 = firstObject.prop1; finalObject.prop2 = firstObject.prop2; finalObject.prop3 = firstObject.prop3; finalObject.prop4 = firstObject.prop4; finalObject.prop5 = firstObject.prop5;
Create new object while copying
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = { prop0: firstObject.prop0, prop1: firstObject.prop1, prop2: firstObject.prop2, prop3: firstObject.prop3, prop4: firstObject.prop4, prop5: firstObject.prop5 };
Create new object from scratch
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 };
JSON
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = JSON.parse(JSON.stringify(firstObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Manually copying properties
Create new object while copying
Create new object from scratch
JSON

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Overview**

The benchmark compares the performance of six different methods for cloning an object in JavaScript:

1. Using the spread operator (`{...obj}`)
2. Using `Object.assign()`
3. Manually copying properties
4. Creating a new object while copying
5. Creating a new object from scratch using `JSON.parse(JSON.stringify())`

**Options Comparison**

Here's a brief description of each method:

1. **Using the spread operator**: This method creates a new object by iterating over the properties of the original object and assigning each property to the new object using the syntax `{ prop: value }`. This approach is concise and easy to read.
2. **Using `Object.assign()`**: This method assigns the values of one or more source objects to one target object. In this case, it's used to copy the properties of the original object to a new object.
3. **Manually copying properties**: This method explicitly iterates over the properties of the original object and assigns each property to the new object using the syntax `obj.prop = value`.
4. **Creating a new object while copying**: Similar to manually copying properties, but uses an intermediate object to copy the properties from the original object.
5. **Creating a new object from scratch using `JSON.parse(JSON.stringify())`**: This method creates a deep copy of the original object by serializing it to JSON and then parsing it back into a JavaScript object.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Using the spread operator**:
	+ Pros: concise, easy to read
	+ Cons: may not work as expected with certain types of objects (e.g., arrays)
* **Using `Object.assign()`**:
	+ Pros: widely supported, efficient
	+ Cons: can be slower than other methods due to the overhead of function calls
* **Manually copying properties**:
	+ Pros: flexible, allows for more control over the copy process
	+ Cons: verbose, prone to errors if not implemented correctly
* **Creating a new object while copying**:
	+ Pros: efficient, avoids manual property iteration
	+ Cons: may require additional memory allocation
* **Creating a new object from scratch using `JSON.parse(JSON.stringify())`**:
	+ Pros: deep copy, preserves original object's structure and properties
	+ Cons: can be slower due to the overhead of serialization and parsing

**Benchmark Results**

The benchmark results show that:

1. Creating a new object from scratch using `JSON.parse(JSON.stringify())` is the fastest method.
2. Manually copying properties is slightly faster than the spread operator, but still slower than creating a new object from scratch.
3. Using `Object.assign()` is slower than the top two methods.

These results suggest that when it comes to cloning objects in JavaScript, creating a new object from scratch using `JSON.parse(JSON.stringify())` may be the most efficient approach, followed closely by manually copying properties.

Related benchmarks: