Benchmark: Array loop vs foreach vs map 50k

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 50000; 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: 3 years ago)

User agent: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-N975F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/15.0 Chrome/90.0.4430.210 Mobile Safari/537.36

Browser/OS: Chrome Mobile 90 on Android

View result in a separate tab

Test name	Executions per second
foreach	207.5 Ops/sec
for	117.3 Ops/sec
map	189.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three JavaScript loops: `forEach`, `for` loop, and `map`. The script prepares an array of 50,000 elements, each initialized with a value generated by the function `someFn(i) = i * 3 * 8`.

**Loop Comparisons**

1. **`forEach` Loop**: This loop iterates over the array using the `forEach` method, which calls the provided callback function for each element. In this case, the callback function is `someFn(item)`.

Pros:

* Easy to read and maintain
* Less prone to off-by-one errors

Cons:

* Can be slower than other approaches due to overhead from the callback function invocation
* May incur additional memory allocations due to the creation of temporary objects (if used with non-strict mode)

2. **`for` Loop**: This loop uses a traditional `for` loop to iterate over the array, accessing each element directly.

Pros:

* Fastest among the three options
* Low overhead and no memory allocations

Cons:

* More prone to off-by-one errors due to manual indexing
* Less readable than other approaches

3. **`map` Function**: This function creates a new array by applying the provided transformation function to each element of the original array.

Pros:

* Easy to read and maintain
* Can be faster than `forEach` loop for large datasets, as it avoids overhead from callback invocation

Cons:

* Creates a new array, which can consume additional memory
* May incur performance overhead due to object creation and garbage collection

**Library Usage**

The `map` function uses the built-in `Array.prototype.map()` method, which is a part of the ECMAScript standard. This method takes two arguments: an optional callback function and a new array (created by default).

**Special JS Feature/Syntax**

None mentioned in this benchmark.

Now that we've explored the benchmark, here are some alternative approaches:

* **Using `reduce()`**: Instead of `map`, you could use the `Array.prototype.reduce()` method to create a new array.
* **Using `Array.from()`**: If you're using an older browser or Node.js version, you might consider using `Array.from()` instead of `map` for its additional compatibility features.

Keep in mind that each approach has trade-offs in terms of performance, readability, and memory usage. The choice ultimately depends on the specific requirements of your project.

Related benchmarks:

Array loop vs foreach vs map 50k (version: 0)

Comparing performance of: foreach vs for vs map

Created: 3 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):