Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
JavaScript Object.assign() vs object spread operator
(version: 0)
Benchmark.js
Comparing performance of:
Using the spread operator vs Using Object.assign
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Using the spread operator
const evt = { name: 'Test Object', amount: 1234 } const obj1 = { ...evt, section: 'zxcv', subsection: '123' } const obj2 = { ...evt, section: 'asdf', subsection: 'qwer' }
Using Object.assign
const evt = { name: 'Test Object', amount: 1234 } const obj1 = Object.assign({}, evt, { section: 'zxcv', subsection: '123' }) const obj2 = Object.assign({}, evt, { section: 'asdf', subsection: 'qwer' })
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=607842" width="100%" height="500px"></iframe>
Using the spread operator
45.5M/s
Using Object.assign
9.4M/s
View exact numbers
Test name
Executions per second
✓
Using the spread operator
45,529,972 Ops/sec
Using Object.assign
9,403,204 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Purpose:** The benchmark compares the performance of two approaches to create an object by spreading another object: 1. **Object Spread Operator (ES6+):** `const obj = { ...evt, section: 'zxcv', subsection: '123' }` 2. **`Object.assign()` method:** `const obj = Object.assign({}, evt, { section: 'zxcv', subsection: '123' })` The benchmark aims to measure which approach is faster and more efficient. **Options Compared:** * **Object Spread Operator (ES6+):** uses the spread operator (`...`) to create a new object by copying the properties of `evt` and adding additional properties. * **`Object.assign()` method:** uses the `Object.assign()` method to merge two or more objects into a new object. **Pros and Cons:** * **Object Spread Operator (ES6+):** + Pros: - More concise and expressive syntax. - Faster execution, as it avoids the overhead of function calls. + Cons: - May not work in older browsers that don't support ES6+ features. - Can be slower due to the way JavaScript engines optimize the spread operator. * **`Object.assign()` method:** + Pros: - Works in all modern browsers, including older versions. - Can be faster due to the optimization of function calls by some JavaScript engines. + Cons: - More verbose syntax, which can make it less readable. **Library/Function Used:** None specific. Both approaches use built-in JavaScript features or functions. **Special JS Feature/Syntax:** The benchmark uses ES6+ features (spread operator) and the `Object.assign()` method, which is a part of the ECMAScript standard. No special syntax is required for these tests. **Other Alternatives:** * **`Object.create()` method:** Another way to create an object by setting its prototype. * **`Array.prototype.slice()` or `Array.prototype.copy()` methods:** Not typically used for creating objects, but could be used in some cases where a shallow copy of an array is needed. In general, the benchmark provides a good representation of the trade-offs between conciseness and performance in JavaScript object creation.
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?