Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
forEach vs map by cuteLuna v2
(version: 1)
Benchmark.js
Comparing performance of:
map vs forEach vs for loop
Created:
2 years ago
by:
Registered User
Go to the latest result
Tests:
map
const cuteObject = { [1]: [ { name: 'luna', id: 135 } ], [3]: [ { name: 'fat', id: 136 } ] }; const newList = Object.keys(cuteObject).map(key => { const options = cuteObject[key].map(item => ({ label: item.name, name: item.name, id: item.id, })); return { label: key, options: options, }; });
forEach
const cuteObject = { [1]: [ { name: 'luna', id: 135 } ], [3]: [ { name: 'fat', id: 136 } ] }; const newList = []; Object.keys(cuteObject).forEach(key => { const options = []; cuteObject[key].forEach(item => { options.push({ label: item.name, name: item.name, id: item.id, }); }); newList.push({ label: key, options: options, }); });
for loop
const cuteObject = { [1]: [ { name: 'luna', id: 135 } ], [3]: [ { name: 'fat', id: 136 } ] }; const newList = []; const keys = Object.keys(cuteObject); const keysLength = keys.length; for (let i = 0; i < keysLength; i++) { const key = keys[i]; const options = []; const items = cuteObject[key]; const itemsLength = items.length; for (let j = 0; j < itemsLength; j++) { const item = items[j]; options.push({ label: item.name, name: item.name, id: item.id, }); } newList.push({ label: key, options: options, }); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
map
forEach
for loop
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=492591" width="100%" height="500px"></iframe>
for loop
1.7M/s
map
1.7M/s
forEach
1.7M/s
View exact numbers
Test name
Executions per second
✓
for loop
1,737,686 Ops/sec
map
1,725,396 Ops/sec
forEach
1,679,411 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark. **Benchmark Definition** The benchmark is defined by the user, `cuteLuna v2`, and consists of three test cases: 1. **`map`**: This test case uses the `Object.keys()` method to get an array of keys from the object, and then maps over each key to create a new array of objects. 2. **`forEach`**: This test case uses the `Object.keys()` method to get an array of keys from the object, and then iterates over each key using a `for...of` loop to push objects onto a new array. 3. **`for loop`**: This test case manually iterates over the keys using a traditional `for` loop. **Library** There is no explicit library mentioned in the benchmark definition. However, it does use some built-in JavaScript features such as `Object.keys()` and `Array.prototype.forEach()` (note that `forEach()` is not a standard method on arrays, but rather a method on the prototype of arrays). **Special JS Feature or Syntax** None of the test cases explicitly use any special JavaScript features or syntax. **Options Compared** The benchmark compares three different approaches to iterate over an object's keys: 1. **`map()`**: This approach uses `Object.keys()` to get an array of keys and then maps over each key using the `Array.prototype.map()` method. 2. **`forEach()`**: This approach uses `Object.keys()` to get an array of keys and then iterates over each key using a `for...of` loop with `Array.prototype.forEach()`. 3. **Traditional `for` loop**: This approach manually iterates over the keys using a traditional `for` loop. **Pros and Cons** Here are some pros and cons for each approach: 1. **`map()`**: * Pros: concise, readable, and easy to maintain. * Cons: may have performance overhead due to the creation of a new array. 2. **`forEach()`**: * Pros: similar to `map()`, but allows for early exit if a condition is met. * Cons: may not be as efficient as traditional loops since it creates an iterator object. 3. **Traditional `for` loop**: * Pros: low overhead, easy to optimize for performance. * Cons: less readable and maintainable compared to other approaches. **Other Considerations** When choosing between these approaches, consider the following factors: * Performance: If you're working with large datasets, traditional loops might be a better choice. For smaller datasets, `map()` or `forEach()` might be sufficient. * Readability and maintainability: `map()` and `forEach()` are often more readable and easier to understand, especially for developers without extensive experience with loops. **Alternatives** If you want to explore other approaches, here are some alternatives: 1. **`reduce()`**: Instead of using a loop or `map()`, consider using `Array.prototype.reduce()` to create an array from the object's keys. 2. **`Set` objects**: If you need to work with unique values, consider using `Set` objects instead of arrays. 3. **`Promise.all()`**: For async operations, consider using `Promise.all()` to wait for all promises to resolve. Keep in mind that these alternatives might not be as straightforward or efficient as the original approaches, so it's essential to evaluate their pros and cons before implementing them.
Related benchmarks
map vs forEach Chris v2b
JS Map foreach vs for of
Comments
Confirm delete:
Do you really want to delete benchmark?