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

Script Preparation code:

window.arr = Array.from({ length: 10000000 }, (_, 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

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Linux

View result in a separate tab

Test name	Executions per second
map	0.7 Ops/sec
forEach/push	1.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark tests the performance of two approaches: `map` and `forEach/push`. Both approaches are used to transform an array of strings into a new array with additional information.

**Approaches Compared**

1. **`map`**: This approach uses the `Array.prototype.map()` method, which creates a new array by applying a provided function to each element in the original array. In this case, the function takes an element and returns an object with two properties: `label` and `value`, where `label` is the original string and `value` is also the original string.
2. **`forEach/push`**: This approach uses a combination of `Array.prototype.forEach()` and `Array.prototype.push()`. The `forEach()` method iterates over each element in the array, applying a provided function to each element. In this case, the function creates a new object with the same properties as before (`label` and `value`) and pushes it onto the end of the new array.

**Pros and Cons**

* **`map`**:
	+ Pros: concise and readable code, creates a new array without modifying the original.
	+ Cons: may be slower than `forEach/push` due to the overhead of creating a new array using `Array.prototype.map()`.
* **`forEach/push`**:
	+ Pros: can be faster than `map` since it avoids the overhead of creating a new array, and allows for more control over the iteration process.
	+ Cons: more verbose code, may modify the original array if not careful.

**Library and Special JS Features**

In this benchmark, the `Array.prototype.map()` method is used, which is a built-in JavaScript library that provides an efficient way to transform arrays. No special JavaScript features or syntax are used in this benchmark.

**Other Considerations**

* The benchmark uses a fixed-size array of 10 million elements, which may not accurately represent real-world scenarios where arrays may be larger or smaller.
* The benchmark does not account for any potential side effects of modifying the original array.
* It's worth noting that the `forEach/push` approach can be faster in some cases due to the overhead of creating a new array with `Array.prototype.map()`. However, this may vary depending on the specific use case and browser implementation.

**Alternatives**

Other alternatives for transforming arrays include:

* Using `Array.prototype.forEach()` without pushing elements onto the end of an array (e.g., using `const newArr = []; arr.forEach(element => { ... });`).
* Using other libraries or frameworks that provide optimized array transformations, such as Lodash.
* Using native web worker threads to offload computationally intensive operations.

Keep in mind that these alternatives may have different performance characteristics and trade-offs depending on the specific use case.

Related benchmarks:

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

Comparing performance of: map vs forEach/push

Created: 3 years ago by: Guest

Jump to the latest result

map

forEach/push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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