Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
map vs forEach/push (1000 elements pure - cache)
(version: 0)
Benchmark.js
Comparing performance of:
map vs forEach/push vs inplace for (w cache)
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.arr = new Array({ length: 1000 }, (_, i) => `Option ${i + 1}`);
Tests:
map
const newArr = window.arr.map(element => ({ label: element, value: element }));
forEach/push
const newArr = []; window.arr.forEach(element => { newArr.push({ label: element, value: element }) })
inplace for (w cache)
for (let i=0; i < window.arr.length; i++) { const cache = window.arr[i] window.arr[i] = {label: cache, value: cache} }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
map
forEach/push
inplace for (w cache)
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0
Browser/OS:
Firefox 122 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505872" width="100%" height="500px"></iframe>
map
4.5M/s
forEach/push
4.2M/s
inplace for (w cache)
752K/s
View exact numbers
Test name
Executions per second
✓
map
4,499,338 Ops/sec
forEach/push
4,216,148 Ops/sec
inplace for (w cache)
751,769 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** MeasureThat.net is testing the performance of three different approaches to iterate over an array and transform its elements: 1. **Map**: The `map()` method creates a new array with the results of applying a provided function on every element in this array. 2. **forEach/push**: This approach uses the `forEach()` method to iterate over the array, and for each element, it pushes a transformed version of that element into a new array. 3. **In-place for loop with caching**: This approach uses a traditional `for` loop to iterate over the array, and for each element, it updates the original array by assigning a new object with the same value. **Options compared** These three approaches are being compared to determine which one is the fastest in terms of performance. The performance metrics used here include the number of executions per second (ExecutionsPerSecond) on different devices and browsers. **Pros and cons of each approach:** 1. **Map**: * Pros: Creates a new array, which can be more efficient when working with large datasets. * Cons: Requires extra memory allocation and copying of data. 2. **forEach/push**: * Pros: Can be more flexible and easier to implement than map, as it allows for the creation of an intermediate array. * Cons: Requires pushing elements into a new array, which can be slower and consume more memory. 3. **In-place for loop with caching**: * Pros: Does not create any additional arrays or objects, making it potentially faster and more memory-efficient. * Cons: Can be more complex to implement, especially when dealing with larger datasets. **Library used** None of the provided benchmark definitions use a specific library like Lodash or Ramda. However, the `map()` function is a built-in method in JavaScript that operates on arrays, so it's not considered as external library usage. **Special JS feature or syntax** There are no special features or syntaxes being tested here (e.g., ES6 classes, async/await, or generators). **Other alternatives** If you want to explore alternative approaches for transforming an array in JavaScript, here are a few options: 1. **Reduce**: A method that reduces the array to a single value by applying a function on each element. 2. **Filter**: A method that creates a new array with elements filtered based on a provided condition. 3. **Array.prototype.reduceRight** or **Array.prototype.filter()**: Similar methods to `reduce()` and `filter()`, but with opposite order of operations. When choosing an approach, consider factors like performance, memory usage, readability, and maintainability, depending on the specific requirements of your project.
Related benchmarks
map vs forEach/push (10 000 000 elements) fixed!
map vs forEach/push (1000 elements pure)
Comments
Confirm delete:
Do you really want to delete benchmark?