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 });
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Object Assign | |
Object Spread | |
Object Assign Library | |
forEach comparison |
Test name | Executions per second |
---|---|
Object Assign | 5622962.5 Ops/sec |
Object Spread | 1492232.8 Ops/sec |
Object Assign Library | 312941.9 Ops/sec |
forEach comparison | 5581600.0 Ops/sec |
Let's dive into the benchmark and explain what's being tested.
The benchmark is comparing three ways to reduce an array of objects to an object with only the desired properties:
Object.assign()
){ ...acc, [item.id]: item }
)Option 1: Array Reduction using Object Assign
This approach uses the Object.assign()
method to merge two objects. In this case, it's used to create a new object with the desired properties from the original array.
Pros:
Cons:
Object.assign()
, which can be slower than other approaches for large arrays.Option 2: Array Reduction using Object Spread
This approach uses the spread operator ({ ...acc, [item.id]: item }
) to create a new object with the desired properties from the original array.
Pros:
Object.assign()
Cons:
Option 3: Array Reduction using a ForEach loop
This approach uses a traditional for
loop and array indexing to iterate over the array and create a new object with the desired properties.
Pros:
Cons:
Now, let's talk about the libraries mentioned in the benchmark. There is none explicitly mentioned. However, Object.assign()
is a built-in JavaScript method that can be considered a library of sorts.
The special JS feature used here is not explicitly mentioned. The spread operator ({ ...acc, [item.id]: item }
) was introduced in ES6 (ECMAScript 2015) and has become a standard feature in modern JavaScript.
Finally, there are several alternatives to these approaches:
Array.prototype.reduce()
with a callback function: This is another built-in JavaScript method that can be used for array reduction.lodash
library's pick()
method: If you're using the Lodash library, you can use its pick()
method to achieve similar results.I hope this explanation helps!