Benchmark: for of vs flatmap vs reduce 2

Script Preparation code:

var data = [];
for (let i = 0; i < 100; i++) {
    const items = [];
    for (let j = 0; j < 100; j++) {
        const innerItems = [];

        for (let k = 0; k < 100; k++) {
            innerItems.push({
                value: k
            });
        }
        items.push({
            innerItems
        });
    }
    data.push({
        items
    });
}

Tests:

flatMap
const result2 = data .flatMap((outer) => outer.items) .flatMap((inner) => inner.innerItems) .flatMap((innerInner) => innerInner.value);
for of
const result3 = []; for (const outer of data) { for (const inner of outer.items) { for (const innerInner of inner.innerItems) { result3.push(innerInner.value); } } }
reduce
const result = data.reduce((acc, outer) => { return outer.items.reduce((accInner, inner) => { return inner.innerItems.reduce((accInnerInner, innerInner) => { accInnerInner.push(innerInner.value); return accInnerInner; }, accInner); }, acc); }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
for of
reduce

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/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	20.1 Ops/sec
for of	73.8 Ops/sec
reduce	76.7 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 provided benchmark and explain what is being tested, the options being compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to measure the performance of three different methods for flattening arrays: `flatMap`, `for` loop with iteration over nested arrays, and `reduce`. The test creates a nested array structure with 100 inner items, each containing another array with 100 inner items, and then pushes the values into an outer array.

**Options being compared**

1. **`flatMap()`**: This method returns a new array with the same number of elements as the original array, but with each element being the result of applying a provided function to each element in the original array.
2. **`for` loop with iteration over nested arrays**: This approach uses a `for` loop to iterate over the outer array, and then another `for` loop to iterate over the inner array, pushing the values into an accumulator array.
3. **`reduce()`**: This method applies a provided function to each element in the array, reducing it to a single value.

**Pros and Cons**

1. **`flatMap()`**:
	* Pros: Concise, expressive, and easy to read.
	* Cons: May not be as efficient for large arrays due to the creation of a new array.
2. **`for` loop with iteration over nested arrays**:
	* Pros: Can be more efficient than `flatMap()` for very large arrays, since it avoids creating a new array.
	* Cons: More verbose and harder to read than `flatMap()`.
3. **`reduce()`**:
	* Pros: Can be more efficient than `flatMap()` for very large arrays, since it avoids creating a new array and uses a single accumulator value.
	* Cons: May be less readable and more complex than `flatMap()`.

**Other considerations**

* The test data is created using nested loops, which can make the output harder to analyze. Consider adding more structure or using a library to simplify the creation of nested arrays.
* The benchmark only measures performance, not code readability or maintainability. Consider adding additional metrics, such as memory usage or cache hits.

**Library usage**

None of the libraries are explicitly mentioned in the test case. However, it's worth noting that `flatMap()` is a built-in method in modern JavaScript, and `reduce()` is also a standard method.

**Special JS features or syntax**

The only notable feature used here is the use of arrow functions (`=>`) to define small anonymous functions. This is a common feature in modern JavaScript and makes code more concise and readable.

Related benchmarks:

for of vs flatmap vs reduce 2 (version: 0)

Comparing performance of: flatMap vs for of vs reduce

Created: one year ago by: Guest

Jump to the latest result

flatMap

for of

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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