Benchmark: for..of vs for vs flatMap

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

 var arr = [];
 var size = 1000;
 var size_n = 100;
 for (let i = 0; i < size; i++) {
     const innerData = [];
     for (let j = 0; j < 2; j++) { // Still 2 sub-arrays per data
         const subArray = [];
         for (let k = 0; k < size_n; k++) {
             subArray.push(i * size_n + j * size_n + k); // Unique values
         }
         innerData.push(subArray);
     }
     arr.push({
         data: innerData
     });
 }

Tests:

for
var result = []; for (let i = 0; i < arr.length; i++) { const data = arr[i].data; for (let j = 0; j < data.length; j++) { const subArray = data[j]; for (let k = 0; k < subArray.length; k++) { result.push(subArray[k]); } } }
for of
var result = []; for (let item of arr) { for (let subArray of item.data) { for (let element of subArray) { result.push(element); } } }
flatMap
arr.flatMap(x => x.data).flat()
flatMap(n)
arr.map(x => x.data).flat(2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for of
flatMap
flatMap(n)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
for	955.3 Ops/sec
for of	811.4 Ops/sec
flatMap	369.5 Ops/sec
flatMap(n)	365.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark represents a performance comparison of different iteration methods available in JavaScript for traversing a two-dimensional array. Specifically, it evaluates the “for” loop, the “for..of” loop, and various usage of the `flatMap` method to flatten nested arrays.

### Iteration Methods Compared:

1. **For Loop**
    - **Test Name**: "for"
    - **Benchmark Definition**:
      ```javascript
      var result = [];
      for (let i = 0; i < arr.length; i++) {
          const data = arr[i].data;
          for (let j = 0; j < data.length; j++) {
              const subArray = data[j];
              for (let k = 0; k < subArray.length; k++) {
                  result.push(subArray[k]);
              }
          }
      }
      ```
    - **Pros**:
        - Direct control over the iteration process, leading to efficient memory use.
        - Traditionally considered the fastest method due to its simplicity.
    - **Cons**:
        - More verbose and potentially less readable than other methods.
        - Programmer has to manage loop counters manually.

2. **For..Of Loop**
    - **Test Name**: "for of"
    - **Benchmark Definition**:
      ```javascript
      var result = [];
      for (let item of arr) {
          for (let subArray of item.data) {
              for (let element of subArray) {
                  result.push(element);
              }
          }
      }
      ```
    - **Pros**:
        - Simpler syntax, enhancing readability.
        - Automatically manages the iteration over iterable objects, which can reduce errors in indexing.
    - **Cons**:
        - Typically, it may not be as performant as simple for loops, especially in very large datasets.

3. **FlatMap**
    - **Test Name**: "flatMap"
    - **Benchmark Definition**:
      ```javascript
      arr.flatMap(x => x.data).flat();
      ```
    - **Pros**:
        - Concise and expressive, ideal for transforming and flattening arrays in one step.
        - Suitable for functional programming styles, promoting immutability.
    - **Cons**:
        - May have overhead due to multiple function calls which can affect performance negatively compared to iterative loops.
      
4. **FlatMap with a depth argument**
    - **Test Name**: "flatMap(n)"
    - **Benchmark Definition**:
      ```javascript
      arr.map(x => x.data).flat(2);
      ```
    - **Pros**:
        - Provides flexibility to flatten nested arrays to a specified depth.
        - Similar benefits as the previous `flatMap` while allowing control over how deep the flattening goes.
    - **Cons**:
        - Can lead to more complexity in certain contexts if not managed properly.

### Performance Results
The benchmark results indicated:
- The **for loop** achieved the highest execution speed at approximately **465.4 executions per second**.
- The **flatMap(n)** method performed next at **234.8 executions per second**.
- The **flatMap** method followed closely behind at **219.9 executions per second**.
- The **for..of loop** had the lowest performance at **154.2 executions per second**.

### Considerations
- The choice between these methods can depend on the specific requirements. If performance is crucial due to large data sizes, the traditional `for` loop might be preferred. However, for code readability and maintainability in moderate-sized data, using `for..of` or `flatMap` might be sufficient.
- In addition to these methods, alternatives include:
   - **Regular `map` and `reduce`** methods for transforming and accumulating values.
   - Utilizing `forEach` for simpler iteration, though this can be less performant compared to for loops.
   - **Higher-order functions** can also be implemented for more complex transformations and manipulations if needed, balancing performance with more functional programming paradigms.

In sum, different scenarios dictate the best approach for array iteration and flattening in JavaScript, and engineers should gauge their choice against performance needs, readability, and data complexity.

Related benchmarks:

for..of vs for vs flatMap (version: 4)

Comparing performance of: for vs for of vs flatMap vs flatMap(n)

Created: one month ago by: Registered User

Jump to the latest result

for

for of

flatMap

flatMap(n)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):