Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reduce Object.assign vs spread
(version: 0)
Comparing performance of:
Object.assign vs Map vs Spread
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
const items = Array.from(Array(10).keys());
Tests:
Object.assign
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => Object.assign(memo, { [`id-${val}`]: val }), {});
Map
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => memo.set(`id-${val}`, val), new Map());
Spread
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => ({ ...memo, [`id-${val}`]: val }), {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Object.assign
Map
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Browser/OS:
Chrome 143 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Object.assign
1038034.9 Ops/sec
Map
2203351.0 Ops/sec
Spread
794676.9 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to compare three different approaches for merging objects in JavaScript: `Object.assign`, `Map`, and spread syntax (`{ ... }`). **What is being compared?** In each test case, a dataset of 10 objects with unique IDs is created using `Array.from(Array(10).keys())`. The objects are then merged into a single object using the different approaches. The benchmark measures the execution time for each approach. **Options Compared:** 1. **Object.assign**: A method that merges properties from multiple sources into an existing object. 2. **Map**: A built-in JavaScript data structure used to store key-value pairs. In this benchmark, it's used as a mapping function to merge objects. 3. **Spread syntax (`{ ... }`)**: An alternative way to merge objects using the spread operator. **Pros and Cons of Each Approach:** 1. **Object.assign**: * Pros: Widely supported, easy to use, and efficient in most cases. * Cons: Can be slow for large datasets due to its method call overhead. 2. **Map**: * Pros: Fast lookup and insertion times, suitable for large datasets. * Cons: Requires extra memory allocation, and the mapping function needs to handle key collisions. 3. **Spread syntax (`{ ... }`)**: * Pros: Concise and easy to read, can be faster than `Object.assign` in some cases. * Cons: May not work as expected when dealing with complex object structures or large datasets. **Library Used:** None explicitly mentioned in the benchmark definition. However, `Map` is a built-in JavaScript data structure that's used here. **Special JS Feature/Syntax:** None explicitly mentioned in the benchmark definition. **Other Considerations:** * The benchmark uses Chrome 103 as the target browser and Windows as the operating system. * The dataset size is fixed at 10 objects, which might not be representative of real-world scenarios. * The benchmark doesn't account for potential performance differences due to JavaScript engine optimizations or caching. **Alternatives:** If you're interested in exploring alternative approaches, here are a few options: 1. **Lodash**: A popular utility library that provides a `merge` function, which can be used as an alternative to `Object.assign`. 2. **Promise-based merging**: You could use Promises to merge objects asynchronously, which might be more suitable for large datasets or real-time applications. 3. **Native Web Workers**: You could offload object merging tasks to separate threads using Web Workers, which could potentially improve performance in multi-core environments. Keep in mind that these alternatives may require additional setup and might not provide a direct comparison to the original benchmark.
Related benchmarks:
JavaScript spread operator vs Object.assign (to empty object) performance
JavaScript spread operator vs Object.assign (immutable) performance
JavaScript spread operator vs Object.assign performance immutable
JavaScript spread operator vs Object.assign performance (Immutable)
JavaScript spread operator vs Object.assign performance (create new objects)
Comments
Confirm delete:
Do you really want to delete benchmark?