Benchmark: map vs forEach/push (1000 elements) fixed !

Script Preparation code:

window.arr = Array.from({ 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 }) })

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

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches for transforming an array:

1. Using `Array.prototype.map()` (denoted as "map")
2. Using a combination of `Array.prototype.push()` and `Array.prototype.forEach()` (denoted as "forEach/push")

**Options Compared**

The benchmark tests the following options:

* **Map**: Uses `Array.prototype.map()` to transform the input array, which creates a new array with transformed elements.
	+ Pros:
		- Efficient when working with small arrays or no modification required on original data
		- Less memory-intensive as it creates a new array without modifying the original
	+ Cons:
		- Can be slower than other methods for large datasets due to memory allocation and copying
* **ForEach/Push**: Uses `Array.prototype.forEach()` to iterate over the input array, and then uses `push()` to add transformed elements to a new array.
	+ Pros:
		- Can handle large datasets without excessive memory allocation
		- More control over iteration order and transformation logic

**Other Considerations**

The benchmark also considers other factors:

* **Modifying original data**: The "map" approach does not modify the original input array, while the "forEach/push" approach modifies it.
* **Memory usage**: Both approaches have their trade-offs in terms of memory usage.

**Library Usage (None)**

There are no external libraries used in this benchmark.

**Special JS Features or Syntax (None)**

There are no special JavaScript features or syntax used in this benchmark.

**Benchmark Preparation Code**

The preparation code creates an array `window.arr` with 1000 elements, each labeled as "Option X", where X is the element index plus one. This is done using the following JavaScript code:

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

**Individual Test Cases**

The benchmark consists of two test cases:

* **Test Case 1: "map"**
```javascript
const newArr = window.arr.map(element => ({ label: element, value: element }));
newArr.unshift({ label: 'User', value: 'User' });
```
This code transforms the input array using `Array.prototype.map()` and adds an additional element to the resulting array.

* **Test Case 2: "forEach/push"**
```javascript
const newArr = [];
newArr.push({ label: 'User', value: 'User' });

window.arr.forEach(element => {
    newArr.push({ label: element, value: element });
});
```
This code iterates over the input array using `Array.prototype.forEach()` and adds transformed elements to a new array using `push()`.

**Latest Benchmark Results**

The latest results show the execution rate per second for each test case on a Chrome 105 desktop running Windows. The "map" approach outperforms the "forEach/push" approach, with higher execution rates.

Keep in mind that this benchmark is designed to compare specific approaches and may not be representative of real-world use cases.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
map	246588.0 Ops/sec
forEach/push	156984.8 Ops/sec

Related benchmarks:

map vs forEach/push (1000 elements) fixed ! (version: 0)

Comparing performance of: map vs forEach/push

Created: 2 years ago by: Guest

Jump to the latest result

map

forEach/push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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