Benchmark: JavaScript spread operator vs Object.assign performance L12

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 10; Mobile; rv:81.0) Gecko/81.0 Firefox/81.0

Browser/OS: Firefox Mobile 81 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	2987527.8 Ops/sec
Using Object.assign	2712594.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases.

**Benchmark Definition**

The benchmark is designed to compare the performance of two methods for merging objects in JavaScript: the spread operator (`...`) and `Object.assign()`. The script preparation code is empty, which means that no special setup or initialization is required. The HTML preparation code is also empty, suggesting that there are no external dependencies or DOM-related operations.

**Individual Test Cases**

There are two test cases:

1. **Using the spread operator**: This test case defines two objects, `firstObject` and `secondObject`, with some sample data. It then uses the spread operator (`...`) to merge these objects into a new object called `finalObject`. The goal is to measure the performance of this specific use case.
2. **Using Object.assign**: This test case is similar to the previous one, but it uses `Object.assign()` to merge the two objects instead of the spread operator.

**Comparison**

The benchmark is comparing the execution time of both methods for merging objects. The difference in performance could be due to various factors, such as:

*   **Code simplicity**: The spread operator is often considered more concise and easier to read than `Object.assign()`.
*   **Browser support**: Both methods have been around since older versions of JavaScript, but their performance might vary depending on the browser.
*   **Cache behavior**: Different browsers may handle cache differently for this particular benchmark.

**Pros and Cons**

*   **Using the spread operator:**
    *   Pros:
        +   More concise code
        +   Easier to read
        *   Potential for better cache performance
    *   Cons:
        +   Less control over merge order (due to object literal syntax)
*   **Object.assign():**
    *   Pros:
        +   More explicit and flexible way to merge objects
        *   Better support for edge cases and custom merge strategies
    *   Cons:
        +   Longer code

**Library Usage**

There is no library usage in this benchmark definition. Both methods are part of the standard JavaScript library.

**Special JS Features or Syntax**

*   There is no special JS feature or syntax used in this benchmark.
*   If you were to add any, consider using modern features like async/await for better control over execution time, and let the user specify how many runs should be performed.

Related benchmarks:

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

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

Created: 4 years ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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