Benchmark: JavaScript spread operator vs Object.assign performance vs =

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);
Using =
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} finalObject.sampleData = firstObject.sampleData finalObject.moreData = firstObject.moreData

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using =

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches in various scenarios.

The provided benchmark definition and test cases measure the performance of three ways to combine objects:

1.  The spread operator (`...`)
2.  `Object.assign()`
3.  Direct assignment (`=`)

**Tested Options**

Each test case uses a different approach to combine two objects: `firstObject` and `secondObject`. Here's what's being tested in each case:

*   **Using the Spread Operator**: This method creates a new object with all properties from both `firstObject` and `secondObject`, using the spread operator (`...`). For example, `{ ...firstObject, ...secondObject }`.
*   **Using Object.assign()**: This method merges two objects into one, overriding any duplicate keys. The original objects are not modified.
*   **Direct Assignment**: This method assigns all properties from both `firstObject` and `secondObject` to a new object (`finalObject`). For example: `{ sampleData: firstObject.sampleData, moreData: secondObject.moreData }`.

**Pros and Cons of Each Approach**

1.  **Using the Spread Operator**
    *   Pros:
        *   Creates a new object with all properties from both objects.
        *   Preserves the original objects.
        *   Can be used in modern browsers.
    *   Cons:
        *   May incur overhead due to the creation of a new object.
2.  **Using Object.assign()**
    *   Pros:
        *   Fast and efficient, as it doesn't create a new object.
        *   Works well with large objects or when modifying the original objects is acceptable.
    *   Cons:
        *   Overwrites existing properties in the target object if they have duplicate keys.
        *   Requires careful handling to avoid unintended changes.
3.  **Direct Assignment**
    *   Pros:
        *   Fast and simple, as it only assigns values without creating new objects.
        *   Suitable for cases where you want to keep the original objects intact.
    *   Cons:
        *   Creates a new object, which can be wasteful if not necessary.

**Libraries and Features**

None of these test cases use any libraries or features that are specific to modern JavaScript.

**Special JS Feature/Syntax (Not Applicable)**

Since none of the test cases use special JavaScript features or syntax, there is nothing to describe in this regard.

**Alternatives**

If you're looking for alternative ways to combine objects, consider using:

1.  **Object spread operator (`{ ... }`)**: This method creates a new object with all properties from both objects.
2.  **Object.assign()**: This method merges two objects into one, overriding any duplicate keys.
3.  **lodash's `merge()` function**: This function provides a convenient way to merge multiple objects into one.

When choosing the best approach, consider factors such as:

*   Performance requirements
*   Object size and complexity
*   Desired behavior in case of duplicate keys or conflicting values

Latest run results:

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

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

Browser/OS: Chrome 74 on Mac OS X 10.14.1

View result in a separate tab

Test name	Executions per second
Using the spread operator	5208513.0 Ops/sec
Using Object.assign	3786855.0 Ops/sec
Using =	313967456.0 Ops/sec

Related benchmarks:

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

Comparing performance of: Using the spread operator vs Using Object.assign vs Using =

Created: 5 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using =

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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