Benchmark: JavaScript spread operator vs Object.assign performance with big first and small second

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', more1: "more1", more2: "more1", more2: "more1", more3: "more1", more4: "more1", more5: "more1", more6: "more1", more7: "more1", more8: "more1", more10: "more1", more20: "more1", more20: "more1", more30: "more1", more40: "more1", more50: "more1", more60: "more1", more70: "more1", more80: "more1", more100: "more1", more200: "more1", more200: "more1", more300: "more1", more400: "more1", more500: "more1", more600: "more1", more700: "more1", more800: "more1" } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', more1: "more1", more2: "more1", more2: "more1", more3: "more1", more4: "more1", more5: "more1", more6: "more1", more7: "more1", more8: "more1", more10: "more1", more20: "more1", more20: "more1", more30: "more1", more40: "more1", more50: "more1", more60: "more1", more70: "more1", more80: "more1", more100: "more1", more200: "more1", more200: "more1", more300: "more1", more400: "more1", more500: "more1", more600: "more1", more700: "more1", more800: "more1" } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Using Object.assign opposite
const firstObject = { sampleData: 'Hello world', more1: "more1", more2: "more1", more2: "more1", more3: "more1", more4: "more1", more5: "more1", more6: "more1", more7: "more1", more8: "more1", more10: "more1", more20: "more1", more20: "more1", more30: "more1", more40: "more1", more50: "more1", more60: "more1", more70: "more1", more80: "more1", more100: "more1", more200: "more1", more200: "more1", more300: "more1", more400: "more1", more500: "more1", more600: "more1", more700: "more1", more800: "more1" } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(secondObject, firstObject);
Just assignment
const firstObject = { sampleData: 'Hello world', more1: "more1", more2: "more1", more2: "more1", more3: "more1", more4: "more1", more5: "more1", more6: "more1", more7: "more1", more8: "more1", more10: "more1", more20: "more1", more20: "more1", more30: "more1", more40: "more1", more50: "more1", more60: "more1", more70: "more1", more80: "more1", more100: "more1", more200: "more1", more200: "more1", more300: "more1", more400: "more1", more500: "more1", more600: "more1", more700: "more1", more800: "more1" } firstObject.moreData = '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
Using Object.assign opposite
Just assignment

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**Benchmark Overview**

The provided benchmark measures the performance of three approaches to merge two objects: using the spread operator (`...`), `Object.assign()`, and `Object.assign()` with the first object as the target.

**Approaches Compared**

1. **Using the Spread Operator (`...`)**: This approach uses the rest operator (`...`) to create a new object that includes all properties from both objects.
2. **Using `Object.assign()`**: This approach calls the `assign()` method on the first object, passing in the second object as an argument. The method returns the merged object.
3. **Using `Object.assign()` with the First Object as Target**: This is similar to the previous approach, but with the roles reversed: the first object is the target, and the second object is passed as the source.

**Pros and Cons of Each Approach**

1. **Using the Spread Operator (`...`)**:
	* Pros:
		+ More concise and expressive code
		+ Can be more readable when working with simple merge operations
	* Cons:
		+ May incur a performance overhead due to object creation
2. **Using `Object.assign()`**:
	* Pros:
		+ Generally faster than the spread operator approach
		+ Can be more efficient for large objects or complex merges
	* Cons:
		+ Less concise and less readable code compared to the spread operator
3. **Using `Object.assign()` with the First Object as Target**:
	* Pros:
		+ Similar performance characteristics to the original `Object.assign()` approach
	* Cons:
		+ Less intuitive code structure due to the reversed roles

**Library and Special JS Feature**

In this benchmark, no libraries or special JS features are used beyond what is built-in to JavaScript.

**Benchmark Results**

The latest results show that:

1. The "Just assignment" approach (i.e., directly assigning properties from one object to another) outperforms all other approaches.
2. `Object.assign()` and the spread operator approach have similar performance characteristics, but the former is generally faster.
3. The `Object.assign()` with the first object as target approach has similar performance to the original approach.

**Conclusion**

In conclusion, the choice of merge approach depends on personal preference, code readability, and performance considerations. While the spread operator approach can be more concise and expressive, it may incur a small performance overhead. The `Object.assign()` method is generally faster but less readable. The "Just assignment" approach might be the best choice for simple merges where performance is critical.

Keep in mind that these results are specific to the benchmark configuration and may not generalize to all use cases or environments.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Browser/OS: Firefox 90 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1510433.1 Ops/sec
Using Object.assign	8021904.0 Ops/sec
Using Object.assign opposite	1482542.2 Ops/sec
Just assignment	24469458.0 Ops/sec

Related benchmarks:

JavaScript spread operator vs Object.assign performance with big first and small second (version: 3)

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

Created: 5 years ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Using Object.assign opposite

Just assignment

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