Benchmark: JavaScript spread operator vs Object.assign vs Manual property assign performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Manual property assignment
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { sampleData: firstObject.sampleData, moreData: secondObject.moreData, }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Manual property assignment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 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
Using the spread operator	23074996.0 Ops/sec
Using Object.assign	6883718.0 Ops/sec
Manual property assignment	131224920.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of three approaches for merging objects in JavaScript: using the spread operator (`...`), `Object.assign()`, and manual property assignment.

**Test Cases**

Each test case consists of a benchmark definition, which describes the scenario:

1.  **Using the spread operator**: This approach uses the spread operator (`...`) to merge two objects, `firstObject` and `secondObject`. The resulting merged object is assigned to `finalObject`.
    *   Example code: `const finalObject = { ...firstObject, ...secondObject };`
2.  **Using Object.assign()**: This approach uses the `Object.assign()` method to merge two objects, `firstObject` and `secondObject`. The resulting merged object is assigned to `finalObject`.
    *   Example code: `const finalObject = Object.assign(firstObject, secondObject);`
3.  **Manual property assignment**: This approach manually assigns properties from `firstObject` and `secondObject` to the keys in `finalObject`, rather than using a spread operator or `Object.assign()`.
    *   Example code: `const finalObject = { sampleData: firstObject.sampleData, moreData: secondObject.moreData };`

**Options Compared**

The benchmark compares the performance of these three approaches:

*   **Spread operator (`...`)**: A relatively modern JavaScript feature that allows you to merge objects by spreading their properties onto another object.
*   **`Object.assign()`**: A widely supported method for merging objects, which has been a part of the JavaScript language since its inception.

**Pros and Cons**

Here's a brief overview of each approach:

### Spread Operator (`...`)

Pros:

*   Readable and concise syntax
*   Efficient use of memory (no intermediate object creation)
*   Can be used with functions (e.g., `Object.assign({}, ...)`)

Cons:

*   Not supported in older browsers or environments (e.g., Internet Explorer 11)
*   May not work as expected with some types of objects (e.g., arrays, dates)

### Object.assign()

Pros:

*   Wide browser support
*   Can be used with any type of object
*   Supports merging arrays and dates

Cons:

*   Less readable syntax compared to the spread operator
*   Requires an intermediate object creation (which can be inefficient for large objects)
*   Not as concise as the spread operator

### Manual Property Assignment

Pros:

*   Highly optimized for performance
*   Suitable for all browsers and environments

Cons:

*   Unreadable and verbose syntax
*   Can lead to bugs if not used carefully (e.g., missing property keys, unexpected type conversions)

**Library Usage**

In the provided benchmark code, there are no libraries explicitly mentioned. However, some JavaScript features might be implicitly relying on underlying library implementations (e.g., `Object.assign()`). Nevertheless, these tests should run independently without requiring any external dependencies.

**Special JS Features or Syntax**

This benchmark does not specifically test special JS features like ES6 modules, async/await, or Promises. It focuses solely on the performance comparison of three object merging approaches.

I hope this explanation helps software engineers understand the purpose and mechanics behind MeasureThat.net's JavaScript microbenchmark!

Related benchmarks:

JavaScript spread operator vs Object.assign vs Manual property assign performance (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Manual property assignment

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

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