Benchmark: JavaScript reduce assign vs spread vs forEach 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 });

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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:

1. **Array Reduction using Object Assign** (`Object.assign()`)
2. **Array Reduction using Object Spread** (`{ ...acc, [item.id]: item }`)
3. **Array Reduction using a ForEach loop** (not using any built-in array or object methods)

**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:

* Simple and straightforward
* Fast and efficient

Cons:

* Requires the use of `Object.assign()`, which can be slower than other approaches for large arrays.
* Can lead to unexpected behavior if not used carefully (e.g., if the accumulator is not an object).

**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:

* Fast and efficient
* Does not require the use of `Object.assign()`
* Easy to read and understand

Cons:
* May be slower than Option 1 for very large arrays (due to the creation of a new object).
* Can lead to unexpected behavior if not used carefully (e.g., if the accumulator is not an object).

**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:

* Simple and straightforward
* Does not require any built-in array or object methods

Cons:
* Can be slower than Options 1 and 2 (especially for large arrays)
* May lead to more errors due to manual indexing and looping.

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:

* Using `Array.prototype.reduce()` with a callback function: This is another built-in JavaScript method that can be used for array reduction.
* Using `lodash` library's `pick()` method: If you're using the Lodash library, you can use its `pick()` method to achieve similar results.
* Manual implementation without using any built-in methods: You could implement a custom solution using manual looping and indexing, but this would likely be slower and more error-prone.

I hope this explanation helps!

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	5622962.5 Ops/sec
Object Spread	1492232.8 Ops/sec
Object Assign Library	312941.9 Ops/sec
forEach comparison	5581600.0 Ops/sec

Related benchmarks:

JavaScript reduce assign vs spread vs forEach baseline (version: 0)

Comparing performance of: Object Assign vs Object Spread vs Object Assign Library vs forEach comparison

Created: 3 years ago by: Guest

Jump to the latest result

Object Assign

Object Spread

Object Assign Library

forEach comparison

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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