Benchmark: map vs foreach - MeasureThat.net

Script Preparation code:

var array = new Array(100);

Tests:

forEach
array.forEach(function(i) { array[i]; });
map
array.map(function(i) { array[i]; });

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

forEach

8.0M/s

map

6.1M/s

Fastest: forEach (1.3x faster)

View exact numbers

✓ forEach: 8,005,610 ops/sec
• map: 6,122,824 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
map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

forEach

10.1M/s

map

7.3M/s

View exact numbers

Test name	Executions per second
✓ forEach	10,068,235 Ops/sec
map	7,250,748 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 JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two JavaScript methods: `forEach` and `map`. Both methods are used to iterate over an array, but they differ in how they handle the iteration.

**Options Compared**

Two options are compared:

1. **`array.forEach(function(i) { array[i]; });`**: This method uses the `forEach` loop to iterate over the array. The callback function takes an argument (`i`) that represents the index of the current element, but it's not actually used in this case. Instead, the callback tries to access the element at the current index (`array[i]`) without checking if the index is valid (out of bounds). This can lead to a runtime error.
2. **`array.map(function(i) { array[i]; });`**: This method uses the `map` function to create a new array with transformed elements. The callback function also takes an argument (`i`) that represents the index of the current element, similar to `forEach`. However, unlike `forEach`, `map` creates a new array and does not modify the original array.

**Pros and Cons**

1. **`array.forEach(function(i) { array[i]; });`**
	* Pros: None (it's a bad idea)
	* Cons:
		+ Can lead to runtime errors if the index is out of bounds.
		+ Not suitable for creating new arrays or modifying existing ones.
2. **`array.map(function(i) { array[i]; });`**
	* Pros:
		+ Creates a new array, which can be useful in some cases.
		+ Allows for transformation of elements while iterating over the original array.
	* Cons:
		+ Can lead to performance issues if the resulting array is large and the transformation is expensive.

**Library Used**

In this benchmark, there is no specific library being used. The `forEach` and `map` methods are built-in JavaScript methods that work with arrays.

**Special JS Feature/Syntax**

There is a special syntax used in both test cases: `$\r\n$`. This is just newline characters (`\n`) embedded in the code, which is not relevant to the benchmark itself. It's likely included to make the code more readable or for some other reason unrelated to the comparison.

**Other Considerations**

When writing JavaScript code, it's essential to consider how different methods will interact with arrays and avoid common pitfalls like using indices without bounds checking.

Alternative approaches:

* **Using `for` loops**: Instead of `forEach` or `map`, you could use traditional `for` loops to iterate over the array.
* **Using `reduce()`**: If you need to transform an array, consider using the `reduce()` method instead, which can be more efficient than `map`.
* **Caching results**: In some cases, you might want to cache the result of a calculation or transformation to avoid repeated computations.

The provided benchmark highlights the importance of choosing the right method for your specific use case and considering potential pitfalls.

map vs foreach (version: 0)

Comparing performance of: `forEach vs map`

Created: 4 years ago by: Guest

Go to the latest result

forEach

map

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

map vs foreach (version: 0)

Comparing performance of: forEach vs map

Created: 4 years ago by: Guest

Go to the latest result

forEach

map

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 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 map`