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:
4 years ago
by:
Guest
Go 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:
7 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
<iframe src="https://measurethat.net/Embed?id=622783" width="100%" height="500px"></iframe>
Map
2.2M/s
Object.assign
1.0M/s
Spread
795K/s
View exact numbers
Test name
Executions per second
✓
Map
2,203,351 Ops/sec
Object.assign
1,038,035 Ops/sec
Spread
794,677 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 performance immutable
JavaScript spread operator vs Object.assign performance (Immutable)
Comments
Confirm delete:
Do you really want to delete benchmark?