Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reduce Object.assign vs spread vs Map vs Function assignment
(version: 0)
Comparing performance of:
Spread vs Object.assign vs Map vs Map with Object.fromEntries vs Function with assignment
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
Spread
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => ({ ...memo, [`id-${val}`]: val }), {});
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())
Map with Object.fromEntries
const items = Array.from(Array(10).keys()); Object.fromEntries(items.reduce((memo, val) => memo.set(`id-${val}`, val), new Map()));
Function with assignment
const items = Array.from(Array(10).keys()); items.reduce((memo, val) => { memo[`id-${val}`] = val; return memo }, {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Spread
Object.assign
Map
Map with Object.fromEntries
Function with assignment
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):
I'm ready to break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark measures the performance of four different approaches for object assignment: 1. Spread (`Spread`) 2. `Object.assign` (`Object.assign`) 3. Map (`Map`) 4. Map with `Object.fromEntries` (`Map with Object.fromEntries`) 5. Function with assignment (`Function with assignment`) **Options Compared** The benchmark compares the performance of these five approaches for object assignment, specifically when creating an object with 10 properties and assigning values to each property. **Pros and Cons of Each Approach:** 1. **Spread**: Using the spread operator (`...`) creates a new object by copying the source object's properties. This approach is concise but may not be as efficient as other methods since it creates a new object unnecessarily. 2. **Object.assign**: Assigning properties to an existing object using `Object.assign` is more efficient than creating a new object, as it only updates the target object without creating a copy. However, it requires more code and can be slower for very large objects due to the method invocation overhead. 3. **Map**: Using a Map to store the object's properties and then converting it to an object using `Object.fromEntries` is a creative approach that avoids creating a new object. This method is likely to be faster than `Object.assign`, but may incur additional overhead due to the use of a Map. 4. **Map with Object.fromEntries**: This approach is similar to the previous one, but uses `Object.fromEntries` to convert the Map to an object directly. While it avoids the need for an intermediate conversion, it may be slower than using a Map and then converting it to an object due to the additional overhead of `Object.fromEntries`. 5. **Function with assignment**: Assigning properties to an existing object using a function is a common pattern that can be faster than other methods since it avoids creating a new object or using method invocations. However, this approach requires more code and may not be as concise as others. **Library Usage** * `Object.assign`: Part of the ECMAScript standard, `Object.assign` is a built-in function that assigns properties from one or more source objects to an existing target object. * `Object.fromEntries`: Introduced in ECMAScript 2015 (ES6), `Object.fromEntries` is a static method that converts an iterable (like a Map) to an object. **Special JS Features/Syntax** None mentioned, but note that the benchmark uses modern JavaScript features like Array.from, template literals (`[...]`), and the spread operator (`...`). **Other Alternatives** Some alternative approaches for object assignment might include: * Using a library like Lodash or Underscore.js, which provide various functions for object manipulation. * Creating an object using an array of key-value pairs and then iterating over it to assign properties. However, these alternatives may not be as efficient or concise as the methods being compared in the benchmark.
Related benchmarks:
Reduce Object.assign vs spread vs Map
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Reduce vs Assign
Comments
Confirm delete:
Do you really want to delete benchmark?