Benchmark: JavaScript spread operator vs Object.assign to new object

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);

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:

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 break down what's being tested on MeasureThat.net.

**Benchmark Definition:**
The benchmark is designed to compare two approaches for creating a new object by merging two existing objects:

1. Using the spread operator (`...` syntax)
2. Using `Object.assign()` with an empty object as the target (`Object.assign({}, firstObject, secondObject)`)

**Options compared:**

* **Spread Operator:** The spread operator allows you to create a new object by copying the properties of one or more objects and adding them to another object.
* **`Object.assign()`**: `Object.assign()` is a method that copies all enumerable own properties from one or more source objects to a target object.

**Pros and Cons:**

* **Spread Operator:**
	+ Pros:
		- More concise and expressive
		- Creates a new object without modifying the original objects
	+ Cons:
		- Can be slower than using `Object.assign()` for large objects
* **`Object.assign()`**:
	+ Pros:
		- Faster than the spread operator for large objects
	+ Cons:
		- Less concise and less expressive
		- Creates a new object by modifying the original object

**Library/Function:**
No specific library or function is used in this benchmark, only native JavaScript features.

**Special JS feature/Syntax:**
The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and allows for more concise object creation and merging.

**Other alternatives:**

* **`Object.create()`**: Instead of using `Object.assign()`, you could use `Object.create()` to create a new object and then assign properties to it.
* **Loop-based approach**: You could use a loop to iterate over the properties of one or more objects and assign them to a target object.

It's worth noting that in modern JavaScript, both approaches are widely used and supported. The spread operator is generally preferred for its conciseness and readability, while `Object.assign()` can be faster for large objects.

Related benchmarks:

JavaScript spread operator vs Object.assign to new object (version: 0)

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

Created: 5 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

No previous run results

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