Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reduce Object.assign vs spread vs Map
(version: 0)
Comparing performance of:
Object.assign vs Map vs Spread
Created:
3 years ago
by:
Guest
Jump to the latest result
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()); Object.fromEntries(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:
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):
**Overview of the Benchmark** The provided benchmark measures the performance of three different approaches for assigning values to an object in JavaScript: 1. `Object.assign` 2. Spread operator (`...`) 3. `Map` data structure These approaches are compared on an array of 10 elements, where each element is assigned a unique ID. **Options Compared** The three options being compared are: * **Object.assign**: A method that assigns values to an object. * **Spread operator (Object spread)**: A syntax that creates a new object by spreading the properties of another object. * **Map data structure**: An object that stores key-value pairs, where keys are unique and values can be arbitrary. **Pros and Cons** 1. **Object.assign** * Pros: + Widely supported across browsers + Simple syntax * Cons: + Can be slow due to the need to create a new object and copy properties + May not perform well with large datasets 2. **Spread operator (Object spread)** * Pros: + Fast performance, as it only creates a shallow copy of the original object's properties + Simple syntax * Cons: + Not supported in older browsers + Limited control over property assignment (e.g., no ability to override existing properties) 3. **Map data structure** * Pros: + Fast performance, as it uses a hash table for efficient key-value lookups + Can handle large datasets with ease * Cons: + Less familiar syntax for JavaScript developers + May require additional setup and configuration **Library/Technology Used** None of the benchmarked options rely on external libraries or technologies. They are all built-in features of JavaScript. **Special JS Features/Syntax** The `Map` data structure is a relatively new feature in JavaScript, introduced in ECMAScript 2015 (ES6). It provides a more efficient and flexible way to store key-value pairs compared to traditional objects. **Alternative Approaches** Other approaches that could be considered for assigning values to an object include: * Using the `forEach` method with an arrow function * Using the `reduce` method with an initial value of `{}` and a callback function * Using a library like Lodash or Ramda, which provides utility functions for working with objects However, these alternatives may not be as optimized or efficient as the three options being compared in this benchmark. **Benchmark Preparation Code** The provided script preparation code creates an array of 10 elements using `Array.from(Array(10).keys())` and then applies each assignment method to the resulting array.
Related benchmarks:
object assign vs object spread on growing objects
Reduce Object.assign vs spread vs Map vs Function assignment
Object.assign() vs spread operator (New object)
Reduce vs Assign
Comments
Confirm delete:
Do you really want to delete benchmark?