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: 3 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:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

Browser/OS: Chrome 100 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	31898190.0 Ops/sec
Using Object.assign	3078330.0 Ops/sec
Manually copying properties	705501184.0 Ops/sec
Create new object while copying	758132992.0 Ops/sec
Create new object from scratch	762595264.0 Ops/sec
JSON	584969.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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:

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: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Manually copying properties

Create new object while copying

Create new object from scratch

JSON

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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