Benchmark: JavaScript spread operator vs Object.assign performance vs Manual

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);
Manual assignment
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {}; finalObject.sampleData = firstObject.sampleData; finalObject.moreData = secondObject.moreData;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	35817540.0 Ops/sec
Using Object.assign	12371151.0 Ops/sec
Manual assignment	175725600.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Purpose**

The MeasureThat.net benchmark is designed to compare the performance of three approaches for merging objects in JavaScript: using the spread operator (`...`), `Object.assign()`, and manual assignment. The goal is to determine which approach provides the best performance on various devices and browsers.

**Options Compared**

1. **Using the Spread Operator**: This method uses the syntax `const finalObject = { ...firstObject, ...secondObject };`. It iterates over the properties of both objects and creates a new object with the merged data.
2. **Using Object.assign()**: This method uses the `Object.assign()` function to merge two or more objects into one. The syntax is `const finalObject = Object.assign(firstObject, secondObject);`.
3. **Manual Assignment**: This approach involves assigning individual properties of one object to another using dot notation, e.g., `finalObject.sampleData = firstObject.sampleData;`.

**Pros and Cons of Each Approach**

1. **Using the Spread Operator**:
	* Pros: Concise syntax, easy to read and write, and suitable for most use cases.
	* Cons: May be slower than `Object.assign()` or manual assignment due to property iteration.
2. **Using Object.assign()**:
	* Pros: Fast and efficient, as it uses a low-level function that avoids property iteration.
	* Cons: Syntax can look unfamiliar to some developers, and may require additional setup (e.g., polyfills).
3. **Manual Assignment**:
	* Pros: Simple and straightforward syntax, no additional dependencies required.
	* Cons: Can be error-prone if not done carefully, as each property must be assigned separately.

**Library Usage**

There is no explicit library usage mentioned in the benchmark code or test cases. However, it's worth noting that `Object.assign()` relies on the ECMAScript standard, which has been widely adopted across browsers and platforms.

**Special JavaScript Features/Syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES8) as a way to create new objects with merged data. It provides a concise and readable syntax for this use case.

**Other Alternatives**

If you're interested in alternative approaches, here are a few options:

* **JSON Merge Patch**: This is a lightweight library that allows merging two or more JSON objects in a single step.
* **Lodash's `merge()` function**: Lodash is a popular utility library that includes a `merge()` function for combining two or more objects into one.

Keep in mind that the performance differences between these approaches may vary depending on your specific use case, browser, and platform. The MeasureThat.net benchmark provides valuable insights into the relative performance of each approach across various devices and browsers.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs Manual (version: 0)

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

Created: 6 years ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Manual assignment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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