Benchmark: Object.defineProperty vs Object.assign vs Object spread

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 spread
const output = input.reduce((acc, value) => ({ ...acc, [`key${value}`]: value }));
Object.assign (mutable)
const output = input.reduce((acc, value) => Object.assign(acc, { [`key${value}`]: value }), {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.defineProperty
Object spread
Object.assign (mutable)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Object.defineProperty	33152.2 Ops/sec
Object spread	8545.8 Ops/sec
Object.assign (mutable)	31283.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents a benchmark test case comparing three different approaches to define properties on an object:

1.  **`Object.defineProperty()`**: This method is used to dynamically add or modify own enumerable properties on an object. It returns `undefined` and throws no error if successful.
2.  **`Object.assign()`** (with a mutable approach): The standard JavaScript method for copying properties from one or more source objects to a target object. However, when using it with multiple sources, it creates a new object instead of modifying the existing one. This is why we have an additional version labeled as "mutable".
3.  **`Object spread operator (`)**: Also known as the shorthand property assignment syntax, this allows you to copy properties from one or more source objects to a target object.

**Options Comparison:**

Here's a comparison of these three approaches:

**Pros and Cons:**

*   **`Object.defineProperty()`**: Pros:
    *   Faster
    *   More control over property descriptors
    *   Suitable for use cases requiring deep property modification

Cons:
    *   Less readable code due to verbose syntax
*   **`Object.assign()` (mutable)**: Pros:
    *   Easier to read and write than Object.defineProperty()
    *   Less error-prone, as it creates a new object instead of modifying an existing one

Cons:
    *   Slower than `Object.defineProperty()`
    *   Unintended behavior if used with multiple sources
*   **`Object spread operator (`)`**: Pros:
    *   Fast and efficient
    *   More concise code compared to Object.defineProperty()
    *   Suitable for shallow property modifications

Cons:
    *   Less readable code than `Object.assign()`
    *   Not suitable for deep property modification

**Other Considerations:**

*   **ES6 syntax**: The object spread operator was introduced in ECMAScript 2015, while Object.defineProperty() and Object.assign() have been part of the standard JavaScript specification since ES3.
*   **Browser compatibility**: Although these methods are widely supported, it's essential to ensure compatibility with older browsers, especially when using `Object.defineProperty()` or `Object.assign()`.

**Library:**

None

**Special JS feature or syntax:** None mentioned in the provided code.

Related benchmarks:

Object.defineProperty vs Object.assign vs Object spread (version: 0)

Comparing performance of: Object.defineProperty vs Object spread vs Object.assign (mutable)

Created: 2 years ago by: Guest

Jump to the latest result

Object.defineProperty

Object spread

Object.assign (mutable)

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