Benchmark: Object.assign vs iteration performance, more props (Grammarly Focal)

Object.assign vs iteration performance, more props (Grammarly Focal) (version: 0)

Comparing performance of: `Iteration with blank object vs Object.assign with blank object vs Iteration with created object vs Object.assign with created object vs Iteration with blank object and prototype vs Object.assign with blank object and prototype vs Iteration with blank object and prototype prop vs Object.assign with blank object and prototype prop`

Created: 6 years ago by: Guest

Go to the latest result

Script Preparation code:

class Thing {
    constructor() {
        this.a1 = Math.random();
        this.a2 = Math.random();
        this.a3 = Math.random();
        this.a4 = Math.random();
        this.a5 = Math.random();
        this.a6 = Math.random();
        this.a7 = Math.random();
        this.a8 = Math.random();
        this.a9 = Math.random();
        this.aa = Math.random();
        this.ab = Math.random();
    }
}

var r = new Thing();

Tests:

Iteration with blank object
var copy = {}; for(const prop in r) copy[prop] = r[prop];
Object.assign with blank object
var copy = {}; Object.assign(copy, r);
Iteration with created object
var copy = Object.create(Object.getPrototypeOf(r)); for(const prop in r) copy[prop] = r[prop];
Object.assign with created object
var copy = Object.create(Object.getPrototypeOf(r)); Object.assign(copy, r);
Iteration with blank object and prototype
var copy = {}; Object.setPrototypeOf(copy, Object.getPrototypeOf(r)); for(const prop in r) copy[prop] = r[prop];
Object.assign with blank object and prototype
var copy = {}; Object.setPrototypeOf(copy, Object.getPrototypeOf(r)); Object.assign(copy, r);
Iteration with blank object and prototype prop
var copy = {}; copy.__proto__ = r.__proto__; for(const prop in r) copy[prop] = r[prop];
Object.assign with blank object and prototype prop
var copy = {}; copy.__proto__ = r.__proto__; Object.assign(copy, r);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Iteration with blank object
Object.assign with blank object
Iteration with created object
Object.assign with created object
Iteration with blank object and prototype
Object.assign with blank object and prototype
Iteration with blank object and prototype prop
Object.assign with blank object and prototype prop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Object.assign with blank object

2.3M/s

Object.assign with blank object and prototype prop

1.6M/s

Object.assign with created object

1.3M/s

Object.assign with blank object and prototype

1.2M/s

Iteration with blank object

857K/s

Iteration with blank object and prototype prop

725K/s

Iteration with created object

663K/s

Iteration with blank object and prototype

640K/s

View exact numbers

Test name	Executions per second
✓ Object.assign with blank object	2,311,630 Ops/sec
Object.assign with blank object and prototype prop	1,597,628 Ops/sec
Object.assign with created object	1,338,702 Ops/sec
Object.assign with blank object and prototype	1,236,175 Ops/sec
Iteration with blank object	857,258 Ops/sec
Iteration with blank object and prototype prop	724,508 Ops/sec
Iteration with created object	662,647 Ops/sec
Iteration with blank object and prototype	639,820 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its various aspects to explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of different methods for copying an object in JavaScript. The object `r` is created with 10 properties (a1-a9, aa, ab), and a test case is used to measure how long it takes to create a copy of this object using various methods.

**Tested Methods**

There are four main methods tested:

1. **Iteration**: Using a `for...in` loop to iterate over the object's properties and assign them to a new object (`copy`).
2. **Object.assign()**: Using the built-in `Object.assign()` method to create a copy of an object.
3. **Object.create() + Object.assign()**: Creating a new object using `Object.create()` and then assigning the original object's properties to it using `Object.assign()`.
4. **Iteration with prototype**: Using a `for...in` loop to iterate over the object's properties, but this time accessing the prototype chain for each property.
5. **Object.assign() with prototype**: Using `Object.assign()` to create a copy of an object, and then setting the original object as the new object's prototype.

**Pros and Cons of Each Method**

1. **Iteration**:
	* Pros: Can be used for complex objects with many properties, allows for more control over the copying process.
	* Cons: Can be slow for large objects due to the overhead of iterating over each property.
2. **Object.assign()**:
	* Pros: Fast and efficient, can handle most object types, including arrays and functions.
	* Cons: May not work as expected for complex objects with many properties or prototype chains.
3. **Object.create() + Object.assign()**:
	* Pros: Provides more control over the copying process, can be used for complex objects with many properties.
	* Cons: Can be slower than `Object.assign()` due to the overhead of creating a new object.
4. **Iteration with prototype**:
	* Pros: Allows for deep cloning of objects that have complex prototypes.
	* Cons: Can be slow and inefficient due to the overhead of accessing the prototype chain for each property.
5. **Object.assign() with prototype**:
	* Pros: Fast and efficient, can handle most object types, including arrays and functions.
	* Cons: May not work as expected for complex objects with many properties or deep prototypes.

**Benchmark Results**

The benchmark results show that `Object.assign()` is generally the fastest method, followed closely by `Iteration` (with and without prototype). The `Object.create() + Object.assign()` method is slower due to its additional overhead. However, it's worth noting that the performance differences between these methods may not be significant for all use cases.

**Conclusion**

This benchmark helps illustrate the trade-offs between different object copying methods in JavaScript. While `Object.assign()` provides a fast and efficient solution for most cases, the choice of method ultimately depends on the specific requirements of your application.