Benchmark: Array loop vs foreach vs map with 100000 itens on array

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 100000; i++) {
      arr[i] = i;
    }
  
    function someFn(i) {
      return i * 3 * 8;
    }

Tests:

foreach
arr.forEach(function (item){ someFn(item); })
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
foreach	300.0 Ops/sec
for	155.0 Ops/sec
map	265.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark that compares the performance of three different approaches for iterating over an array:

1. **Array.forEach**: This approach uses the `forEach` method to iterate over the array, where each element is processed by calling the provided callback function.
2. **Traditional For Loop**: This approach uses a traditional `for` loop to iterate over the array, where the index of each element is accessed and used to call the `someFn` function.
3. **Array.prototype.map()**: This approach uses the `map()` method to create a new array with the results of applying the `someFn` function to each element in the original array.

**Options Compared**

The three approaches are compared in terms of their performance, measured by the number of executions per second on a specific device and browser configuration.

**Pros and Cons of Each Approach**

* **Array.forEach**:
	+ Pros: concise and expressive way to iterate over arrays, no explicit indexing required.
	+ Cons: may incur overhead due to method invocation and potential caching behavior.
* **Traditional For Loop**:
	+ Pros: direct access to array elements, low overhead for iteration.
	+ Cons: requires manual indexing, can lead to errors if indexing is incorrect.
* **Array.prototype.map()**:
	+ Pros: creates a new array with transformed elements, can simplify code.
	+ Cons: may incur overhead due to method invocation and potential caching behavior, transforms the original array.

**Library and Special JS Features**

In this benchmark, no libraries are used beyond the standard JavaScript features. However, it does utilize modern JavaScript syntax, including:

* Arrow functions (`=>`): concise way to define small functions.
* Template literals (`\r\n`) for multiline strings.

**Alternative Approaches**

Other approaches that could be considered for iteration over arrays include:

1. **Array.prototype.forEach()**: an older version of the `forEach()` method, which may provide similar performance characteristics to the current implementation.
2. **Array.prototype.reduce()**: another array method that can be used for iteration, although it's typically used for accumulating values rather than executing a function on each element.
3. **Manual indexing with arrays**: using techniques like `array indices` or `array slicing` to access elements directly, which may provide optimal performance but requires manual management of the indexing.

Note that the choice of approach ultimately depends on the specific use case and requirements of the application, as well as personal coding preferences.

Related benchmarks:

Array loop vs foreach vs map with 100000 itens on array (version: 0)

Comparing performance of: foreach vs for vs map

Created: 4 years ago by: Guest

Jump to the latest result

foreach

for

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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