Benchmark: JavaScript spread operator vs Object.assign performance vs Multiple statementd

Tests:

Using the spread operator
let firstObject = { sampleData: 'Hello world' } const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' } firstObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' } Object.assign(firstObject, secondObject);
Multiple statements
const firstObject = { sampleData: 'Hello world' } const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' } firstObject.sampleData = secondObject.sampleData; firstObject.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
Multiple statements

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark tests three different approaches to merging two JavaScript objects:

**1. Using the Spread Operator (`...`)**: This approach utilizes the spread syntax introduced in ES6. It essentially expands the properties of both objects into a new object. 
   -  **Code Example:**
    ```javascript
    let firstObject = { sampleData: 'Hello world' };
    const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' };
    firstObject = { ...firstObject, ...secondObject };
    ```

- **Pros:** Concise and readable syntax. Often considered the most modern and intuitive approach.

- **Cons:** Can potentially have a higher memory footprint compared to `Object.assign` if dealing with very large objects due to the nature of creating new objects.

**2. Using `Object.assign()`**: This method, provided by JavaScript's built-in Object API, takes multiple objects as arguments and merges their properties into the first object (the target). 
   - **Code Example:**
    ```javascript
    const firstObject = { sampleData: 'Hello world' };
    const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' };
    Object.assign(firstObject, secondObject);
    ```

- **Pros:** Efficient for merging objects, especially when dealing with large ones as it modifies existing objects instead of creating new ones. Can also handle nested objects.

- **Cons:**  Slightly less concise syntax compared to the spread operator. Doesn't explicitly create a new object; modifies the first one in place.

**3. Multiple Statements**: This approach involves directly assigning properties from one object to another using separate statements.
   - **Code Example:**
    ```javascript
    const firstObject = { sampleData: 'Hello world' };
    const secondObject = { sampleData: 'Overwritten', moreData: 'foo bar' };
    firstObject.sampleData = secondObject.sampleData; 
    firstObject.moreData = secondObject.moreData; 
    ```

- **Pros:** Simple and straightforward for basic object merging.

- **Cons:**  Less efficient and readable than the spread operator or `Object.assign`, especially when merging multiple properties. Can lead to more code duplication.

**Other Alternatives**:

* **Immutability Libraries:** For advanced scenarios, libraries like Immer or Immutable.js offer powerful ways to manage object changes immutably, preventing accidental modifications of original data.

**Benchmark Considerations:**

-  **Browser Impact:** Performance can vary between browsers due to their JavaScript engines and optimizations.
-   **Object Size:** The impact of different merging techniques becomes more noticeable with larger objects.

Let me know if you have any more questions!

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Browser/OS: Firefox 91 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	2915309.0 Ops/sec
Using Object.assign	6891461.0 Ops/sec
Multiple statements	34334988.0 Ops/sec

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Multiple statements

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):