Benchmark: Shallow cloning an object: Object.assign() vs. Spread vs. for-in loop

Script Preparation code:

var orig = {
    hey: "howdy"
}
for (i = 0; i < 1000; i++) {
    orig[Math.random() + ""] = i % 3 === 0 ? "some string blah blah blah" : i % 3 === 1 ? ["a", "b", "c"] : {
        yo: "hello"
    };
}
var hasOwnProperty = Object.prototype.hasOwnProperty;

Tests:

Object.assign()
const clone = Object.assign({}, orig, { hey: "sup" }) clone.hey
Spread
const clone = { ...orig, hey: "sup" } clone.hey
For-in (no hasOwnProperty check)
const clone = {}; for (const k in orig) { clone[k] = orig[k] } clone.hey = "sup" clone.hey
For-in (direct hasOwnProperty check)
const clone = {}; for (const k in orig) { if (orig.hasOwnProperty(k)) { clone[k] = orig[k] } } clone.hey = "sup" clone.hey
For-in (indirect hasOwnProperty check)
const clone = {}; for (const k in orig) { if (hasOwnProperty.call(orig, k)) { clone[k] = orig[k] } } clone.hey = "sup" clone.hey

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign()
Spread
For-in (no hasOwnProperty check)
For-in (direct hasOwnProperty check)
For-in (indirect hasOwnProperty check)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; CrOS x86_64 13505.63.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Chrome OS 13505.63.0

View result in a separate tab

Test name	Executions per second
Object.assign()	908.7 Ops/sec
Spread	609.3 Ops/sec
For-in (no hasOwnProperty check)	821.5 Ops/sec
For-in (direct hasOwnProperty check)	647.1 Ops/sec
For-in (indirect hasOwnProperty check)	566.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of three approaches to create a shallow clone of an object: `Object.assign()`, spread syntax `{ ...orig }`, and using a `for-in` loop with or without checking for `hasOwnProperty`.

**Comparison of Approaches**

### Object.assign()

* **Purpose**: Create a new object by copying all enumerable properties from the original object.
* **Pros**: Efficient, simple, and widely supported across browsers.
* **Cons**: May not work as expected if the original object has non-enumerable properties or if the cloned property is an array.

**Spread Syntax**

* **Purpose**: Create a new object with the same properties as the original object using the spread operator `{ ...orig }`.
* **Pros**: Concise, efficient, and works well for objects with simple properties.
* **Cons**: May not work as expected if the original object has complex properties (e.g., functions, arrays).

**For-in Loop**

* **Purpose**: Iterate over the enumerable properties of the original object and copy them to a new object using a `for-in` loop.
* **Pros**: Works well for objects with complex properties or non-enumerable properties.
* **Cons**: Can be slower than other approaches due to the iteration overhead.

The benchmark also includes variations of the `For-in` approach, which can significantly impact performance:

### For-in Loop (Direct HasOwnProperty Check)

* **Purpose**: Check if each property is an own property using `hasOwnProperty()` before copying it.
* **Pros**: More efficient than indirect checks by avoiding unnecessary iterations.
* **Cons**: May still be slower due to the overhead of function calls.

### For-in Loop (Indirect HasOwnProperty Check)

* **Purpose**: Use a function reference to check if each property is an own property, which can be faster but also more complex.
* **Pros**: Can be faster than direct checks by avoiding unnecessary iterations.
* **Cons**: More complex and may not work as expected in all cases.

**Library Usage**

The benchmark uses the `Object.prototype.hasOwnProperty()` method, which is a built-in method of the JavaScript object prototype. This method is used to check if a property is an own property of the object, excluding inherited properties.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes explicitly used in this benchmark beyond what's already discussed. However, it's worth noting that some browsers may optimize `Object.assign()` differently than others due to its widespread use and implementation.

**Alternatives**

If you're interested in exploring alternative approaches for creating shallow clones of objects:

* **JSON.parse(JSON.stringify(obj))**: This method can be used to create a deep clone of an object, but it's not suitable for shallow cloning.
* **Array.prototype.slice() + Object.assign()**: You can use `Array.prototype.slice()` to create an array clone and then pass the cloned array and an empty object to `Object.assign()` to create a shallow clone.

Keep in mind that these alternatives may have their own trade-offs and might not be as efficient or concise as the approaches used in this benchmark.

Related benchmarks:

Shallow cloning an object: Object.assign() vs. Spread vs. for-in loop (version: 0)

Comparing performance of: Object.assign() vs Spread vs For-in (no hasOwnProperty check) vs For-in (direct hasOwnProperty check) vs For-in (indirect hasOwnProperty check)

Created: 4 years ago by: Guest

Jump to the latest result

Object.assign()

Spread

For-in (no hasOwnProperty check)

For-in (direct hasOwnProperty check)

For-in (indirect hasOwnProperty check)

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