Benchmark: JavaScript spread operator vs Object.assign performance without overwriting original 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:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 12; M2102J20SG) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.5481.192 Mobile Safari/537.36 OPR/74.1.3922.71199

Browser/OS: Opera Mobile 74 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	1693637.2 Ops/sec
Using Object.assign	3662824.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Definition**

The benchmark is testing the performance difference between two approaches for merging objects:

1. Using the JavaScript spread operator (`...`).
2. Using the `Object.assign()` method.

The goal is to determine which approach is faster without overwriting the original object.

**Options Compared**

We have two options being compared:

a) Using the JavaScript spread operator (`...`)
b) Using `Object.assign()`

**Pros and Cons of Each Approach:**

1. **Using the JavaScript Spread Operator (`...`)**:
	* Pros:
		+ More concise and readable code.
		+ Does not require any additional library or function calls.
		+ Allows for easier debugging, as the original objects are preserved.
	* Cons:
		+ May be slower than `Object.assign()` due to potential overhead of parsing the spread expression.
2. **Using `Object.assign()```**:
	* Pros:
		+ Fast and efficient, as it uses a native function call that is optimized by JavaScript engines.
		+ Does not require any additional memory allocation or parsing.
	* Cons:
		+ Requires an extra library or function call (`Object`), which may increase overhead.
		+ Can be less readable, especially for those unfamiliar with the spread operator.

**Library and Its Purpose**

In this benchmark, `Object.assign()` is a built-in JavaScript method that merges two or more objects into a new object. It returns a new object containing all the enumerable own properties of the source objects.

The JavaScript spread operator (`...`) was introduced in ECMAScript 2015 (ES6) as a shorthand for creating a new object with the elements of an existing object.

**Special JS Feature or Syntax**

This benchmark uses the JavaScript spread operator, which is a relatively recent addition to the language. The syntax `const finalObject = { ...firstObject, ...secondObject };` allows for concise creation of a new object by spreading the properties of two existing objects into it.

**Other Alternatives**

For merging objects, other alternatives might include:

* Using libraries like Lodash (`_.merge()` or `_assign()`) that provide more options and flexibility.
* Using `Array.prototype.reduce()` to concatenate objects.
* Using template literals with the spread operator (`{ ...firstObject, ...secondObject }`).

However, for this specific benchmark, we are only comparing two approaches: using the JavaScript spread operator and using `Object.assign()`.

Related benchmarks:

JavaScript spread operator vs Object.assign performance without overwriting original object (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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