Benchmark: flatten reduce vs for .. of

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) => { const arr = [] for (item of argarr) { if (Array.isArray(item)) arr.push(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]]]]]]]]]]] ]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 123 on Android

View result in a separate tab

Test name	Executions per second
reduce	27005.2 Ops/sec
for of	12202.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The benchmark is designed to compare two approaches for flattening an array of arrays: using `Array.prototype.reduce()` and using a simple `for...of` loop.

**Flatten function (reduce)**

The `flatten` function uses `Array.prototype.reduce()` to recursively flatten the input array. Here's what happens:

1. The initial accumulator value is an empty array (`[]`).
2. For each element in the input array:
	* If the element is also an array, it calls itself recursively with the inner array as argument.
	* It pushes the result of the recursive call to the accumulator array.
3. When all elements have been processed, it returns the flattened accumulator array.

**Flatten function (for...of)**

The `flat` function uses a simple `for...of` loop to flatten the input array:

1. Initialize an empty array (`arr`) to store the result.
2. Iterate over each element in the input array using `for (item of argarr)`.
3. If the current element is also an array, recursively call itself with that inner array as argument and push the result to `arr`.
4. Otherwise, simply push the original element to `arr`.
5. Return the flattened `arr`.

**Comparison**

The benchmark compares the performance of these two approaches:

* **`reduce()`**: The `flatten` function using `Array.prototype.reduce()`.
* **`for...of` loop**: The `flat` function using a simple `for...of` loop.

**Pros and Cons**

Here are some pros and cons for each approach:

* **`reduce()`**:
	+ Pros:
		- Concise and elegant implementation.
		- Can be used with other array methods (e.g., `map()`, `filter()`).
	+ Cons:
		- May have higher overhead due to the use of a built-in method.
		- Less intuitive for those without prior experience with functional programming concepts.
* **`for...of` loop**:
	+ Pros:
		- Easy to understand and implement, even for those without prior experience with JavaScript.
		- No additional dependencies or overhead compared to the `reduce()` approach.
	+ Cons:
		- May be less efficient due to the use of a manual loop.

**Library**

Neither of these functions uses any external libraries. They are simple implementations using only built-in JavaScript features.

**Special JS feature/syntax**

There is no special JavaScript feature or syntax used in this benchmark. It relies solely on standard JavaScript concepts and language features.

**Alternatives**

If you're looking for alternatives to the `reduce()` and `for...of` loop approaches, here are some options:

* **Lodash's `flattenDeep()`**: A popular utility library that provides a more efficient and concise implementation of array flattening.
* **Array.prototype.flat()**: Introduced in ECMAScript 2019 (ES2020), this method provides a simpler and more readable way to flatten arrays.

Keep in mind that the choice of approach ultimately depends on your specific use case, personal preference, and familiarity with JavaScript.

Related benchmarks:

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

Comparing performance of: reduce vs for of

Created: 2 years ago by: Guest

Jump to the latest result

reduce

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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