Benchmark: Object.assign vs spread operator vs $.extend

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Object.assign
var params = { b:"hello", c: true, d:7 }; var other = Object.assign({ a: 2 }, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var other = { a: 2, ...params };
jQuery extend
var params = { b:"hello", c: true, d:7 }; var other = $.extend({ a: 2 }, params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
jQuery extend

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test compares three different methods for merging objects:

1.  **`Object.assign()`**: This method takes two or more source objects and merges them into a new object.

2.  **Spread Operator (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object, as well as adding new properties.

3.  **jQuery `.extend()` method** (`.extend()` is part of jQuery library): This method merges two or more source objects into a single target object.

*   **Library:** jQuery
    *   **Purpose:** jQuery's `.extend()` method allows you to merge multiple source objects into one target object, allowing for more flexibility in code organization and easier maintenance of large applications.
*   **Pros**:
    *   jQuery's `.extend()` method provides a higher level of abstraction than the native `Object.assign()` and spread operator methods. This can lead to cleaner and more readable code.

*   It is often used with objects that have nested properties, as it can handle these cases without requiring explicit looping or recursion.
*   **Cons**:
    *   jQuery's `.extend()` method requires a separate library (jQuery) to be included in the project. This can increase the overall size of your application.

*   The overhead of including jQuery might cause performance issues if used for simple applications.
*   **Spread Operator (`...`)**:
    *   Pros:
        *   Native JavaScript support means no extra libraries are required.
        *   Fast execution, as it's implemented in native code.
        *   Easy to read and write, especially when dealing with objects that contain nested properties.

*   Cons:
        *   Does not handle objects with non-enumerable properties (i.e., the `for...in` loop would still work).
*   **Native `Object.assign()`**:
    *   Pros:
        *   Fast execution and native code support make it suitable for performance-critical applications.
        *   Does not require any extra libraries.

*   Cons:
        *   Less readable than the spread operator, as it requires explicit looping or recursion to handle nested properties.
        *   Not all browsers have native support; Internet Explorer did not support `Object.assign()` until version 15.

**Other Alternatives:**

*   **Lodash's `merge` function**: This is a popular utility library that provides various methods for merging objects. While it has its own set of drawbacks, such as requiring an extra library and potentially increased complexity in the application code.

*   Pros:
        *   Provides more options (methods) for customizing merge operations.
        *   Useful if you need advanced merge features like handling circular references or specific data types.

*   Cons:
        *   Extra dependency that adds to your project size.
*   **Lo-Dash's `merge` function**: Another popular utility library offering a set of methods for merging objects, including more specialized options.

*   Pros:
        *   Extensive support for custom merge operations and data types (like Date).
        *   Can be useful in certain scenarios like merging nested JSON or objects with different structure.
*   **Native JavaScript `Object.keys()`** and **`reduce()`**: While more verbose than the other methods, using native JavaScript methods can offer performance advantages when dealing with large datasets.

*   Pros:
        *   Performance benefits due to native code execution.
        *   Can handle nested properties without extra looping or recursion.

*   Cons:
        *   More complex and difficult to read for simple merge operations.
*   **Custom Implementation**: Writing your own custom merge function can offer high performance, flexibility, and readability. However, it also means more development time and potential complexity.

*   Pros:
        *   High degree of customization available (performance, structure, etc.).
        *   Flexibility to use specific data types or handling options.
    *   Cons:
        *   Requires significant development effort upfront.
        *   May be harder for other developers to understand or maintain in the future.

When choosing a method, consider factors such as:

*   Performance requirements
*   Code readability and maintainability
*   Additional libraries required (e.g., jQuery)
*   Browser support

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 OPR/113.0.0.0

Browser/OS: Opera 113 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	11645912.0 Ops/sec
spread operator	28109744.0 Ops/sec
jQuery extend	8413562.0 Ops/sec

Related benchmarks:

Object.assign vs spread operator vs $.extend (version: 0)

Comparing performance of: Object.assign vs spread operator vs jQuery extend

Created: 4 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

jQuery extend

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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