Benchmark: Object.assign vs spread operator vs property accessor 2

Script Preparation code:

var arr = [...Array(10).keys()];
var alphabet = [...'abcdefghijklmnopqrstuvwxyz'];

Tests:

Object.assign
arr.reduce((acc, cur) => Object.assign(acc, { [alphabet[cur]]: cur }), {});
spread operator
arr.reduce((acc, cur) => ({ ...acc, [alphabet[cur]]: cur }), {});
property accessor
arr.reduce((acc, cur) => { acc[alphabet[cur]] = cur; return acc; }, {});
property accessor 2
arr.reduce((acc, cur) => { return (acc[alphabet[cur]] = cur); }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
property accessor
property accessor 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0

Browser/OS: Firefox 124 on Mac OS X 10.15

View result in a separate tab

property accessor

10.3M/s

property accessor 2

1.7M/s

Object.assign

1.6M/s

spread operator

1.1M/s

View exact numbers

Test name	Executions per second
✓ property accessor	10,265,427 Ops/sec
property accessor 2	1,732,090 Ops/sec
Object.assign	1,610,539 Ops/sec
spread operator	1,097,153 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided JSON.

The benchmark compares three ways to populate an object with key-value pairs:

1.  **Object.assign()**: This method copies all enumerable own properties from one or more source objects to a destination object. It uses a shallow copy of the properties, meaning it only copies the values and not any nested objects.
2.  **Spread operator (Destructuring)**: This is a shorthand way to create a new object with the same keys as an existing object, but with different values. The syntax `({ ...obj })` creates a new object where each key in `obj` becomes a property of the new object with the value being the original value from `obj`.
3.  **Property accessor**: This method uses bracket notation (`[key]`) to access and set properties on an object.

Now, let's examine the pros and cons of each approach:

*   **Object.assign()**:
    *   Pros: Fast and straightforward, works well for shallow copies.
    *   Cons: Can be slower than other methods due to its overhead and may not perform as well with large datasets or nested objects. Also, if you try to use it on an object that doesn't have the property you're trying to assign, it will just leave it undefined instead of throwing an error.

*   **Spread operator (Destructuring)**:
    *   Pros: Fast and efficient, works well for shallow copies and is generally considered a good practice. It also provides better control over where properties are placed in the destination object.
    *   Cons: Can be slower than other methods due to its syntax complexity. Some older browsers may not support it.

*   **Property accessor**:
    *   Pros: Provides fine-grained control and can lead to more efficient code when done correctly.
    *   Cons: Requires explicit usage of bracket notation, which some people might find less readable or more error-prone than other methods.

Considering the test case using Lodash's `_.set()` function is not present. Instead, the properties are being directly set using bracket notation, this approach has similar pros and cons to property accessor.

In general, for simple use cases where you need to populate an object with a few key-value pairs, any of these methods can work well. However, if you're dealing with large datasets or nested objects, Object.assign() may not be the best choice due to its overhead and potential performance issues. The spread operator is often considered the most efficient and recommended way for shallow copies in modern JavaScript.

In this specific benchmark, it seems that Firefox 124 performs better for **Property accessor** than **Object.assign**, but worse than **spread operator**. However, these results may vary depending on the browser and hardware used to run the benchmark.

Object.assign vs spread operator vs property accessor 2 (version: 0) Benchmark.js

Comparing performance of: `Object.assign vs spread operator vs property accessor vs property accessor 2`

Created: 5 years ago by: Guest

Go to the latest result

Object.assign

spread operator

property accessor

property accessor 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.assign vs spread operator vs property accessor 2 (version: 0) Benchmark.js

Comparing performance of: Object.assign vs spread operator vs property accessor vs property accessor 2

Created: 5 years ago by: Guest

Go to the latest result

Object.assign

spread operator

property accessor

property accessor 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object.assign vs spread operator vs property accessor vs property accessor 2`