This content originally appeared on DEV Community and was authored by Sylwia Laskowska
You know that moment when you stare at an array and think:
“Okay, I need to loop over this… but should I use map? or forEach? or maybe for...something?” 🤯
Relax. Here’s the plain English guide to looping like a pro — without sounding like a tutorial.
🧱 forEach — when you want to do something but don’t need a result
Think of it like “run this code for every element, and don’t expect anything back.”
const users = ['Alice', 'Bob', 'Charlie'];
users.forEach(user => {
console.log('Sending welcome email to', user);
});
✅ Use when:
you’re logging something
updating state
doing side effects
❌ Don’t use when:
you need to return something — because forEach returns… nothing.
you want to stop the loop early — break and return won’t help you here 😭
const result = users.forEach(u => u.toUpperCase());
console.log(result); // undefined 😭
🎨 map — when you want to build a new array
map is like a copy machine for arrays:
it takes each element, transforms it, and gives you back a new array.
const userEmails = users.map(user => `${user.toLowerCase()}@example.com`);
console.log(userEmails);
// ['alice@example.com', 'bob@example.com', 'charlie@example.com']
✅ Use when:
you’re transforming data
you actually care about the result
you want to keep the original array intact
💡 map always returns an array of the same length — even if you return undefined for some elements.
❌ Don’t use when:
you’re just doing side effects (use forEach for that).
you want to filter elements out (use filter() instead).
🚀 for...of — when you want full control
This one is the flexible workhorse.
You can stop it, skip stuff, or even await inside it.
for (const user of users) {
if (user === 'Bob') continue; // skip Bob
console.log('Processing user:', user);
}
✅ Use when:
you need break, continue, or await
you’re looping over arrays, sets, maps, or even strings
💡 Bonus: works great with async code — just remember it’s sequential:
each await waits for the previous one to finish.
for (const user of users) {
await sendEmail(user);
}
If you want to run all async tasks at once, use Promise.all(users.map(...)) instead.
🔢 entries() — when you need both index and value
Sometimes you want to know where you are in the array —
but writing for (let i = 0; i < array.length; i++) feels ancient.
Use entries() instead:
for (const [index, user] of users.entries()) {
console.log(`#${index}: ${user}`);
}
Clean, readable, and makes you look like you know what you’re doing 😎
💬 Bonus tip:
If you’re about to write for...in for an array — stop.
That’s for objects, not arrays. Seriously.
This content originally appeared on DEV Community and was authored by Sylwia Laskowska
Sylwia Laskowska | Sciencx (2025-10-06T20:23:32+00:00) Beginner’s Guide #2: When to Use forEach, map, for…of, and entries() — Explained Like You’re Five. Retrieved from https://www.scien.cx/2025/10/06/beginners-guide-2-when-to-use-foreach-map-for-of-and-entries-explained-like-youre-five/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.