Benchmark: Map vs Map vs Foreach vs for

Script Preparation code:

var a = new Array(1000);
for (let i = 0; i < a.length; i++) {
  a[i] = {};
}

Tests:

Overwrite
a = a.map((row) => { row.checked = true; return row; });
Dont overwrite
const b = a.map((row) => { row.checked = true; return row; });
forEach
a.forEach((row) => { row.checked = true; });
for
for(let i=0; i<a.length; i++) { a[i].checked = true; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Overwrite
Dont overwrite
forEach
for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months 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
Overwrite	328989.3 Ops/sec
Dont overwrite	365639.3 Ops/sec
forEach	1405742.8 Ops/sec
for	438651.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**
The benchmark definition is testing three approaches to update the `checked` property of objects in an array:

1. **Overwrite**: Assigning the result of the `map()` function directly to the `a` array, effectively overwriting its contents.
2. **Don't Overwrite**: Assigning the result of the `map()` function to a new constant variable `b`, without modifying the original array `a`.
3. **forEach**: Using the `forEach()` method to iterate over the array and update the `checked` property.

**Script Preparation Code**
The script preparation code sets up an array `a` with 1000 elements, each initialized as an empty object: `var a = new Array(1000); for (let i = 0; i < a.length; i++) { a[i] = {}; }`.

**Html Preparation Code**
There is no HTML preparation code provided.

**Individual Test Cases**

Each test case defines a separate benchmark:

1. **Overwrite**: `a.map((row) => { row.checked = true; return row; });`
	* This approach modifies the original array `a` by overwriting its contents.
	* Pros: Simple and concise, potentially faster due to reduced memory allocation.
	* Cons: May cause unexpected side effects or performance issues if the array is large or accessed concurrently.
2. **Don't Overwrite**: `const b = a.map((row) => { row.checked = true; return row; });`
	* This approach creates a new constant variable `b` with the mapped values, without modifying the original array `a`.
	* Pros: Preserves the original data and ensures no side effects, potentially faster due to reduced memory allocation.
	* Cons: Creates an additional object in memory, which may impact performance or cache usage.
3. **forEach**: `a.forEach((row) => { row.checked = true; });`
	* This approach uses the `forEach()` method to iterate over the array and update the `checked` property.
	* Pros: Simple and efficient, as it avoids unnecessary memory allocation and copying.
	* Cons: May be slower due to the overhead of the `forEach()` method or potential issues with concurrent execution.

**Browser Benchmark Results**
The latest benchmark results show the performance of each approach on a Safari 12 browser on a Mac OS X 10.14.5 desktop platform:

| Test Name | Executions Per Second |
| --- | --- |
| forEach | 648828.5 |
| Overwrite | 36006.90625 |
| Don't Overwrite | 33214.78125 |
| for | 6565.818359375 |

**Library Usage**
None of the individual test cases use any external libraries.

**Special JS Feature/Syntax**
The benchmark uses JavaScript features such as `map()`, `forEach()`, and arrow functions (`=>`), which are commonly used in modern JavaScript development.

**Alternatives**

If you need to update an array's elements, consider using:

* **Array.prototype.map()` or **Array.prototype.forEach()**: These methods provide a concise and efficient way to update individual elements.
* **Manual iteration with a loop**: Using a `for` loop or `while` loop can be a more straightforward approach, but may require more manual memory management.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal coding style.

Related benchmarks:

Map vs Map vs Foreach vs for (version: 5)

Is it faster to store the return value of the map function in a new variable or to overwrite the existing array? Or is it faster to use forEach?

Comparing performance of: Overwrite vs Dont overwrite vs forEach vs for

Created: 8 years ago by: Registered User

Jump to the latest result

Overwrite

Dont overwrite

forEach

for

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):