Benchmark: map vs forEach/push (1000 elements)

Script Preparation code:

window.arr = new Array({ length: 1000 }, (_, i) => `Option ${i + 1}`);

Tests:

map
const newArr = window.arr.map(element => ({ label: element, value: element })); newArr.unshift({ label: 'User', value: 'User' });
forEach/push
const newArr = []; newArr.push({ label: 'User', value: 'User' }) window.arr.forEach(element => { newArr.push({ label: element, value: element }) })

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

forEach/push

14.2M/s

map

10.6M/s

Fastest: forEach/push (1.3x faster)

View exact numbers

✓ forEach/push: 14,190,628 ops/sec
• map: 10,619,007 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
map
forEach/push

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; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Windows

View result in a separate tab

forEach/push

5.3M/s

map

4.3M/s

View exact numbers

Test name	Executions per second
✓ forEach/push	5,253,727 Ops/sec
map	4,274,894 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.

**Benchmark Overview**

The provided benchmark measures the performance difference between using `Array.prototype.map()` and concatenating arrays with `push()`, in comparison to using `Array.prototype.forEach()` followed by `push()`. This test creates a large array (`window.arr`) with 1000 elements, each initialized with an index and a value.

**Options Compared**

The benchmark compares three approaches:

1. **`map()`**: Creates a new array with the results of applying a provided function to each element in the original array.
2. **`forEach()` + `push()`**: Iterates over the elements of the original array using `forEach()`, and then pushes new elements onto the array using `push()`.
3. **Original/Control Group**: The baseline approach, where no optimization is applied.

**Pros and Cons**

*   **`map()`**: Pros:
    *   Efficient creation of a new array with transformed data.
    *   Does not modify the original array.
    Cons:
    *   Can be slower due to the overhead of creating a new array and allocating memory for each element.
*   **`forEach()` + `push()`**: Pros:
    *   Can be faster than `map()` because it avoids creating a new array, instead modifying an existing one.
    *   Allows for better control over the iteration process (e.g., returning values).
    Cons:
    *   Modifies the original array, which can lead to unintended side effects if not properly managed.
*   **Original/Control Group**: This approach is used as a baseline and serves no purpose other than providing a starting point for comparison.

**Library Usage**

None of the provided benchmark scripts explicitly use any external libraries. However, `window.arr` is an array created using the `Array` constructor with a custom initializer function (`(_, i) => 'Option ' + (i + 1)`). This initializer function generates the data for the original array.

**Special JavaScript Features**

The benchmark does not utilize any special JavaScript features beyond standard syntax. However, it's worth noting that `map()`, `forEach()`, and `push()` are all part of the ECMAScript standard, so they're widely supported across modern browsers.

**Other Alternatives**

Some potential alternative approaches for this benchmark could include:

*   Using `Array.prototype.reduce()` to accumulate values instead of `push()`.
*   Employing a custom iterator or generator function to process the data.
*   Comparing performance with other array methods, such as `array.filter()`, `array.indexOf()`, or `array.includes()`.

Keep in mind that these alternatives might not directly relate to the specific scenario being benchmarked and may introduce additional complexity.

map vs forEach/push (1000 elements) (version: 0) Benchmark.js

Comparing performance of: `map vs forEach/push`

Created: 4 years ago by: Guest

Go to the latest result

map

forEach/push

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 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/push (1000 elements) (version: 0) Benchmark.js

Comparing performance of: map vs forEach/push

Created: 4 years ago by: Guest

Go to the latest result

map

forEach/push

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 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: `map vs forEach/push`