Benchmark: object clone 2 - MeasureThat.net

Script Preparation code:

var obj = [
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "activeExperienceChromeSettings",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "selectedContent",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "canvasSession",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "clientInfo",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "experienceConfigs",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "experiencesData",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "routeConfig",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "selectedContentMap",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "showUcm",
        "derived": false
    },
    {
        "nodeId": "snCanvasAppshellLayout",
        "propName": "ucmConfig",
        "derived": false
    }
]

Tests:

spread operator
var res = {...obj}
object assign
var res = Object.assign({}, obj)
shallow copy
function shallowCopy(...objs) { const res = Object.create(null); for (const obj of objs) { for (const key in obj) { res[key] = obj[key]; } } res.hasOwnProperty = (prop) => { return prop in res; } return res; } var res = shallowCopy(obj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
object assign
shallow copy

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread operator	1363882.9 Ops/sec
object assign	1270755.0 Ops/sec
shallow copy	2657726.2 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 the provided benchmark.

**Benchmark Definition JSON**

The benchmark defines three test cases:

1. **Object Clone 2**: The script prepares an object `obj` with multiple properties and then clones it using different methods:
	* Spread operator (`var res = {...obj}`)
	* Object assign (`var res = Object.assign({}, obj)`)
	* Shallow copy function (`function shallowCopy(...objs) { ... } var res = shallowCopy(obj)`)

Each test case measures the performance of these cloning methods.

**Test Case Details**

The individual test cases are:

1. **Spread Operator**: Clones the object `obj` using the spread operator.
2. **Object Assign**: Clones the object `obj` using Object.assign().
3. **Shallow Copy**: Uses a custom shallow copy function to clone the object `obj`.

**Library Used**

In the "Shallow Copy" test case, the library used is a custom function. The purpose of this function is to create a shallow copy of an array or object by iterating over its elements and assigning them to a new object.

**Special JS Features/Syntax**

The spread operator (`{...obj}`) was introduced in ECMAScript 2018 (ES2018). It allows for creating a new object with the same properties as an existing object, but with optional modifications.

Object.assign() is a built-in JavaScript function that copies properties from one or more source objects to a target object. It's commonly used to merge multiple objects into a single object.

**Pros and Cons**

Here are some pros and cons of each cloning method:

1. **Spread Operator**:
	* Pros: Concise, readable, and efficient.
	* Cons: May not be supported in older browsers or Node.js versions.
2. **Object Assign**:
	* Pros: Widely supported across browsers and Node.js versions.
	* Cons: Can be less readable than the spread operator, and may lead to shallow copying if not used carefully.
3. **Shallow Copy Function**:
	* Pros: Customizable and can provide more control over the cloning process.
	* Cons: More verbose and might require additional code maintenance.

**Other Alternatives**

Other alternatives for deep or shallow object cloning include:

1. Lodash's `cloneDeep()` function
2. Underscore.js's `clone` function
3. JavaScript's built-in `JSON.parse(JSON.stringify(obj))` method (Note: This creates a deep copy, but it can be slower and less efficient than other methods)

These alternatives might offer more features or performance improvements for specific use cases, but they often come with additional dependencies or complexity.

Related benchmarks:

object clone 2 (version: 0)

Comparing performance of: spread operator vs object assign vs shallow copy

Created: one year ago by: Guest

Jump to the latest result

spread operator

object assign

shallow copy

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