Beginner’s Guide #2: When to Use forEach, map, for...of, and entries() — Explained Like You’re Five

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 😭

⚠️ Heads up: forEach ignores await, so your async code won’t run in order. Use for...of instead

🎨 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);
// ['[e-mail]', '[e-mail]', '[e-mail]']

✅ 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.

Comments

[Arvin Jay Romero]

Perfect description!
It's really helpful.

[Sylwia Laskowska]

Thanks a million :)

[Javad Safari]

Awesome post but i think you missed smth, forEach doesn't work for async operations as well, god knows how many times i wasted my time debugging and missed this tiny point

[Sylwia Laskowska]

Ah, great spot! Just updated the post to clarify that part :)

[Javad Safari]

Awesome, keep it up 🙌