Benchmark: JavaScript Object spread operator vs manual assignment

Tests:

Using spread syntax
const input = { data1: '1', data2: '2', data3: '3', data4: '4' } const output = { ...input }; output.data5 = '5'
Using manual assignment
const input = { data1: '1', data2: '2', data3: '3', data4: '4' } const output = { data1: input.data1, data2: input.data2, data3: input.data3, data4: input.data4, }; output.data5 = '5'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using spread syntax
Using manual assignment

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:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Using spread syntax	12964134.0 Ops/sec
Using manual assignment	80488016.0 Ops/sec

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 the JavaScript microbenchmark provided by MeasureThat.net.

**Benchmark Purpose:**
The benchmark is designed to compare two approaches for creating a new object in JavaScript:

1. Using the spread operator (`...`).
2. Manually assigning properties using dot notation (e.g., `output.data1 = input.data1;`).

**Options Compared:**

* **Spread Operator:** Creates a new object by copying all own enumerable properties from an existing object (`input`) into a new object (`output`). The spread operator is a concise way to create a new object with the same properties as another object.
* **Manual Assignment:** Manually assigns each property of `input` to corresponding properties in `output`. This approach requires explicitly specifying each property.

**Pros and Cons:**

* **Spread Operator (Spread Syntax):**
	+ Pros:
		- Concise and readable code
		- Easy to maintain and modify object properties
		- Reduces the chance of errors due to manual property assignment
	+ Cons:
		- May be slower due to the overhead of creating a new object
* **Manual Assignment:**
	+ Pros:
		- Can potentially be faster since it doesn't create a new object
		- Allows for more control over the object's properties (e.g., using `Object.assign()`)
	+ Cons:
		- More verbose code, making it less readable and maintainable
		- Higher chance of errors due to manual property assignment

**Library Usage:**
None mentioned in this benchmark.

**Special JS Features/Syntax:**
The spread operator is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for concise object creation and has become a widely accepted syntax in the industry. MeasureThat.net likely chose to test this feature to provide insight into its performance compared to traditional manual assignment methods.

**Other Alternatives:**
In addition to the spread operator and manual assignment, other alternatives for creating new objects in JavaScript include:

* `Object.assign()`: Assigns values from one or more source objects to a target object.
* `JSON.parse()`/`JSON.stringify()`: Converts JSON data to/from an object.
* Using object literal syntax (e.g., `{ prop1: val1, prop2: val2 }`) with object property shorthand notation (e.g., `x: y`) for more concise object creation.

These alternatives are not specifically compared in this benchmark.

Related benchmarks:

JavaScript Object spread operator vs manual assignment (version: 0)

Comparing performance of: Using spread syntax vs Using manual assignment

Created: 3 years ago by: Guest

Jump to the latest result

Using spread syntax

Using manual assignment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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