Benchmark: Array forEach callback function as a parameter vs as a predefined variable + compared to using callback parameters vs without + for..of, for..in, for loop

Array forEach callback function as a parameter vs as a predefined variable + compared to using callback parameters vs without + for..of, for..in, for loop (version: 1)

Comparing performance of: Array forEach, callback function provided as an argument, ignoring most callback arguments vs Array forEach, callback function provided as an argument vs Array forEach, callback function provided as a predefined variable vs for..of vs for..in vs for loop

Created: 23 days ago by: Guest

Jump to the latest result

Script Preparation code:

var array = new Array(100);

var fn = function(el, idx, arr) {
  el;
}

Tests:

Array forEach, callback function provided as an argument, ignoring most callback arguments
array.forEach(function(_el, idx, _arr) { array[idx]; });
Array forEach, callback function provided as an argument
array.forEach(function(el, idx, arr) { el; });
Array forEach, callback function provided as a predefined variable
array.forEach(fn);
for..of
for (const i of array) { array[i]; }
for..in
for (var i in array) { array[i]; }
for loop
for (var i = 0; i < array.length; i++) { array[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array forEach, callback function provided as an argument, ignoring most callback arguments
Array forEach, callback function provided as an argument
Array forEach, callback function provided as a predefined variable
for..of
for..in
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 23 days ago)

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

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Array forEach, callback function provided as an argument, ignoring most callback arguments	5601961.0 Ops/sec
Array forEach, callback function provided as an argument	5600143.0 Ops/sec
Array forEach, callback function provided as a predefined variable	3423975.0 Ops/sec
for..of	733334.7 Ops/sec
for..in	4747800.0 Ops/sec
for loop	3430163.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 22 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests the performance of different iteration techniques in JavaScript, particularly for arrays. Several methods of iterating over an array are compared, including using the `forEach` method with various configurations and traditional loop constructs such as `for`, `for...of`, and `for...in`. Below is a breakdown of the approaches tested, along with their pros and cons, and other considerations.

### Approaches Compared:

1. **Array forEach with Inline Callback Ignoring Arguments:**
   ```javascript
   array.forEach(function(_el, idx, _arr) {
       array[idx];
   });
   ```
   - **Pro:** The function is defined inline for straightforward reading and understanding.
   - **Con:** Ignoring most callback arguments may make this less flexible in certain contexts.
   - **Performance:** Achieved the highest performance consistently in the tests.

2. **Array forEach with Full Callback:**
   ```javascript
   array.forEach(function(el, idx, arr) {
       el;
   });
   ```
   - **Pro:** Fully utilizes all parameters available in the callback for better insight on the current state during iteration.
   - **Con:** May introduce slight overhead compared to ignoring unnecessary parameters.
   - **Performance:** Slightly less than the inline-with-ignored-arguments version; still performed well.

3. **Array forEach with Predefined Function Variable:**
   ```javascript
   array.forEach(fn);
   ```
   - **Pro:** The pre-defined function (`fn`) can be reused, potentially improving clarity and separating logic outside of the iteration context.
   - **Con:** May be functionally less performant than the inline methods due to function referencing overhead.
   - **Performance:** Slightly lower than the inline versions tested.

4. **For...of Loop:**
   ```javascript
   for (const i of array) {
       array[i];
   }
   ```
   - **Pro:** Offers a more readable syntax for iterating over iterable objects.
   - **Con:** The syntax can lead to confusion, especially if the array context is misunderstood; `i` represents the actual array element, not an index.
   - **Performance:** The slowest among the tested iterations, which may make it less optimal for performance-critical applications.

5. **For...in Loop:**
   ```javascript
   for (var i in array) {
       array[i];
   }
   ```
   - **Pro:** Easy to write and use when interacting with object properties.
   - **Con:** Not recommended for array iteration as it enumerates all enumerable properties including non-array indices (functions, prototypes), which can lead to unpredictable behavior.
   - **Performance:** Performed moderately well but has caveats concerning unintended properties.

6. **Traditional For Loop:**
   ```javascript
   for (var i = 0; i < array.length; i++) {
       array[i];
   }
   ```
   - **Pro:** Highly versatile and provides explicit control over the loop index.
   - **Con:** Requires manual management of the loop counter and condition, making it more error-prone for beginners.
   - **Performance:** Outperformed by some higher-level abstractions but generally efficient for large datasets.

### Summary of Performance Results:
- The `forEach` methods, especially those using inline callbacks, performed better than traditional for loops and other constructs.
- The `for...of` and `for...in` loops have much lower performance and are arguably less suitable for standard array iteration tasks.

### Other Alternatives:
In addition to the methods tested, JavaScript also supports methods like `map`, `filter`, and `reduce`, which can be more expressive for certain use cases where transformation or filtering of arrays is required. However, these methods introduce additional complexity in their implementation, often resulting in less performance in raw iteration tasks compared to `forEach` and traditional loops.

Overall, when choosing an iteration strategy, consider the specific needs of your code (readability, performance, maintainability) and the nature of the data you are working with.

Related benchmarks:

Array forEach callback function as a parameter vs as a predefined variable + compared to using callback parameters vs without + for..of, for..in, for loop (version: 1)

Comparing performance of: Array forEach, callback function provided as an argument, ignoring most callback arguments vs Array forEach, callback function provided as an argument vs Array forEach, callback function provided as a predefined variable vs for..of vs for..in vs for loop

Created: 23 days ago by: Guest

Jump to the latest result

Array forEach, callback function provided as an argument, ignoring most callback arguments

Array forEach, callback function provided as an argument

Array forEach, callback function provided as a predefined variable

for..of

for..in

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 22 days ago):