Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript reduce assign vs spread vs forEach vs for..of baseline
(version: 0)
Comparing performance of:
Object Assign vs Object Spread vs Object Assign Library vs forEach comparison vs for .. of
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
Object Assign
const data = [{id: 1, category: "frontend", title: "All About That Sass"}, {id: 2, category: "backend", title: "Beam me up, Scotty: Apache Beam tips"}, {id: 3, category: "frontend", title: "Sanitizing HTML: Going antibactirial on XSS attacks"}, {id: 4, category: "frontend", title: "Doing something Odd"}, {id: 5, category: "frontend", title: "How to rebuild the moon?"}]; const reduced = data.reduce((acc, item) => { acc[item.id] = item; return acc; }, {});
Object Spread
const data = [{id: 1, category: "frontend", title: "All About That Sass"}, {id: 2, category: "backend", title: "Beam me up, Scotty: Apache Beam tips"}, {id: 3, category: "frontend", title: "Sanitizing HTML: Going antibactirial on XSS attacks"}, {id: 4, category: "frontend", title: "Doing something Odd"}, {id: 5, category: "frontend", title: "How to rebuild the moon?"}]; const reduced = data.reduce((acc, item) => ({ ...acc, [item.id]: item }), {});
Object Assign Library
const data = [{id: 1, category: "frontend", title: "All About That Sass"}, {id: 2, category: "backend", title: "Beam me up, Scotty: Apache Beam tips"}, {id: 3, category: "frontend", title: "Sanitizing HTML: Going antibactirial on XSS attacks"}, {id: 4, category: "frontend", title: "Doing something Odd"}, {id: 5, category: "frontend", title: "How to rebuild the moon?"}]; const reduced = data.reduce((acc, item) => Object.assign(acc, {[item.id]: item}), {});
forEach comparison
const data = [{id: 1, category: "frontend", title: "All About That Sass"}, {id: 2, category: "backend", title: "Beam me up, Scotty: Apache Beam tips"}, {id: 3, category: "frontend", title: "Sanitizing HTML: Going antibactirial on XSS attacks"}, {id: 4, category: "frontend", title: "Doing something Odd"}, {id: 5, category: "frontend", title: "How to rebuild the moon?"}]; const reduced = {}; data.forEach((item) => { reduced[item.id] = item });
for .. of
const data = [{id: 1, category: "frontend", title: "All About That Sass"}, {id: 2, category: "backend", title: "Beam me up, Scotty: Apache Beam tips"}, {id: 3, category: "frontend", title: "Sanitizing HTML: Going antibactirial on XSS attacks"}, {id: 4, category: "frontend", title: "Doing something Odd"}, {id: 5, category: "frontend", title: "How to rebuild the moon?"}]; const reduced = {}; for (const item of data) { reduced[item.id] = item; };
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Object Assign
Object Spread
Object Assign Library
forEach comparison
for .. of
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 break down the provided benchmark and explain what is being tested. **Benchmark Overview** The benchmark is designed to compare the performance of different methods for creating an object from an array: 1. `Object Assign` (using `reduce`) 2. `Object Spread` (using `reduce` with spread operator) 3. `forEach comparison` 4. `for..of` These methods are used to create a new object where each key-value pair is taken from the input array. **Options Compared** Each option has its pros and cons: 1. **Object Assign**: This method creates an empty object, then iterates over the array and assigns each element as a property of the object using `acc[item.id] = item;`. The advantages are that it's simple and straightforward. However, it may have performance issues due to the repeated assignment. 2. **Object Spread**: Similar to Object Assign, but uses the spread operator (`{ ...acc, [item.id]: item }`) to create a new object. This method is more concise but also has potential performance issues due to the repeated property creation. 3. **forEach comparison**: In this option, an empty object is created, then each element of the array is iterated over using `forEach`, and assigned as a property of the object using `reduced[item.id] = item;`. This method is similar to Object Assign but uses `forEach` instead of `reduce`. 4. **for..of**: Similar to forEach comparison, but uses the `for...of` loop to iterate over the array. **Libraries Used** None of the options use a specific library beyond what is inherently part of JavaScript (e.g., built-in functions like `Object.assign`, `forEach`, or `reduce`). **Special JS Features/Syntax** No special features or syntax are used in any of the benchmark definitions. They are all standard JavaScript constructs. **Benchmark Preparation Code** The preparation code for each test case is similar: * A sample array `data` is created with some dummy data. * For each test case, a new object is initialized (either using `Object Assign`, Object Spread, forEach comparison, or for..of). * The benchmark definition specifies how the object should be created from the input array. **Alternatives** Other methods to create an object from an array could include: * Using `Array.prototype.reduce()` with a custom callback function. * Using a loop and manual property creation (e.g., `reduced = {}; for (const item of data) { reduced[item.id] = item; }`). * Using a library like Lodash, which provides a `mapObject` function that can be used to create an object from an array. Keep in mind that the performance differences between these methods may vary depending on the specific use case and environment.
Related benchmarks:
Object.assign vs spread operator without jquery
Object.assign vs spread operatora
object assign vs object spread on growing objects
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Comments
Confirm delete:
Do you really want to delete benchmark?