Benchmark: Object.assign vs SPREAD

Script Preparation code:

var foo = {};
for (var i=0;i<100;i++) {
    foo['foo'+i] = i;
    foo['foobar'+i] = i;
}

var bar = {};
for (var i=0;i<100;i++) {
    bar['bar'+i] = i;
    bar['foobar'+i] = i;
}

Tests:

Object assign
console.log(Object.assign({}, foo, bar));
SPREAD
console.log({...foo, ...bar});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object assign
SPREAD

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of this JavaScript microbenchmark.

**Benchmark Purpose:**
The benchmark compares the performance of two ways to merge objects in JavaScript: using `Object.assign()` and using the spread operator (`...`).

**Options Compared:**

1. **Object.assign()**: This method takes multiple sources of values and returns a new object containing all key-value pairs from each source.
2. **Spread Operator (`...`)**: This syntax allows you to merge objects by spreading their key-value pairs onto a target object.

**Pros and Cons:**

* **Object.assign():**
	+ Pros:
		- Widely supported across browsers.
		- Can handle more complex merge scenarios, such as merging arrays or functions.
	+ Cons:
		- Less readable than the spread operator.
		- Can be slower due to the need to create a new object and iterate over each source.
* **Spread Operator (`...`):**
	+ Pros:
		- More concise and readable than `Object.assign()`.
		- Typically faster since it only requires creating a shallow copy of the target object.
	+ Cons:
		- Not supported in older browsers (e.g., Internet Explorer).
		- Can lead to errors if not used correctly.

**Library Used:**
None

**Special JS Feature/Syntax:**
The benchmark uses the spread operator (`...`), which is a relatively modern feature introduced in ECMAScript 2018. It's widely supported across modern browsers, but might not work in older or non-standard environments.

**Other Considerations:**

* The benchmark creates large objects (`foo` and `bar`) with 100 properties each to simulate a realistic scenario.
* Both test cases log the merged result to the console using `console.log()`, which can impact performance due to the overhead of logging messages.

**Alternatives:**
For those interested in exploring alternative methods, here are some options:

1. **`Object.create()`**: This method creates a new object with the given prototype and copies properties from another object.
2. **`Array.prototype.reduce()`**: You can use `reduce()` to merge objects by iterating over their key-value pairs and accumulating the results in an accumulator object.

Keep in mind that these alternatives might have different performance characteristics or readability issues, depending on your specific use case.

Related benchmarks:

Object.assign vs SPREAD (version: 0)

Comparing performance of: Object assign vs SPREAD

Created: 8 years ago by: Guest

Jump to the latest result

Object assign

SPREAD

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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