Benchmark: JavaScript fastest way to clone an object

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	30825910.0 Ops/sec
Using Object.assign	5996999.0 Ops/sec
Manually copying properties	93699416.0 Ops/sec
Create new object while copying	86878408.0 Ops/sec
Create new object from scratch	86349760.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down each test case and explain what's being tested, compared, and their pros and cons.

**1. Using the Spread Operator**

The benchmark tests the performance of using the spread operator (`{...}`) to clone an object in JavaScript. The script preparation code is:
```javascript
const firstObject = { 
  prop0: 'Hello world', 
  prop1: 1, 
  prop2: 2, 
  prop3: "3", 
  prop4: false, 
  prop5: 0.2 
};

const finalObject = {...firstObject};
```
The test creates a new object `finalObject` by spreading the properties of `firstObject`. The benchmark measures how many times this operation can be performed per second.

Pros:

* Easy to read and understand
* Efficient use of spread operator

Cons:

* May not be as efficient as other methods for very large objects

**2. Using Object.assign**

The benchmark tests the performance of using `Object.assign()` to clone an object in JavaScript. The script preparation code is:
```javascript
const firstObject = { 
  prop0: 'Hello world', 
  prop1: 1, 
  prop2: 2, 
  prop3: "3", 
  prop4: false, 
  prop5: 0.2 
};

const finalObject = Object.assign({}, firstObject);
```
The test creates a new object `finalObject` by copying the properties of `firstObject` using `Object.assign()`. The benchmark measures how many times this operation can be performed per second.

Pros:

* Widely supported and well-known method
* Can handle large objects efficiently

Cons:

* May not be as efficient as other methods for very small objects

**3. Manually Copying Properties**

The benchmark tests the performance of manually copying properties from one object to another in JavaScript. The script preparation code is:
```javascript
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;
```
The test creates a new object `finalObject` and manually copies its properties from `firstObject`. The benchmark measures how many times this operation can be performed per second.

Pros:

* No dependencies on libraries or functions

Cons:

* Can be tedious and error-prone
* May not handle large objects efficiently

**4. Create New Object While Copying**

The benchmark tests the performance of creating a new object by copying properties from an existing object in JavaScript. The script preparation code is:
```javascript
const firstObject = { 
  prop0: 'Hello world', 
  prop1: 1, 
  prop2: 2, 
  prop3: "3", 
  prop4: false, 
  prop5: 0.2 
};

const finalObject = Object.assign({}, firstObject);
```
The test creates a new object `finalObject` by copying the properties of `firstObject`. The benchmark measures how many times this operation can be performed per second.

Pros:

* Simple and easy to read

Cons:

* Not using the spread operator, which may be more efficient for some use cases

**5. Using the Spread Operator**

The benchmark tests the performance of using the spread operator (`{...}`) to clone an object in JavaScript (again). The script preparation code is:
```javascript
const firstObject = { 
  prop0: 'Hello world', 
  prop1: 1, 
  prop2: 2, 
  prop3: "3", 
  prop4: false, 
  prop5: 0.2 
};

Pros:

* Same as before

Cons:

* Same as before

Overall, each method has its strengths and weaknesses. Using the spread operator is efficient and easy to read, while manually copying properties can be tedious and error-prone. `Object.assign()` is widely supported and can handle large objects efficiently, but may not be as efficient for very small objects.

Related benchmarks:

JavaScript fastest way to clone an object (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

Created: 6 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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