Benchmark: JavaScript reduce assign vs spread vs forEach vs for..of baseline

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>

Previous results

Test case name	Result
Object Assign
Object Spread
Object Assign Library
forEach comparison
for .. of

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

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.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Browser/OS: Chrome 94 on Windows

View result in a separate tab

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

Related benchmarks:

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: 3 years ago by: Guest

Jump to the latest result

Object Assign

Object Spread

Object Assign Library

forEach comparison

for .. of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):