Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object copy vs spread
(version: 0)
Comparing performance of:
Copy forEach vs Spread vs Copy ignoring nulls
Created:
2 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
window.defaults = { autoComplete: null, // WARN: without null impossible to use with form.autoComplete: possible to change is user options will be empty/not cloned by default autoFocus: false, clearActions: 0, focusDebounceMs: 100, validateDebounceMs: 500, validationCase: 123, validationRules: { required: (v, setV) => setV === true && this.$isEmpty(v) && "This field is required", }, validations: null, validationShowAll: false, disabled: false, readOnly: false, label: null, name: null, storage: "local", skey: null, };
Tests:
Copy forEach
let opts = {}; Object.keys(defaults).forEach(k=>{ opts[k] = defaults[k] })
Spread
let opts = {...defaults}
Copy ignoring nulls
let opts = {}; Object.keys(defaults).forEach(k=>{ const def = defaults[k]; if (def != null) { opts[k] = def; } })
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Copy forEach
Spread
Copy ignoring nulls
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of what is being tested in this benchmark. The test case measures the performance difference between three approaches to create an object from another object: 1. **Object copy using `forEach`**: This approach iterates over the keys of the original object (`defaults`) and creates a new object (`opts`) by assigning each key-value pair from `defaults` to `opts`. The `forEach` method is used for this iteration. 2. **Spread operator ( Spread)**: This approach uses the spread operator (`...`) to create a new object that copies all the key-value pairs from `defaults`. 3. **Copy ignoring nulls**: This approach iterates over the keys of `defaults`, creates a new object, and only assigns values if they are not null or undefined. **Options Comparison** These three approaches are compared in terms of performance, which is measured as "ExecutionsPerSecond". The test aims to determine which method is faster for creating an object from another object. **Pros and Cons** 1. **Object copy using `forEach`**: This approach has a potential performance advantage if the original object is large and has many keys, because it uses iteration instead of the spread operator, which can be slower for very large objects. 2. **Spread operator (Spread)**: This approach is generally faster and more concise than the first method, especially for small to medium-sized objects. However, its performance might degrade for very large objects due to the overhead of creating a new array and then spreading it into an object. 3. **Copy ignoring nulls**: This approach has some overhead due to the conditional assignment (`if (def != null) { ... }`) but may still be faster than using `forEach` if the original object has many null values. **Library** None of these methods rely on a specific library, but they do utilize built-in JavaScript features like `Object.keys()`, `forEach()`, and spread operator (`...`). The use of `defaults` and `opts` suggests that the benchmark is designed to test performance variations in object creation rather than relying on any external dependencies. **Special JS Feature or Syntax** The `forEach()` method, spread operator (`...`), and conditional assignment (`if (def != null) { ... }`) are all standard JavaScript features. However, some older browsers might not support these features or have slightly different behavior, which could potentially affect benchmark results. **Alternatives** Other methods to create an object from another object include: * Using the `Object.assign()` method * Utilizing libraries like Lodash (`_` function) * Implementing a custom copy function using recursion or iteration Keep in mind that these alternatives might not be as concise or efficient as the three methods tested here and may require additional dependencies or setup.
Related benchmarks:
Lodash deep clone vs Spread Clone
Lodash cloneDeep VS spread operator vs angular.copy
Lodash cloneDeep VS spread operator v4.17.21
Fair Lodash deep clone vs Spread Clone
Comments
Confirm delete:
Do you really want to delete benchmark?