Benchmark: Object.defineProperty vs Object.assign vs Assign to Proxy

Object.defineProperty vs Object.assign vs Assign to Proxy (version: 7)

Comparing performance of: Object.defineProperty vs Object.assign (immutable) vs Object.assign (mutable) vs Object.defineProperty on Proxy vs Property direct on Proxy vs Direct Object Property vs Object.defineProperty with getter and setter vs Object.defineProperties (plural) with getter and setter vs Object.defineProperty on Proxy with getter and setter vs Object.assign on Proxy (mutable)

Created: 17 days ago by: Registered User

Jump to the latest result

Script Preparation code:

var input = new Array(100).fill().map((v, i) => i);
var proxyHandlers = {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value) {
    return Reflect.set(target, prop, value);
  },
  defineProperty(target, prop, descriptor) {
    return Reflect.defineProperty(target, prop, descriptor);
  },  
};

Tests:

Object.defineProperty
const output = input.reduce((acc, value) => Object.defineProperty(acc, `key${value}`, { value }), {});
Object.assign (immutable)
const output = input.reduce((acc, value) => Object.assign({}, acc, { [`key${value}`]: value }), {});
Object.assign (mutable)
const output = input.reduce((acc, value) => Object.assign(acc, { [`key${value}`]: value }), {});
Object.defineProperty on Proxy
const output = input.reduce((acc, value) => Object.defineProperty(acc, `key${value}`, { value }), new Proxy({}, proxyHandlers));
Property direct on Proxy
const output = input.reduce((acc, value) => { acc[`key${value}`] = value; return acc; }, new Proxy({}, proxyHandlers));
Direct Object Property
const output = input.reduce((acc, value) => { acc[`key${value}`] = value; return acc; }, {});
Object.defineProperty with getter and setter
const output = input.reduce((acc, value) => Object.defineProperty(acc, `key${value}`, { get(){return value}, set(v) {} }), {});
Object.defineProperties (plural) with getter and setter
const output = input.reduce((acc, value) => Object.defineProperties(acc, {[`key${value}`]: { get(){return value}, set(v) {} }}), {});
Object.defineProperty on Proxy with getter and setter
const output = input.reduce((acc, value) => Object.defineProperty(acc, `key${value}`, { get(){return value}, set(v) {} }), new Proxy({}, proxyHandlers));
Object.assign on Proxy (mutable)
const output = input.reduce((acc, value) => Object.assign(acc, { [`key${value}`]: value }), new Proxy({}, proxyHandlers));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.defineProperty
Object.assign (immutable)
Object.assign (mutable)
Object.defineProperty on Proxy
Property direct on Proxy
Direct Object Property
Object.defineProperty with getter and setter
Object.defineProperties (plural) with getter and setter
Object.defineProperty on Proxy with getter and setter
Object.assign on Proxy (mutable)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.defineProperty	62877.6 Ops/sec
Object.assign (immutable)	1655.7 Ops/sec
Object.assign (mutable)	56571.7 Ops/sec
Object.defineProperty on Proxy	27187.0 Ops/sec
Property direct on Proxy	40145.4 Ops/sec
Direct Object Property	193082.7 Ops/sec
Object.defineProperty with getter and setter	53566.6 Ops/sec
Object.defineProperties (plural) with getter and setter	12582.2 Ops/sec
Object.defineProperty on Proxy with getter and setter	14633.0 Ops/sec
Object.assign on Proxy (mutable)	30006.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):

LLMs can make mistakes. Check important info.

The benchmark from MeasureThat.net compares various methods of creating or defining properties on JavaScript objects, specifically using `Object.defineProperty`, `Object.assign`, and Proxy along with direct property assignment. Each method has specific use cases, benefits, and drawbacks.

### Benchmark Options:

1. **Object.defineProperty**:
   - **Test Name**: Object.defineProperty
   - **Description**: This method allows you to define new properties directly on an object, specifying additional characteristics (like `enumerable` and `configurable`).
   - **Pros**: Fine control over property attributes.
   - **Cons**: Overhead in performance, especially when defining multiple properties, as shown in the benchmark.
  
2. **Object.assign (Immutable)**:
   - **Test Name**: Object.assign (immutable)
   - **Description**: Creates a new object by copying properties from source objects into a new target object, without mutating the original.
   - **Pros**: Avoids side-effects by not altering the existing object.
   - **Cons**: Performance costs associated with object creation.

