Benchmark: JavaScript spread operator vs Object.assign performance vs a custom merge object method

Script Preparation code:

var firstObject = {
    sampleData: 'Hello world'
}
var secondObject = {
    moreData: 'foo bar'
}
var merge = (def, opt) => {
    if (!opt) return def
    for (const key in def) {
        if (!Object.prototype.hasOwnProperty.call(opt, key) || opt[key] === undefined)
            opt[key] = def[key]
        else if (opt[key] === Object(opt[key]))
            opt[key] = merge(def[key], opt[key])
    }
    return opt
}

Tests:

Using the spread operator
const finalObject = { ...firstObject, ...secondObject }
Using Object.assign
const finalObject = Object.assign(firstObject, secondObject)
Using custom merge method (Create a clone object)
const finalObject = merge(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
Using custom merge method (Create a clone object)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	8640652.0 Ops/sec
Using Object.assign	5470456.0 Ops/sec
Using custom merge method (Create a clone object)	1495925.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The benchmark compares the performance of three different methods to merge two objects: the spread operator, `Object.assign`, and a custom merge method.

**Options Compared**

1. **Spread Operator**: Uses the syntax `const finalObject = { ...firstObject, ...secondObject }` to create a new object with merged properties.
2. **Object.assign**: Utilizes the `Object.assign()` method to merge two objects: `const finalObject = Object.assign(firstObject, secondObject)`.
3. **Custom Merge Method**: Implements a custom merge function (`merge`) that recursively merges two objects.

**Pros and Cons**

1. **Spread Operator**:
	* Pros: Simple, concise syntax; does not require additional libraries.
	* Cons: May not be optimized for performance in certain situations (e.g., large object sizes).
2. **Object.assign**:
	* Pros: Widely supported and well-documented; can handle large objects efficiently.
	* Cons: Requires the `Object` global object, which might not be available in some environments.
3. **Custom Merge Method**:
	* Pros: Can provide more control over the merging process; potentially optimized for performance.
	* Cons: More complex syntax and implementation required.

**Library/Functions Used**

1. None explicitly mentioned in this benchmark. However, `Object.assign()` is a built-in function.

**Special JS Features/Syntax**

None explicitly used in this benchmark.

**Benchmark Preparation Code Explanation**

The script preparation code defines three objects (`firstObject` and `secondObject`) with some sample data, followed by the custom merge method implementation:
```javascript
var firstObject = {
  sampleData: 'Hello world'
};

var secondObject = {
  moreData: 'foo bar'
};

var merge = (def, opt) => {
  // ... (custom merge function implementation)
};
```
**Individual Test Cases**

Each test case defines a different benchmark by using the corresponding method to merge `firstObject` and `secondObject`. The resulting final object is stored in a variable named `finalObject`.

1. **Using the spread operator**: `const finalObject = { ...firstObject, ...secondObject }`
2. **Using Object.assign**: `const finalObject = Object.assign(firstObject, secondObject)`
3. **Using custom merge method (Create a clone object)**: `const finalObject = merge(firstObject, secondObject)`

**Latest Benchmark Result Explanation**

The benchmark results show the performance metrics for each test case on a Chrome 121 desktop running Linux:

1. **Using the spread operator**: 8640652 executions per second
2. **Using Object.assign**: 5470456 executions per second
3. **Using custom merge method (Create a clone object)**: 1495925 executions per second

The results suggest that the spread operator is the fastest method, followed by `Object.assign`, and then the custom merge method.

**Other Alternatives**

1. **Lodash.merge()**: A popular utility library that provides a robust merging function.
2. **Array.prototype.reduce()**: Can be used to implement a custom merge function.
3. **Recursive merge functions**: Other approaches, like using `JSON.parse()` and `JSON.stringify()` to serialize the objects before merging them, might also be considered as alternatives.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs a custom merge object method (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Using custom merge method (Create a clone object)

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using custom merge method (Create a clone object)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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