Benchmark: reduce with object spread vs foreach with adding vs reduce without spread

Tests:

Using reduce and the spread operator
const styles = { foo: { color: 'red', }, bar: { color: 'green', '&:focus': { color: 'blue', }, }, foo2: { color: 'red', }, bar2: { color: 'green', '&:focus': { color: 'blue', }, }, foo3: { color: 'red', }, bar3: { color: 'green', '&:focus': { color: 'blue', }, }, foo4: { color: 'red', }, bar4: { color: 'green', '&:focus': { color: 'blue', }, }, }; Object .keys(styles) .reduce((classes, selector) => ({ ...classes, [selector]: selector, }), {});
Using map and adding to an object
const styles = { foo: { color: 'red', }, bar: { color: 'green', '&:focus': { color: 'blue', }, }, foo2: { color: 'red', }, bar2: { color: 'green', '&:focus': { color: 'blue', }, }, foo3: { color: 'red', }, bar3: { color: 'green', '&:focus': { color: 'blue', }, }, foo4: { color: 'red', }, bar4: { color: 'green', '&:focus': { color: 'blue', }, }, }; const obj = {}; Object .keys(styles) .forEach(style => { obj[style] = style; })
Using reduce without spread operator
const styles = { foo: { color: 'red', }, bar: { color: 'green', '&:focus': { color: 'blue', }, }, foo2: { color: 'red', }, bar2: { color: 'green', '&:focus': { color: 'blue', }, }, foo3: { color: 'red', }, bar3: { color: 'green', '&:focus': { color: 'blue', }, }, foo4: { color: 'red', }, bar4: { color: 'green', '&:focus': { color: 'blue', }, }, }; Object .keys(styles) .reduce((classes, selector) => { classes[selector] = selector; return classes; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using reduce and the spread operator
Using map and adding to an object
Using reduce without spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Using reduce and the spread operator	608651.8 Ops/sec
Using map and adding to an object	6041884.0 Ops/sec
Using reduce without spread operator	6312028.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll provide an in-depth explanation of the benchmark.

**Benchmark Overview**

The benchmark compares three approaches for iterating over object keys: using `reduce` with the spread operator, using `forEach` with adding to an object, and using `reduce` without the spread operator. The test case is designed to measure the performance difference between these approaches on a specific JavaScript object structure.

**Options Compared**

1. **Using `reduce` with the spread operator (`Object.keys().reduce()` + `{ ...classes }`)**
	* Pros:
		+ Efficiently creates a new object by spreading the existing object's properties.
		+ Allows for concise and expressive code.
	* Cons:
		+ May incur additional overhead due to the spread operation.
2. **Using `forEach` with adding to an object (`Object.keys().forEach()` + `{ obj[style] = style }`)**
	* Pros:
		+ Simpler and more intuitive syntax.
		+ Avoids potential performance impact of the spread operator.
	* Cons:
		+ Requires explicit looping, which can be less readable in some cases.
3. **Using `reduce` without the spread operator (`Object.keys().reduce()` + `{ classes[selector] = selector }`)**
	* Pros:
		+ Simplifies code by avoiding the need for the spread operator.
	* Cons:
		+ May result in a slower performance due to the unnecessary property assignments.

**Library and Special Features**

None of the options explicitly use any external libraries. However, it's worth noting that `Object.keys()` is a built-in method in modern JavaScript.

**Test Case Considerations**

The test case uses an object with multiple properties (e.g., `foo`, `bar`, `foo2`, etc.) to ensure that the iteration and property assignment are repeated multiple times. This helps mitigate any potential caching or optimization effects that might occur during benchmarking.

**Other Alternatives**

For similar scenarios, alternative approaches could include:

1. Using `for...in` loops instead of `forEach`.
2. Utilizing array methods like `map()` or `filter()`.
3. Leveraging functional programming techniques with `reduce()` and arrow functions.
4. Employing lazy evaluation or memoization to optimize the iteration process.

However, these alternatives may not directly address the specific performance trade-offs between `reduce` with the spread operator, `forEach` with adding to an object, and `reduce` without the spread operator.

**Benchmark Result Interpretation**

The latest benchmark results show that:

1. **Using `reduce` with the spread operator** yields the highest number of executions per second (391026).
2. **Using `forEach` with adding to an object** comes in second with approximately 1568087 executions per second.
3. **Using `reduce` without the spread operator** is the slowest, with around 390026 executions per second.

These results suggest that using `reduce` with the spread operator is likely the most efficient approach in this scenario. However, the actual performance difference may vary depending on specific use cases and optimization strategies.

Related benchmarks:

reduce with object spread vs foreach with adding vs reduce without spread (version: 0)

Comparing performance of: Using reduce and the spread operator vs Using map and adding to an object vs Using reduce without spread operator

Created: 7 years ago by: Guest

Jump to the latest result

Using reduce and the spread operator

Using map and adding to an object

Using reduce without spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):