Benchmark: Object.defineProperty vs Object.assign vs direct assigment

Script Preparation code:

var input = new Array(100).fill().map((v, i) => i)

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 }), {});
direct assignment
const output = input.reduce((acc, value) => acc[`key${value}`] = value, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.defineProperty
Object.assign (immutable)
Object.assign (mutable)
direct assignment

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/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Object.defineProperty	15605.8 Ops/sec
Object.assign (immutable)	490.7 Ops/sec
Object.assign (mutable)	16961.4 Ops/sec
direct assignment	16048.6 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of three approaches to create an object with dynamic keys:

1. `Object.defineProperty`: This method is used to define a property on an existing object. It takes two arguments: the object to which the property is to be added, and a descriptor object that defines the property's attributes.

2. `Object.assign`: When used with an immutable object (`{}`), this method creates a new object and assigns the properties from another object to it without modifying the original object. However, when used with a mutable object (`[]` or `{}`), it modifies the original object by adding new properties to it.

3. `Direct assignment` (`acc[key${value}] = value`): This approach uses bracket notation to directly assign a property name and value to an existing object.

Let's break down each option:

**Object.defineProperty**

Pros:

* Provides more control over the creation of objects, as you can specify properties and their attributes in detail.
* Can be used with both immutable and mutable objects.

Cons:

* May incur additional overhead due to the need to define property descriptors.
* Requires more code compared to `Object.assign` or direct assignment.

**Object.assign (immutable)**

Pros:

* Creates a new object, which can prevent unintended modifications to existing data.
* Can be used with both immutable and mutable objects.

Cons:

* May incur additional overhead due to the creation of a new object.
* Requires an explicit call to `Object.assign` with an immutable object (`{}`).

**Object.assign (mutable)**

Pros:

* Modifies the original object, which can be beneficial when working with large datasets or complex data structures.
* Can be used with both immutable and mutable objects.

Cons:

* May cause unintended side effects if not properly handled.
* Requires careful handling of the resulting object to avoid modifying it unexpectedly.

**Direct assignment**

Pros:

* Simple and concise code that directly creates a new property on an existing object.
* Fast execution, as it only requires accessing the object's properties and assigning values.

Cons:

* May cause unintended side effects if not properly handled (e.g., when using mutable objects).
* Limited control over the creation of objects, as you are limited to bracket notation.

Other considerations:

* Performance: Direct assignment is generally faster than `Object.defineProperty` or `Object.assign`, but may be slower for very large datasets due to the overhead of property definition and object modification.
* Code readability and maintainability: `Object.defineProperty` provides more control over object creation, while `Object.assign` offers a simpler way to create immutable objects. Direct assignment is concise but may require additional care when handling mutable objects.

As for libraries used in this benchmark, none are explicitly mentioned.

Special JavaScript features or syntax used:

* Bracket notation (`[]`) is used in the direct assignment approach.
* Property definition descriptors (`{ value }`) are used in `Object.defineProperty`.
* Object assignment methods (`Object.assign`) are used in both immutable and mutable object approaches.

Related benchmarks:

Object.defineProperty vs Object.assign vs direct assigment (version: 0)

Comparing performance of: Object.defineProperty vs Object.assign (immutable) vs Object.assign (mutable) vs direct assignment

Created: 2 years ago by: Guest

Jump to the latest result

Object.defineProperty

Object.assign (immutable)

Object.assign (mutable)

direct assignment

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