Benchmark: Map iteration + clearing

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var myMap = new Map();
for (let i = 0; i < 200; i++) {
  const key = {};
  const value = {value: Math.random()};
  myMap.set(key, value);
}

Tests:

forEach + clear
myMap.forEach((value, key) => { console.log(value, key); }); myMap.clear();
forEach + delete
myMap.forEach((value, key) => { console.log(value, key); myMap.delete(key); });
for...of + clear
for (const entry of myMap) { console.log(entry[1], entry[0]); } myMap.clear();
for...of + delete
for (const entry of myMap) { console.log(entry[1], entry[0]); myMap.delete(entry[0]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach + clear
forEach + delete
for...of + clear
for...of + delete

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach + clear	36301300.0 Ops/sec
forEach + delete	105745880.0 Ops/sec
for...of + clear	44519368.0 Ops/sec
for...of + delete	133537488.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):

LLMs can make mistakes. Check important info.

The benchmark JSON provided evaluates different methods of iterating over a JavaScript `Map` object and manipulating its data, specifically focusing on efficiency in terms of execution speed. Here's a breakdown of what is being tested in this benchmark:

### Options Compared
1. **forEach + clear**
   - `myMap.forEach((value, key) => { ... });`
   - This method involves iterating through the `Map` using the built-in `forEach` method and then clearing the `Map` with `myMap.clear()` at the end.

2. **forEach + delete**
   - `myMap.forEach((value, key) => { ...myMap.delete(key); });`
   - Similar to the first method, but instead of clearing the `Map` afterward, it deletes individual entries using `myMap.delete(key)` during the iteration.

3. **for...of + clear**
   - `for (const entry of myMap) { ... };`
   - This approach uses the `for...of` statement to iterate over the entries of the `Map`, followed by clearing the `Map` afterward.

4. **for...of + delete**
   - `for (const entry of myMap) { ...myMap.delete(entry[0]); };`
   - Again, this utilizes the `for...of` loop to iterate through the `Map`, but instead of clearing, individual entries are removed using `myMap.delete(entry[0])`.

### Pros and Cons of Each Approach

1. **forEach + clear**
   - **Pros:** 
     - Clear and concise syntax.
     - Easy to read and understand.
   - **Cons:** 
     - The entire `Map` is traversed, which might be less efficient if we have a very large `Map` since all entries must be iterated over unnecessarily after deciding to clear.

2. **forEach + delete**
   - **Pros:** 
     - Deletes entries on the fly, which means no need for a second pass to clear the `Map`.
   - **Cons:** 
     - Performance can degrade as deleting entries during iteration can affect the internal structure of the `Map` and potentially lead to slower execution times due to rehashing.

3. **for...of + clear**
   - **Pros:** 
     - Offers more control over the iteration process.
     - Generally works better with larger datasets because it maintains the original `Map` structure during the iteration until the clear operation is performed.
   - **Cons:** 
     - Slightly more verbose than `forEach`, which might deter less experienced developers.

4. **for...of + delete**
   - **Pros:** 
     - Deletes entries dynamically and allows for targeted removal.
   - **Cons:** 
     - Similar to `forEach + delete`, it can be less efficient due to the same concerns around maintaining structure during deletion.

### Other Considerations
- **Performance Measurement:** Each approach's performance is measured in terms of "executions per second," highlighting which method is more efficient based on the hardware (Mobile Safari on iOS in this case) it was tested on.
- **Use Cases:** The choice of one method over another can depend on specific use-case requirements — whether there is a need to retain certain entries or clear the entire structure after processing.
  
### Alternatives
- **Traditional For Loop:** A standard `for` loop can also be used to manually access `Map` entries. This may offer more flexibility, but it requires additional boilerplate code.
- **Object.keys()/Object.entries():** If the map was converted to a simple object format, you could use these array methods for iteration, but you would lose the benefits of `Map` like preservation of insertion order and type relevance of keys.
- **Using Libraries or Frameworks:** Libraries like Lodash offer utilities for working with data structures, including maps, and might abstract away some complexities involved in iteration and manipulation.

In summary, the benchmark tests various strategies for iterating and modifying a `Map` in JavaScript, each with distinct advantages and drawbacks, revealing how those trade-offs can impact performance in different contexts.

Related benchmarks:

Map iteration + clearing (version: 1)

Comparing performance of: forEach + clear vs forEach + delete vs for...of + clear vs for...of + delete

Created: 21 days ago by: Guest

Jump to the latest result

forEach + clear

forEach + delete

for...of + clear

for...of + delete

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):