Benchmark: JavaScript spread operator vs Object.assign performance vs Adding to object one (size 5)

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData1: 'foo bar', moreData2: 'foo bar', moreData3: 'foo bar', moreData4: 'foo bar', moreData5: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData1: 'foo bar', moreData2: 'foo bar', moreData3: 'foo bar', moreData4: 'foo bar', moreData5: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Add to first
const firstObject = { sampleData: 'Hello world' } firstObject.moreData1 = 'foo bar' firstObject.moreData2 = 'foo bar' firstObject.moreData3 = 'foo bar' firstObject.moreData4 = 'foo bar' firstObject.moreData5 = 'foo bar'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Add to first

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	12562954.0 Ops/sec
Using Object.assign	14792226.0 Ops/sec
Add to first	184790864.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

This benchmark tests the performance of three different approaches to merging properties into an object in JavaScript. The focus is on a single scenario—a source object is merged with additional properties—and the methods being compared are:

1. **Spread Operator**
2. **Object.assign()**
3. **Direct Property Assignment**

### Methods Being Compared

1. **Using the Spread Operator**
   - **Code**: 
     ```javascript
     const finalObject = { ...firstObject, ...secondObject };
     ```
   - **Description**: The spread operator (`...`) allows for an elegant and concise way to merge properties from one object into another. It creates a new object that contains the properties of both `firstObject` and `secondObject`.

- **Pros**:
     - Easy-to-read syntax.
     - Returns a new object, helping avoid mutations of the original objects.
     - Supports merging of properties seamlessly.

- **Cons**:
     - Can be less performant for large objects due to the creation of a new object in memory.

2. **Using Object.assign()**
   - **Code**: 
     ```javascript
     const finalObject = Object.assign(firstObject, secondObject);
     ```
   - **Description**: The `Object.assign()` method copies all enumerable properties from one or more source objects (`secondObject`) to a target object (`firstObject`). This means that `firstObject` is mutated in this case.

- **Pros**:
     - Directly merges properties into an existing object, potentially saving memory since it does not require creating a new object.
     - Suitable for shallow merging of properties.

- **Cons**:
     - Mutates the target object, which can lead to unintended side effects if the original object is still in use elsewhere.
     - Can be less readable than the spread operator for some developers.

3. **Adding to the First Object Directly**
   - **Code**: 
     ```javascript
     firstObject.moreData1 = 'foo bar';
     firstObject.moreData2 = 'foo bar';
     firstObject.moreData3 = 'foo bar';
     firstObject.moreData4 = 'foo bar';
     firstObject.moreData5 = 'foo bar';
     ```
   - **Description**: This approach uses direct property assignment to add properties to `firstObject`.

- **Pros**:
     - Simple and straightforward for adding known properties.
     - Best performance due to minimal operation overhead.

- **Cons**:
     - Not scalable; requires explicit action for each property.
     - Less flexible for dynamic object structures or when combining multiple sources.

### Performance Results

The latest benchmark results indicate the following execution speed for each method:

1. **Add to First**: **184,790,864 executions per second**
2. **Using Object.assign**: **14,792,226 executions per second**
3. **Using the Spread Operator**: **12,562,954 executions per second**

### Conclusion

From the results, it’s clear that direct property assignment significantly outperforms the other two methods in terms of execution speed. However, it sacrifices flexibility and scalability for performance.

- **Alternatives Considerations**: 
  - For scenarios involving many properties or more complex object structures, developers may prefer the spread operator or `Object.assign()` for better readability, maintainability, and non-mutating behavior.
  - There are libraries (e.g., Lodash) that provide utility functions for deep merging and complex manipulations, which can enhance functionality at a possible performance cost.

### In Summary

When choosing a method for merging properties into objects, developers should consider the trade-offs between performance, readability, and code maintainability based on the specific requirements of their application.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs Adding to object one (size 5) (version: 1)

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

Created: 2 months ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Add to first

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):