Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Map vs Map vs Foreach vs for
(version: 5)
Benchmark.js
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:
9 years ago
by:
Registered User
Go to the latest result
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>
Run tests (4)
Previous results
Fork
Test case name
Result
Overwrite
Dont overwrite
forEach
for
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=579549" width="100%" height="500px"></iframe>
forEach
1.4M/s
for
439K/s
Dont overwrite
366K/s
Overwrite
329K/s
View exact numbers
Test name
Executions per second
✓
forEach
1,405,743 Ops/sec
for
438,652 Ops/sec
Dont overwrite
365,639 Ops/sec
Overwrite
328,989 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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 forEach Chris v2b
Array.forEach vs Object.keys().forEach
Comments
Confirm delete:
Do you really want to delete benchmark?