Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object.assign vs normal set
(version: 0)
Comparing performance of:
Object.assign vs Normal set
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
Object.assign
Object.assign( document.createElement('a'), { innerText: 'Apply Now', href: 'https://example.com', className: 'link', target: '_blank', rel: 'noopener noreferrer' } )
Normal set
const link = document.createElement('a'); link.innerText = 'Apply Now'; link.href = 'https://example.com'; link.className = 'link'; link.target = '_blank'; link.rel = 'noopener noreferrer';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Object.assign
Normal set
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=497959" width="100%" height="500px"></iframe>
Normal set
351K/s
Object.assign
264K/s
View exact numbers
Test name
Executions per second
✓
Normal set
350,749 Ops/sec
Object.assign
264,201 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, compared, and the pros/cons of each approach. **Benchmark Purpose:** The primary purpose of this benchmark is to compare the performance difference between two approaches for setting properties on an HTML element: 1. **Object.assign**: This method creates a new object and copies all the specified properties from the source object into the new object. 2. **Normal set**: This involves setting each property individually using dot notation or bracket notation (e.g., `link.innerText = 'Apply Now';`). **Options Comparison:** The benchmark compares the performance of these two approaches: 1. **Object.assign**: * Pros: + More concise and expressive way to set multiple properties. + Can be more efficient when dealing with large datasets, as it avoids unnecessary method calls. * Cons: + May incur a small overhead due to the creation of a new object. 2. **Normal set**: * Pros: + Directly sets individual properties without creating an intermediate object. + Can be more readable and maintainable for simple cases. * Cons: + Requires multiple method calls, which can lead to overhead. **Other Considerations:** * The benchmark uses `document.createElement('a')` as the target element, which ensures that only an anchor element is created and modified. * Both approaches assume that the resulting HTML element will be rendered on a web page. **Library Usage:** There are no external libraries used in this benchmark. **Special JS Features/Syntax:** None of the provided test cases use any special JavaScript features or syntax. They are straightforward, vanilla JavaScript examples. **Benchmark Preparation Code:** The `Script Preparation Code` is empty, which means that the benchmark assumes that an HTML document is already present and can be used directly. **Alternative Approaches:** * Other methods for setting properties on an object, such as using `Array.prototype.forEach()` or `Object.assign()` with a custom object (e.g., `{ ... } = {}`), are not tested in this benchmark. * Using a library like Lodash or Underscore.js, which provides utility functions for working with objects and arrays, is also not part of this benchmark. In summary, the benchmark compares two approaches for setting properties on an HTML element: using `Object.assign()` versus normal dot notation or bracket notation. The results can help developers understand the performance implications of choosing one approach over the other in their codebase.
Related benchmarks
Object.assign vs mutation assign
Object.assign() vs Reflect.set()
Comments
Confirm delete:
Do you really want to delete benchmark?