Benchmark: Array loop vs foreach vs map

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; 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))

Historical Performance Data aggregated from 141 community runs

Desktop Results:

Chrome 108 runs

foreach

25K/s

map

24K/s

for

13K/s

Fastest: foreach (1.9x faster)

View exact numbers

✓ foreach: 25,202 ops/sec
• map: 24,312 ops/sec
• for: 12,967 ops/sec

Firefox 16 runs

for

1.2M/s

foreach

221K/s

map

141K/s

Fastest: for (8.6x faster)

View exact numbers

✓ for: 1,206,721 ops/sec
• foreach: 220,873 ops/sec
• map: 140,772 ops/sec

Safari 6 runs

map

33K/s

foreach

26K/s

for

14K/s

Fastest: map (2.3x faster)

View exact numbers

✓ map: 32,982 ops/sec
• foreach: 25,687 ops/sec
• for: 14,092 ops/sec

Mobile Results:

Chrome 11 runs

foreach

11K/s

map

10K/s

for

6K/s

Fastest: foreach (1.9x faster)

View exact numbers

✓ foreach: 10,639 ops/sec
• map: 9,836 ops/sec
• for: 5,507 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 5 months ago)

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

foreach

1.2M/s

for

480K/s

map

402K/s

View exact numbers

Test name	Executions per second
✓ foreach	1,154,992 Ops/sec
for	480,024 Ops/sec
map	401,664 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's being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of three different approaches for iterating over an array in JavaScript:

1. `forEach` loop
2. Traditional `for` loop
3. `map()` method

**Script Preparation Code**

The script preparation code creates an empty array `arr` and populates it with 1000 elements using a traditional `for` loop. It also defines a simple function `someFn(i)` that takes an integer `i` as input and returns the result of multiplying `i` by 3 and 8.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark is only running in a headless mode (i.e., without a graphical user interface).

**Individual Test Cases**

The benchmark defines three test cases:

1. `foreach`: Iterates over the array using the `forEach` loop with the provided function as its callback.
2. `for`: Iterates over the array using a traditional `for` loop with an index variable `i`.
3. `map`: Uses the `map()` method to transform each element of the array into a new value returned by the `someFn(i)` function.

**Library and Purpose**

In this benchmark, the `Array.prototype.forEach()` and `Array.prototype.map()` methods are used as built-in JavaScript libraries. The `forEach()` method executes a provided callback function for each element in an array, while the `map()` method creates a new array with the results of applying a provided function to each element.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's required by the standard language definition. However, it's worth noting that modern browsers and JavaScript engines often provide additional features and optimizations not present in this benchmark (e.g., `for...of` loops, async/await, etc.).

**Alternative Approaches**

Some alternative approaches for iterating over arrays could include:

* Using `Array.prototype.reduce()`
* Implementing a custom iterator function using the `Iterator Protocol`
* Utilizing Web Workers or other concurrency mechanisms
* Leveraging specialized libraries like Lodash or Ramda

However, these alternatives are not part of this specific benchmark, which focuses on comparing the performance of three fundamental iteration methods.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `forEach` loop:
	* Pros: Simple to use, easy to understand, works well with most modern browsers.
	* Cons: Can be less efficient than traditional `for` loops for large arrays due to overhead from callback function execution.
2. Traditional `for` loop:
	* Pros: Generally faster and more efficient than `forEach` or `map`, especially for large arrays.
	* Cons: More verbose, requires manual index management.
3. `map()`
	* Pros: Efficient and concise way to transform arrays, often preferred in functional programming scenarios.
	* Cons: May incur additional overhead due to function invocation and return values.

Keep in mind that these are general pros and cons, and actual performance results can vary depending on the specific use case, JavaScript engine, and browser version.

Array loop vs foreach vs map (version: 0) Benchmark.js

Comparing performance of: `foreach vs for vs map`

Created: 8 years ago by: Guest

Go to the latest result

foreach

for

map

Historical Performance Data aggregated from 141 community runs

Desktop Results:

Chrome 108 runs

Firefox 16 runs

Safari 6 runs

Mobile Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array loop vs foreach vs map (version: 0) Benchmark.js

Comparing performance of: foreach vs for vs map

Created: 8 years ago by: Guest

Go to the latest result

foreach

for

map

Historical Performance Data aggregated from 141 community runs

Desktop Results:

Chrome 108 runs

Firefox 16 runs

Safari 6 runs

Mobile Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `foreach vs for vs map`