Benchmark: Shallow Object Merge new

Tests:

Spread operator
const obj1 = { foo: 'pikachu' } const obj2 = { bar: 'charizard' } const result = { ...obj1, ...obj2 }
Object.assign with separate target
const obj1 = { foo: 'pikachu' } const obj2 = { bar: 'charizard' } const result = Object.assign({}, obj1, obj2)
Object.assign with first object as target
const obj1 = { foo: 'pikachu' } const obj2 = { bar: 'charizard' } const result = Object.assign(obj1, obj2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Object.assign with separate target
Object.assign with first object as target

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 Edg/94.0.992.50

Browser/OS: Chrome 94 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread operator	2103658.5 Ops/sec
Object.assign with separate target	5076683.0 Ops/sec
Object.assign with first object as target	5907778.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

On MeasureThat.net, the provided benchmark tests three different approaches for shallow object merge in JavaScript:

1.  **Spread Operator ( ... )**: This approach uses the spread operator to merge two objects into a new one.
2.  **Object.assign with separate target**: This approach uses the `Object.assign()` method with a separate target object to merge two objects into a new one.
3.  **Object.assign with first object as target**: This approach uses the `Object.assign()` method with the first object as the target, merging another object into it.

**Options comparison**

The three approaches have different pros and cons:

*   **Spread Operator ( ... )**: This approach is concise and efficient but may be slower than other methods due to the need for a new array of properties.
    *   Pros:
        *   Easy to read and write
        *   Efficient in modern browsers that support this method
    *   Cons:
        *   May not work in older browsers or environments that don't support spread operator
        *   Creates a new array of properties, which can be slower for large objects
*   **Object.assign with separate target**: This approach is similar to the spread operator but uses an object as the target.
    *   Pros:
        *   Fast and efficient in modern browsers
        *   Works in older browsers that don't support spread operator
    *   Cons:
        *   Requires using an extra object, which can be unnecessary for small objects
*   **Object.assign with first object as target**: This approach is similar to the previous one but merges into a single object.
    *   Pros:
        *   Fast and efficient in modern browsers
        *   Works in older browsers that don't support spread operator
    *   Cons:
        *   Merges into a single object, which can be confusing for complex objects

**Library usage**

None of the benchmark tests use any external libraries.

**Special JS feature or syntax**

The benchmark tests some special JavaScript features:

*   **Spread Operator ( ... )**: This is a modern JavaScript feature introduced in ECMAScript 2018. It allows merging objects by spreading their properties into a new object.
    *   Introduced in: ECMAScript 2018
    *   Supported by: Modern browsers and Node.js
*   **Object.assign() method**: This method was introduced in ECMAScript 5 (2009) as part of the ECMAScript standard. It allows merging objects into a target object.

**Other alternatives**

Other alternatives for shallow object merge include:

*   Using libraries like Lodash or Underscore.js
*   Using manual loops to iterate over properties and assign values
*   Using JSON merge libraries

However, these approaches are generally less efficient than using the spread operator or `Object.assign()` method, especially in modern browsers.

Related benchmarks:

Shallow Object Merge new (version: 0)

Comparing performance of: Spread operator vs Object.assign with separate target vs Object.assign with first object as target

Created: 3 years ago by: Guest

Jump to the latest result

Spread operator

Object.assign with separate target

Object.assign with first object as target

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