Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Hungry js map vs forEach
(version: 0)
Comparing performance of:
map vs forEach
Created:
7 years ago
by:
Guest
Go to the latest result
Script Preparation code:
// Create sample data var array = []; array.forEach( i => array.push(i) ); var manipulateFn = num => { return num * 2 * 3; }
Tests:
map
var newArray = array.map( i => manipulateFn(i));
forEach
array.forEach( i => { manipulateFn(i); });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
map
forEach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 26_3_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/145.0.7632.108 Mobile/15E148 Safari/604.1
Browser/OS:
Chrome Mobile iOS 145 on iOS 26.3.0
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626075" width="100%" height="500px"></iframe>
forEach
497.3M/s
map
59.2M/s
View exact numbers
Test name
Executions per second
✓
forEach
497,333,984 Ops/sec
map
59,229,580 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and considered. **Benchmark Overview** The test compares the performance of two approaches to manipulate an array: `forEach` and `map`. The sample data is created using the preparation code, which initializes an empty array `array` and populates it with numbers using a closure function `manipulateFn`. **Options Compared** The benchmark tests the following options: 1. **`forEach`**: Iterates over each element in the array, applying the `manipulateFn` to each one. 2. **`map`**: Creates a new array by transforming each element in the original array using the `manipulateFn`. **Pros and Cons** * **`forEach`**: + Pros: Easy to understand, straightforward approach. It's often used for iteration when you don't need to collect the results. + Cons: Can be slower than `map` because it iterates over the array multiple times (once per element), which can lead to unnecessary computations and memory allocations. * **`map`**: + Pros: More concise, efficient way to transform an array. It returns a new array with the results, making it easier to work with. + Cons: Can be less intuitive for beginners, as it changes the original array. **Library and Special JavaScript Features** There are no specific libraries used in this benchmark. However, some special JavaScript features are employed: * **Closure**: The `manipulateFn` is defined inside another function (the preparation code), which creates a closure. This allows the `manipulateFn` to access the outer scope's variables. * **Template Literals** (`\r\n\t`): Used in the benchmark's preparation code for formatting. **Other Considerations** The benchmark doesn't account for factors like: * Array size and its impact on performance * Browser-specific optimizations or quirks * The specific use case of manipulating arrays (e.g., if you need to keep track of original indices) **Alternatives** Some alternative approaches to manipulating arrays include: * Using a `for` loop: `for (var i = 0; i < array.length; i++) { manipulateFn(array[i]); }` * Using `reduce()`: `array.reduce((acc, curr) => acc + manipulateFn(curr), 0)` * Using `every()` and `some()`: These methods can be useful for iterating over arrays, but they're not as straightforward to use as `forEach` or `map`. Keep in mind that the performance difference between these approaches may vary depending on the specific scenario and implementation details.
Related benchmarks
map vs forEach Chris v2b
Map.forEach vs Array.forEach vs Array.from(Map.prototype.values()).forEach
Comments
Confirm delete:
Do you really want to delete benchmark?