Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=565515" width="100%" height="500px"></iframe>
reduce TOC
140K/s
for of
125K/s
reduce
111K/s
View exact numbers
Test name
Executions per second
✓
reduce TOC
140,017 Ops/sec
for of
124,577 Ops/sec
reduce
111,057 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
flatMap vs reduce using push
Comments
Confirm delete:
Do you really want to delete benchmark?