Benchmark: JavaScript spread operator vs Object.fromentries 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 a1 = Object.entries(firstObject) const a2 = Object.entries(secondObject) const finalObject = Object.fromEntries(a1.concat(a2));

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Using the spread operator

23.2M/s

Using Object.assign

1.6M/s

Fastest: Using the spread operator (14.3x faster)

View exact numbers

✓ Using the spread operator: 23,190,372 ops/sec
• Using Object.assign: 1,616,238 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

Using the spread operator

8.3M/s

Using Object.assign

3.8M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	8,279,573 Ops/sec
Using Object.assign	3,783,220 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 the provided JSON.

**Benchmark Definition**

The benchmark compares two approaches to merge two objects:

1. **Spread operator (`...`)**: This syntax allows you to expand an object into new key-value pairs, merging them with existing ones. In this case, `const finalObject = {...firstObject, ...secondObject}` will create a new object with all keys from both `firstObject` and `secondObject`.
2. **`Object.assign()` method**: This method takes multiple source objects as arguments and merges their key-value pairs into a target object.

**Options being compared**

The benchmark compares the performance of these two approaches for merging two objects:

* Using the spread operator (`...`)
* Using the `Object.assign()` method

**Pros and Cons**

* **Spread Operator (`...`)**:
	+ Pros: concise, readable syntax; easy to understand; no need to specify the target object's properties.
	+ Cons: may be slower than other methods due to its overhead for iterating over objects; might not work as expected if one of the source objects has a large number of properties or deeply nested ones.
* **`Object.assign()` method**:
	+ Pros: well-established, widely supported method; can handle large numbers of properties and deeply nested objects efficiently.
	+ Cons: requires specifying the target object's properties explicitly (e.g., `const finalObject = Object.assign({}, firstObject, secondObject)`); syntax might be less readable for some developers.

**Library/Utility**

In this benchmark, there is no explicit library or utility mentioned. However, it's worth noting that `Object.entries()` is a built-in method in JavaScript that returns an array of key-value pairs from an object.

**Special JS feature/Syntax**

There is no special JavaScript feature or syntax being tested here, as both approaches use standard JavaScript syntax.

**Other alternatives**

If the benchmark were to test other methods for merging objects, some alternative approaches might include:

* Using `JSON.parse(JSON.stringify())` (although this method can be slower and less efficient than other options).
* Using a library like Lodash's `merge()` function.
* Using a custom implementation of object merging (e.g., recursive function).

Keep in mind that the performance differences between these methods are likely to be relatively small, especially for most use cases. The choice of method often depends on readability, maintainability, and specific requirements of the project.

JavaScript spread operator vs Object.fromentries performance (version: 0) Benchmark.js

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

Created: 3 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

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.fromentries performance (version: 0) Benchmark.js

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

Created: 3 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

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`