Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Array loop vs foreach vs map for update field in object
(version: 0)
Benchmark.js
Comparing performance of:
foreach vs for vs map
Created:
6 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var arr = []; for (var i = 0; i < 1000; i++) { arr[i] = { 'id': i }; } function someFn(i) { return i * 3 * 8; }
Tests:
foreach
arr.forEach(function (item){ item.data = someFn(item.id); })
for
for (var i = 0, len = arr.length; i < len; i++) { arr[i].data = someFn(arr[i].id); }
map
arr.map(function(item){ item.data=someFn(item.id); return item; });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
foreach
for
map
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0
Browser/OS:
Chrome 136 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
foreach
698K/s
map
473K/s
for
363K/s
View exact numbers
Test name
Executions per second
✓
foreach
697,642 Ops/sec
map
473,208 Ops/sec
for
363,042 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and explain what's being tested, compared, and considered. **Benchmark Definition** The website MeasureThat.net provides a JSON representation of a benchmark, which consists of: 1. **Script Preparation Code**: This code is executed once to prepare the test environment. In this case, it creates an array `arr` with 1000 objects, each containing an `id` property. It also defines a function `someFn(i)` that takes an `i` value and returns `i * 3 * 8`. 2. **Html Preparation Code**: This is empty in the provided benchmark. **Individual Test Cases** The benchmark has three test cases: 1. **foreach** ```javascript arr.forEach(function (item) { item.data = someFn(item.id); }); ``` This test case uses the `forEach` method to iterate over the array and update each object's `data` property with the result of `someFn(item.id)`. 2. **for** ```javascript for (var i = 0, len = arr.length; i < len; i++) { arr[i].data = someFn(arr[i].id); } ``` This test case uses a traditional `for` loop to iterate over the array and update each object's `data` property with the result of `someFn(arr[i].id)`. 3. **map** ```javascript arr.map(function(item) { item.data = someFn(item.id); return item; }); ``` This test case uses the `map` method to create a new array and update each object's `data` property with the result of `someFn(item.id)`. **Comparison** The benchmark is comparing the performance of these three approaches: * **foreach**: Using the `forEach` method to iterate over the array. * **for**: Using a traditional `for` loop to iterate over the array. * **map**: Using the `map` method to create a new array and update each object's property. **Pros and Cons** Here are some pros and cons of each approach: 1. **foreach** * Pros: + Concise and easy to read + Iterates over the array in a natural way (i.e., from start to end) * Cons: + May not be as efficient as other approaches due to the method call overhead 2. **for** * Pros: + Can be more control-oriented and flexible + Avoids the overhead of method calls * Cons: + More verbose and harder to read than `foreach` 3. **map** * Pros: + Creates a new array with transformed data, which can be useful for certain use cases + Can be more efficient than `foreach` due to the way it uses iterators under the hood * Cons: + Requires creating an additional array, which can increase memory usage **Library and Special JS Feature** The benchmark does not explicitly use any libraries or special JavaScript features beyond what's considered standard (ECMAScript 2015 and later). **Other Alternatives** If you want to explore other alternatives, here are a few: 1. **Array.prototype.reduce()**: Instead of using `forEach` or `for`, you could use the `reduce()` method to accumulate the results. 2. **Set-based operations**: If the array size is very large, using set-based operations (e.g., `new Set(arr.map(someFn)).values().toArray()`) might be more efficient. Keep in mind that these alternatives may have different performance characteristics and trade-offs depending on your specific use case.
Related benchmarks
map vs forEach Chris v2b
Array loop vs foreach vs map with large array
Array.forEach vs Object.keys().forEach
Map.forEach vs Array.forEach vs Array.from(Map.prototype.values()).forEach
Comments
Confirm delete:
Do you really want to delete benchmark?