Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
JavaScript Object spread operator vs manual assignment
(version: 0)
Benchmark.js
Comparing performance of:
Using spread syntax vs Using manual assignment
Created:
3 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=603027" width="100%" height="500px"></iframe>
Using manual assignment
80.5M/s
Using spread syntax
13.0M/s
View exact numbers
Test name
Executions per second
✓
Using manual assignment
80,488,016 Ops/sec
Using spread syntax
12,964,134 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
Spread vs Object.assign (modify ) vs Object.assign (new)
object spread vs Object.assign
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Comments
Confirm delete:
Do you really want to delete benchmark?