Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
map vs forEach/push (1000 elements pure)
(version: 0)
Benchmark.js
Comparing performance of:
map vs forEach/push vs inplace for
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
for (let i=0; i < window.arr.length; i++) { window.arr[i] = {label: window.arr[i], value: window.arr[i]} }
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
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:123.0) Gecko/20100101 Firefox/123.0
Browser/OS:
Firefox 123 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=509470" width="100%" height="500px"></iframe>
map
3.7M/s
forEach/push
3.3M/s
inplace for
493K/s
View exact numbers
Test name
Executions per second
✓
map
3,747,554 Ops/sec
forEach/push
3,259,021 Ops/sec
inplace for
493,052 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Explanation** The provided JSON represents a JavaScript microbenchmark that compares the performance of three different approaches to iterate over an array and perform a transformation on each element: 1. `map()` 2. `forEach()` with `push()` 3. `inplace for` loop **Options Comparison** * **`map()`**: This approach uses the built-in `map()` method, which creates a new array with the results of applying the provided function to each element in the original array. + Pros: concise and efficient, as it avoids explicit iteration. + Cons: creates a new array, which can be memory-intensive for large datasets. * **`forEach()` with `push()`**: This approach uses the `forEach()` method to iterate over the array and push transformed elements onto a new array using the `push()` method. + Pros: flexible, as it allows for arbitrary transformations and side effects during iteration. + Cons: slower than `map()`, as it involves explicit pushes and potentially unnecessary allocations. * **`inplace for` loop**: This approach uses a traditional `for` loop to iterate over the array and assign transformed elements back to their original indices in the same array. + Pros: often faster, as it avoids creating new arrays or performing excessive allocations. + Cons: can be verbose and error-prone due to the need for indexing and assignment. **Library Usage** None of the benchmark test cases explicitly use any libraries. However, it's worth noting that `Array.prototype.map()` is a built-in method in JavaScript, while `Array.prototype.forEach()` is also a native method (albeit with some limitations compared to `map()`). **Special JS Features/Syntax** The benchmark test case uses the following feature: * **Arrow functions**: The `map()` and `forEach()` methods use arrow functions (`(_, i) => ...`), which are a shorthand syntax for defining small, anonymous functions. This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). **Alternative Approaches** Other approaches to iterate over an array and perform transformations on each element might include: * Using `Array.prototype.forEach()`, but without the `push()` method to create a new array. * Using a `while` loop or recursion instead of `map()` or `forEach()`. * Using libraries like Lodash or Ramda, which provide various utility functions for working with arrays. Keep in mind that these alternative approaches might have different trade-offs and characteristics compared to the benchmarked methods.
Related benchmarks
map vs forEach/push (1000 elements)
map vs forEach/push (10 000 000 elements) fixed!
map vs forEach/push (1000 elements) v2
Comments
Confirm delete:
Do you really want to delete benchmark?