Benchmark: JavaScript spread operator vs Object.assign vs for-in loop performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);
Using For-In loop
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} for (let key in firstObject) { finalObject[key] = firstObject[key]; } for (let key in secondObject) { finalObject[key] = secondObject[key]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using For-In loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Using For-In loop

60.5M/s

Using the spread operator

33.7M/s

Using Object.assign

26.1M/s

View exact numbers

Test name	Executions per second
✓ Using For-In loop	60,494,716 Ops/sec
Using the spread operator	33,732,880 Ops/sec
Using Object.assign	26,100,992 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Description**
The benchmark is designed to measure the performance of three different approaches for merging objects without mutating them:

1. **Spread Operator (`...`)**: This syntax allows you to create a new object with all the properties from an existing object.
2. **`Object.assign()`**: This method creates a new object and copies all properties from one or more source objects into it.
3. **For-In Loop**: This approach uses a traditional loop to iterate over the properties of an object and assign them to a new object.

**Options Comparison**

* The spread operator is likely to be the fastest because it's a modern JavaScript syntax that can take advantage of tree shaking, dead code elimination, and other optimization techniques.
* `Object.assign()` is often slower than the spread operator because it involves creating a new array of properties to be assigned, which can lead to additional overhead.
* The For-In Loop is likely to be the slowest because it's a traditional approach that requires explicit iteration over the object's properties.

**Pros and Cons**

* **Spread Operator**:
	+ Pros: Fast, modern syntax, and optimized by JavaScript engines.
	+ Cons: May not work in older browsers or environments without support for ES6+ features.
* **`Object.assign()`**:
	+ Pros: Widely supported across browsers and environments, simple to use.
	+ Cons: Can be slower due to the additional overhead of creating a new array of properties.
* **For-In Loop**:
	+ Pros: Well-supported across browsers and environments, easy to understand for developers familiar with traditional JavaScript.
	+ Cons: Slow due to the explicit iteration over properties.

**Library/Functionality**

None mentioned in the benchmark definition. However, `Object.assign()` is a built-in function in modern JavaScript engines.

**Special JS Feature/Syntax**
The spread operator (`...`) is an ES6+ feature that allows for more concise object merging. It's widely supported across modern browsers and environments.

**Alternatives**
Other approaches for merging objects without mutating them could include:

1. Using the `merge()` function from a library like Lodash.
2. Utilizing the `Object.fromEntries()` method (introduced in ES2020).
3. Implementing a custom merge function using recursion or iteration.

These alternatives might offer different performance characteristics, trade-offs between code readability and conciseness, or additional features like handling nested objects or arrays.

JavaScript spread operator vs Object.assign vs for-in loop performance (version: 0)

Measure the fastest way to merge objects, without mutation.

Comparing performance of: `Using the spread operator vs Using Object.assign vs Using For-In loop`

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Using For-In loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Object.assign vs for-in loop performance (version: 0)

Measure the fastest way to merge objects, without mutation.

Comparing performance of: Using the spread operator vs Using Object.assign vs Using For-In loop

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Using For-In loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Using the spread operator vs Using Object.assign vs Using For-In loop`