Benchmark: Map.forEach vs Array.forEach vs Array.from(Map.prototype.values()).forEach

Script Preparation code:

var mapForEach = new Map();
var arr = [];
var mapToArr = new Map();

for (let i=0; i<100000; i++) {
  mapForEach.set(i, i);
  arr.push(i);
  mapToArr.set(i, i);
}

Tests:

Map.prototype.forEach
mapForEach.forEach(console.log);
Array.prototype.forEach
arr.forEach(console.log);
Array.from(Map.prototype.values()).forEach
Array.from(mapToArr).forEach(console.log);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map.prototype.forEach
Array.prototype.forEach
Array.from(Map.prototype.values()).forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Map.prototype.forEach	3.9 Ops/sec
Array.prototype.forEach	4.4 Ops/sec
Array.from(Map.prototype.values()).forEach	3.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The benchmark in question compares the performance of `Map.forEach`, `Array.forEach`, and `Array.from(Map.prototype.values()).forEach` methods.

**What's being tested?**

The benchmark tests the execution time of three different approaches:

1.  **Map.prototype.forEach**: This method iterates over a Map object using its `forEach` method.
2.  **Array.prototype.forEach**: This method iterates over an array using its `forEach` method.
3.  **Array.from(Map.prototype.values()).forEach**: This approach creates an array from the values of a Map object using `Array.from` and then iterates over it using `forEach`.

**Options comparison**

The three methods have different approaches to iteration:

*   **Map.prototype.forEach**: Iterates directly on the Map object.
*   **Array.prototype.forEach**: Iterates over an array, which is created separately from the Map object. This approach has a potential overhead due to the extra memory allocation and manipulation required to create the array.
*   **Array.from(Map.prototype.values()).forEach**: Creates an array from the values of the Map object using `Array.from` and then iterates over it using `forEach`. This approach involves two steps, which may impact performance.

**Pros and Cons**

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

*   **Map.prototype.forEach**:
    *   Pros: Direct iteration on the Map object, potentially more efficient memory usage.
    *   Cons: May be slower due to overheads in creating an array from the Map object values.
*   **Array.prototype.forEach**:
    *   Pros: More common and well-documented usage pattern for iterating over arrays.
    *   Cons: Involves extra memory allocation and manipulation, which may impact performance.
*   **Array.from(Map.prototype.values()).forEach**:
    *   Pros: Can be more efficient if the Map object has many values that need to be processed sequentially.
    *   Cons: Involves two steps (creating an array from the Map object values and iterating over it), which may increase overhead.

**Library and Special JavaScript Features**

The benchmark uses the following libraries:

*   None explicitly mentioned, but `Array.from` is a standard JavaScript method that creates an array from an iterable.
*   No special JavaScript features are used in this benchmark.

**Other Considerations**

*   The use of `console.log` as a logging function can impact performance since it may involve additional overheads like printing to the console.
*   The test cases may not be representative of real-world scenarios, which could affect the results.

**Alternatives**

If you're interested in exploring alternative approaches or testing other methods, here are some options:

*   **For...in**: Instead of `forEach`, you can use a for-in loop to iterate over the Map object's values. However, this method may not be as straightforward and could lead to unexpected behavior if you're not careful.
*   **Array.prototype.map()**: Another way to process elements in an array is by using `map()`. You can use this approach alongside `forEach` for a more comprehensive comparison.
*   **Other iteration methods**: Depending on your specific requirements, you might want to explore other iteration methods like `for...of`, `reduce()`, or `filter()` for an alternative perspective.

Related benchmarks:

Map.forEach vs Array.forEach vs Array.from(Map.prototype.values()).forEach (version: 0)

Comparing performance of: Map.prototype.forEach vs Array.prototype.forEach vs Array.from(Map.prototype.values()).forEach

Created: 11 months ago by: Guest

Jump to the latest result

Map.prototype.forEach

Array.prototype.forEach

Array.from(Map.prototype.values()).forEach

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