Benchmark: Map vs forEach - MeasureThat.net

Tests:

Map

const createLists = (arr = []) => Array.from(
  arr.reduce((map, val) => {
    if (!map.has(val)) map.set(val, []);
    map.get(val).push(val);
    return map;
  }, new Map()).values()
);

console.log(createLists([1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0]));

​x
 
const createLists = (arr = []) => Array.from(  arr.reduce((map, val) => {    if (!map.has(val)) map.set(val, []);    map.get(val).push(val);    return map;  }, new Map()).values());​console.log(createLists([1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0]));

forEach

function createLists(arr = []) {
  let authors = [];
  let list = [];

  arr.forEach(item => {
    let authorIndex = authors.includes(item) ? authors.indexOf(item) : (authors.push(item) - 1);
    list[authorIndex] = list[authorIndex] || [];
    list[authorIndex].push(item);
  });

  return list;
}

console.log(createLists([1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0]));

 
function createLists(arr = []) {  let authors = [];  let list = [];​  arr.forEach(item => {    let authorIndex = authors.includes(item) ? authors.indexOf(item) : (authors.push(item) - 1);    list[authorIndex] = list[authorIndex] || [];    list[authorIndex].push(item);  });​  return list;}​console.log(createLists([1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0]));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Map
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Linux

View result in a separate tab

Test name	Executions per second
Map	23956.1 Ops/sec
forEach	20761.6 Ops/sec

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

Let's break down the benchmark and its test cases.

Benchmark Overview

The benchmark compares two approaches to create an array of values with nested structure:

Map: Uses JavaScript's built-in Map data structure to store values and their indices, then converts it to an array using Array.from().
forEach: Iterates over the input array using forEach() and creates an array by pushing values into a dynamically-sized array.

Options Compared

The two options being compared are:

Map: A more functional programming approach that uses a Map data structure to store values with their indices, allowing for efficient lookup and iteration.
forEach: An imperative approach using forEach() to iterate over the input array, creating an array by pushing values into a dynamically-sized array.

Pros and Cons

Map:

Pros:

Efficient use of memory, as the Map stores only unique keys (values) with their indices.
Fast iteration and lookup due to JavaScript's hash table implementation.

Cons:

Requires the input array to be sorted or ordered in some way (in this case, all values are present), which may not always be the case.
May have performance overhead due to the creation of a Map object.

forEach:

Pros:

Can handle unsorted or unordered input arrays without modifications.
Does not require the creation of an additional data structure (the Map in this case).

Cons:

Has potential performance issues due to iterating over the entire array on each iteration, potentially leading to slow performance for large inputs.

Other Considerations

Both approaches have trade-offs between memory usage, iteration efficiency, and input order requirements. The choice of approach depends on the specific use case and requirements.

In this benchmark, the Map approach tends to outperform forEach, likely due to its efficient use of memory and fast iteration capabilities.

Now, let's talk about some JavaScript-specific features mentioned in the benchmark:

Array.from(): A method that converts an array-like object into a true array.
Arrow functions (=>): Used for concise function definitions, similar to traditional functions but with fewer keywords.

Note: The forEach() function is not a special JS feature per se, but rather a part of the standard JavaScript API.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark compares two approaches to create an array of values with nested structure:

1. **Map**: Uses JavaScript's built-in `Map` data structure to store values and their indices, then converts it to an array using `Array.from()`.
2. **forEach**: Iterates over the input array using `forEach()` and creates an array by pushing values into a dynamically-sized array.

**Options Compared**

The two options being compared are:

1. **Map**: A more functional programming approach that uses a `Map` data structure to store values with their indices, allowing for efficient lookup and iteration.
2. **forEach**: An imperative approach using `forEach()` to iterate over the input array, creating an array by pushing values into a dynamically-sized array.

**Pros and Cons**

**Map:**

Pros:

* Efficient use of memory, as the `Map` stores only unique keys (values) with their indices.
* Fast iteration and lookup due to JavaScript's hash table implementation.

Cons:

* Requires the input array to be sorted or ordered in some way (in this case, all values are present), which may not always be the case.
* May have performance overhead due to the creation of a `Map` object.

**forEach:**

Pros:

* Can handle unsorted or unordered input arrays without modifications.
* Does not require the creation of an additional data structure (the `Map` in this case).

Cons:

* Has potential performance issues due to iterating over the entire array on each iteration, potentially leading to slow performance for large inputs.

**Other Considerations**

Both approaches have trade-offs between memory usage, iteration efficiency, and input order requirements. The choice of approach depends on the specific use case and requirements.

In this benchmark, the `Map` approach tends to outperform `forEach`, likely due to its efficient use of memory and fast iteration capabilities.

Now, let's talk about some JavaScript-specific features mentioned in the benchmark:

* **Array.from()**: A method that converts an array-like object into a true array.
* **Arrow functions** (`=>`): Used for concise function definitions, similar to traditional functions but with fewer keywords.

Note: The `forEach()` function is not a special JS feature per se, but rather a part of the standard JavaScript API.

Related benchmarks:

Map vs forEach (version: 0)

Comparing performance of: Map vs forEach

Created: 8 years ago by: Guest

Jump to the latest result

Map

forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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