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; }, {});
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 }), {});
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}), {});
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 });
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; };
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Object Assign | |
Object Spread | |
Object Assign Library | |
forEach comparison | |
for .. of |
Test name | Executions per second |
---|---|
Object Assign | 5585424.0 Ops/sec |
Object Spread | 1496652.1 Ops/sec |
Object Assign Library | 309876.6 Ops/sec |
forEach comparison | 5485072.0 Ops/sec |
for .. of | 5360672.0 Ops/sec |
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:
Object Assign
(using reduce
)Object Spread
(using reduce
with spread operator)forEach comparison
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:
acc[item.id] = item;
. The advantages are that it's simple and straightforward. However, it may have performance issues due to the repeated assignment.{ ...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.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
.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:
data
is created with some dummy data.Object Assign
, Object Spread, forEach comparison, or for..of).Alternatives
Other methods to create an object from an array could include:
Array.prototype.reduce()
with a custom callback function.reduced = {}; for (const item of data) { reduced[item.id] = item; }
).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.