Benchmark: JavaScript spread operator vs Object.assign performance with 1000 props

Script Preparation code:

const firstObject = {};
const secondObject = {};

for (let i = 0; i < 1000; i++) {
  firstObject[i] = i;
  secondObject[i + 500] = i;
}

window.firstObject = firstObject;
window.secondObject = secondObject;

Tests:

Using the spread operator
const finalObject = { ...window.firstObject, ...window.secondObject };
Using Object.assign
const finalObject = Object.assign({}, window.firstObject, window.secondObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	16292.9 Ops/sec
Using Object.assign	16134.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark compares two approaches for merging objects in JavaScript:

1. **Spread operator (`...`)**: This syntax was introduced in ECMAScript 2018 (ES2018) as a way to expand an object literal into multiple arguments.
2. **Object.assign()**: A built-in method that copies the values of one or more source objects to another target object.

**Pros and Cons**

**Spread Operator**

Pros:

* More concise and expressive code
* Can be used to create new objects with merged properties in a single line
* Allows for easier handling of nested objects

Cons:

* May not work as expected if the properties are accessed using bracket notation (e.g., `obj['prop']` instead of `obj.prop`)
* May lead to unexpected behavior when dealing with certain types of values, such as null or undefined

**Object.assign()**

Pros:

* Well-established and widely supported method
* Can handle any type of object, including null and undefined
* Allows for easy iteration over the source objects using the for...in loop

Cons:

* Requires multiple lines of code to achieve the same result as the spread operator
* Can be less readable and more verbose than the spread operator

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Readability and maintainability: If you need to write a lot of merge logic, the spread operator might be a better choice due to its concise syntax.
* Performance: Object.assign() is generally faster and more efficient than using the spread operator, especially when dealing with large objects or complex merges.

**Library Usage**

In this benchmark, both test cases use built-in JavaScript methods (Object.assign() for one case, and the spread operator for another). There are no external libraries involved in these tests.

**Special JS Features**

There are a few special features in these tests:

* The `...` operator is used to expand an object literal into multiple arguments. This syntax relies on ECMAScript 2018 (ES2018) support.
* Object.assign() and the spread operator both take advantage of JavaScript's dynamic typing, which allows for flexible handling of various data types.

**Alternatives**

Other methods you might consider when merging objects include:

* Using the `Object.keys()` method to iterate over properties and manually merge them
* Implementing a custom merge function using recursion or iteration
* Utilizing third-party libraries like Lodash (specifically, its `merge` function)

However, for most use cases, the built-in Object.assign() method is a reliable and efficient choice.

Related benchmarks:

JavaScript spread operator vs Object.assign performance with 1000 props (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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