Benchmark: foreach vs mappp

Script Preparation code:

var array = new Array(100000);

Tests:

map
array.map(function(i) { return { id: array[i] }; });
foreach
array.forEach(function(i) { const a = { id: array[i] }; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
foreach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 123 on Android

View result in a separate tab

Test name	Executions per second
map	2038.1 Ops/sec
foreach	5213.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The benchmark compares the performance of two loop constructs: `forEach` and `map`. Specifically, it tests how each construct creates an object with a single property, `tid`, which contains the corresponding value from the original array.

**Options compared**

There are two options being compared:

1. **`forEach`**: The `forEach` loop is used to iterate over the elements of the array and create an object with the desired properties.
2. **`map`**: The `map` method is used to create a new array by applying a function to each element of the original array.

**Pros and Cons**

* **`forEach`**:
	+ Pros: Can be more intuitive for simple loop logic, easier to understand for those familiar with traditional loops.
	+ Cons: May incur overhead due to the iteration and index management (e.g., `i` variable), which can affect performance in some cases.
* **`map`**:
	+ Pros: Creates a new array, which can be beneficial for parallel processing or other scenarios where you need to reuse the resulting data. Also, it's often faster than traditional loops since it's optimized by the browser engine.
	+ Cons: May have higher overhead due to the creation of a new array, and it requires understanding the mapping function and its potential side effects.

**Library and purpose**

There is no external library used in this benchmark. The `forEach` and `map` methods are built-in JavaScript functions that are part of the standard library.

**Special JS feature or syntax**

The benchmark uses ES6+ syntax for both loops, including arrow functions (`=>`) and template literals (`\r\n`). These features are widely supported by modern browsers and are a natural fit for this type of performance comparison.

**Other alternatives**

For those interested in exploring alternative loop constructs, here are some options:

* **Traditional `for` loop**: A simple and straightforward loop construct that's easy to understand but may incur more overhead than `forEach` or `map`.
* **`reduce()` method**: While not a traditional loop, the `reduce()` method can be used to iterate over an array and accumulate values. It might offer better performance in certain scenarios.

Keep in mind that these alternatives are less commonly used for simple loops like this benchmark, so it's unlikely you'll encounter them frequently in everyday JavaScript development.

Related benchmarks:

foreach vs mappp (version: 0)

Compare loop performance

Comparing performance of: map vs foreach

Created: 2 years ago by: Guest

Jump to the latest result

map

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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