Benchmark: flatten reduce vs for .. of vs reduce TCO

Tests:

reduce
const flatten = (arr) => arr.reduce((acc, x) => { Array.isArray(x) ? flatten(x).forEach(y => acc.push(y)) : acc.push(x) return acc; }, []) const x = flatten([ [1,2,3], [ [4,5,6], [7,8,9], [[[[[10,11,12]]], [13,14,15]]] ], [[[[[[[[[[[16,17,18]]]]]]]]]]] ]);
for of
const flat = (argarr) => { let arr = [] for (const item of argarr) { if (Array.isArray(item)) arr = arr.concat(flat(item)) else arr.push(item) } return arr } const x = flat([ [1,2,3], [ [4,5,6], [7,8,9], [[[[[10,11,12]]], [13,14,15]]] ], [[[[[[[[[[[16,17,18]]]]]]]]]]] ]);
reduce TOC
const flatten = (arr, acc = []) => { arr.forEach(x => { if (Array.isArray(x)) { flatten(x, acc); } else { acc.push(x); } }); return acc; }; const x = flatten([ [1,2,3], [ [4,5,6], [7,8,9], [[[[[10,11,12]]], [13,14,15]]] ], [[[[[[[[[[[16,17,18]]]]]]]]]]] ]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
for of
reduce TOC

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Linux

View result in a separate tab

Test name	Executions per second
reduce	111056.8 Ops/sec
for of	124577.1 Ops/sec
reduce TOC	140016.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks can be a complex task, but I'll break it down in a way that's easy to understand.

**Benchmark Purpose**

The provided benchmark measures the execution time of three different approaches for flattening an array with nested arrays. The goal is to determine which approach is the most efficient in terms of performance (measured in executions per second).

**Approaches Compared**

1. **Reduce**: This approach uses the built-in `Array.prototype.reduce()` method to flatten the array. It iterates over each element, checks if it's an array, and recursively calls itself with the inner array.
2. **For-of loop**: This approach uses a traditional for-of loop to iterate over each element in the array. If an element is an array, it recursively calls itself with the inner array.
3. **Reduce (Tail Call Optimization, TCO)**: This approach is similar to the Reduce method but uses tail call optimization to avoid stack overflow issues.

**Pros and Cons**

1. **Reduce**: Pros:
	* Built-in method, so no additional setup required.
	* Easy to understand and implement.
Cons:
	* May incur higher overhead due to the built-in method's internal implementation.
2. **For-of loop**: Pros:
	* Can be more efficient than Reduce since it doesn't involve a built-in method call.
	* Allows for more control over the iteration process.
Cons:
	* Requires manual looping and recursive calls, which can lead to more code complexity.
3. **Reduce (TCO)**: Pros:
	* Optimized for performance by avoiding stack overflow issues.
	* Still uses a familiar reduce-based approach.

**Library and Special JavaScript Features**

In this benchmark, the `Array.prototype.reduce()` method is used in all approaches. This is a built-in JavaScript method that reduces an array to a single value.

The For-of loop approach does not use any special JavaScript features beyond the standard for-of loop syntax.

**Other Considerations**

When measuring performance, it's essential to consider factors like:

* Cache performance: How well does each approach utilize the CPU cache?
* Branch prediction: Does each approach have predictable branch execution, which can impact performance?
* Garbage collection: How does each approach handle garbage collection overhead?

**Alternatives**

Other approaches for flattening arrays include:

1. **Array.prototype.flat()` method (ES2019+): This method uses a similar reduce-based approach but with improved performance and features.
2. **Custom recursive function**: Writing a custom recursive function to flatten the array can be an alternative, but it's often less efficient than using built-in methods like `reduce()` or `flat()`.
3. **Iterating over the array indices directly**: This approach involves iterating over the array indices directly rather than using a loop or recursion. It can be more efficient for small arrays but may not scale well.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case, hardware, and JavaScript engine used.

Related benchmarks:

flatten reduce vs for .. of vs reduce TCO (version: 0)

Comparing performance of: reduce vs for of vs reduce TOC

Created: 2 years ago by: Guest

Jump to the latest result

reduce

for of

reduce TOC

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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