3. **Object.assign (Mutable)**:
   - **Test Name**: Object.assign (mutable)
   - **Description**: Mutates the target object instead of creating a new object.
   - **Pros**: Generally more efficient than immutable assignments; less memory usage since it updates the existing object.
   - **Cons**: Potential side effects, which might lead to bugs if the target object is reused elsewhere.

4. **Object.defineProperty on Proxy**:
   - **Test Name**: Object.defineProperty on Proxy
   - **Description**: Utilizing a Proxy, this method uses `Object.defineProperty` to define properties on a Proxy object, which can intercept and redefine fundamental operations.
   - **Pros**: Flexibility in managing property access and mutations via traps.
   - **Cons**: Additional overhead compared to regular objects.

5. **Direct Property on Proxy**:
   - **Test Name**: Property direct on Proxy
   - **Description**: Directly assigns properties on a Proxy object.
   - **Pros**: More straightforward than using `Object.defineProperty` and generally faster.
   - **Cons**: Limited control over property attributes.

6. **Direct Object Property**:
   - **Test Name**: Direct Object Property
   - **Description**: Uses traditional property assignment to define properties on objects.
   - **Pros**: The fastest among various methods, as shown in the benchmark results.
   - **Cons**: Less control over property visibility and configurability.

7. **Object.defineProperty with Getter and Setter**:
   - **Test Name**: Object.defineProperty with getter and setter
   - **Description**: Defines properties with custom getters and setters.
   - **Pros**: Allows encapsulation and further control over property interactions.
   - **Cons**: Performance impact; more overhead than direct assignments.

8. **Object.defineProperties (Plural) with Getter and Setter**:
   - **Test Name**: Object.defineProperties (plural) with getter and setter
   - **Description**: Similar to `Object.defineProperty`, but allows defining multiple properties at once.
   - **Pros**: Convenience in defining multiple properties.
   - **Cons**: Still incurs performance costs similar to individual property creation.

9. **Object.defineProperty on Proxy with Getter and Setter**:
   - **Test Name**: Object.defineProperty on Proxy with getter and setter
   - **Description**: Combines the use of Proxies with getters and setters using `Object.defineProperty`.
   - **Pros**: Maximal encapsulation control allowing interception of property access.
   - **Cons**: Performance overhead with Proxy layers added.

### Previous Benchmark Results Overview:

In the benchmark results, the following observations can be made based on the number of executions per second across the tests:

- **Fastest Method**: The "Direct Object Property" approach shows the highest execution rate, indicating that straightforward property assignment is generally the most performant.
- **Comparison of Define Methods**: "Object.defineProperty" takes a hit in performance compared to direct assignments, which is expected given its overhead in setting property attributes.
- **Mutable vs. Immutable `Object.assign`**: The mutable version is significantly faster than the immutable version, confirming that object creation has a cost.
- **Performance of Proxy**: Tests using Proxy (both with and without using `Object.defineProperty`) show slower performance due to the additional complexity introduced by Proxies.

### Alternatives:

1. **Using Functions/Classes**: Instead of directly manipulating object properties, using constructor functions or ES6 classes may provide a more structured way to create objects, although it doesn’t directly compete with these specific methods in terms of property definition.
2. **New ES features**: Although not covered in this benchmark, new ES features like `Object.fromEntries` could be considered for certain object creation tasks.
3. **Libraries for Immutable Structures**: Libraries like Immutable.js or Immer can replace the need for mutable versus immutable consideration by providing data structures designed for immutability.

In conclusion, each method in this benchmark highlights a trade-off between performance, ease of use, and control over property definitions. Understanding these differences is crucial for software engineers aiming to optimize their code effectively.

Related benchmarks:

Object.defineProperty vs Object.assign vs Assign to Proxy (version: 7)

Created: 17 days ago by: Registered User

Jump to the latest result

Object.defineProperty

Object.assign (immutable)

Object.assign (mutable)

Object.defineProperty on Proxy

Property direct on Proxy

Direct Object Property

Object.defineProperty with getter and setter

Object.defineProperties (plural) with getter and setter

Object.defineProperty on Proxy with getter and setter

Object.assign on Proxy (mutable)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):