Benchmark: JavaScript spread operator vs Object.assign performance 2123

Script Preparation code:

var firstObject = { sampleData: 'Hello world', sampleData2: 'Hello world', sampleData3: 'Hello world',sampleData4: 'Hello world' };
var secondObject = { moreData: 'foo bar',moreData2: 'foo bar',moreData3: 'foo bar',moreData4: 'foo bar' };

Tests:

Using the spread operator
const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const finalObject = Object.assign(firstObject, secondObject);
Empty object assign
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
Empty object assign

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**What's being tested?**

The benchmark is comparing the performance of three different approaches to merge two objects:

1. Using the spread operator (`...`)
2. Using `Object.assign()`
3. Using an empty object as the target for `Object.assign()` (i.e., `{}`)

**Options compared:**

* **Using the spread operator (`...`)**: This approach creates a new object by spreading the properties of two objects into it.
* **Using `Object.assign()`**: This method merges one or more source objects into a target object, updating the target with the new properties.
* **Empty object assign (`{}`)**: This variation uses an empty object as the initial value for `Object.assign()`, effectively overwriting its properties with those from the other object.

**Pros and Cons of each approach:**

* **Using the spread operator (`...`)**:
	+ Pros: concise, efficient, and readable.
	+ Cons: may not be compatible with older browsers or JavaScript versions that don't support the spread syntax.
* **Using `Object.assign()`**:
	+ Pros: widely supported, well-established method for merging objects.
	+ Cons: can lead to unexpected behavior if not used carefully (e.g., overwriting existing properties).
* **Empty object assign (`{}`)**:
	+ Pros: efficient and concise, as it avoids creating a new object.
	+ Cons: may be less readable than other approaches, especially for developers unfamiliar with this variation.

**Library/Functionality used:**

In the provided benchmark definition, `Object.assign()` is used to merge the two objects. This method is native to JavaScript and has been widely adopted in web development.

**Special JS feature/syntax:**

The spread operator (`...`) is a relatively new syntax introduced in ECMAScript 2018 (ES7) and later versions. It allows for concise object merging, but its support may vary across older browsers or environments.

In summary, this benchmark compares three approaches to merge two objects: using the spread operator, `Object.assign()`, and an empty object as the target for `Object.assign()`. The pros and cons of each approach highlight their respective strengths and weaknesses, while also considering compatibility and readability.

Latest run results:

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

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

Browser/OS: Chrome 95 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	312106.8 Ops/sec
Using Object.assign	2090198.1 Ops/sec
Empty object assign	1289994.2 Ops/sec

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Empty object assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):