Skip to main content

Should I use forEach() or map()?

Published 2021/03/28 15:46

If you're learning Javascript, sooner or later you'll come across the forEach() and map() functions. It is quite often that there is some confusion about what each one does. What we know for certain is that they are both ways to take all elements in an array and do something with each element individually.

So how are they different?

To explain, let's start with an array, since both functions deal with looping through arrays:

let names = ["Savvas", "Laura", "Morgan"]

Above I've initialised an array that contains three names.

Now let's say, you just need to print these three names. The straightforward solution to this is to use forEach()! And you'll be right! forEach() is the best way to do this.

It looks like this:

names.forEach((name) => {

Same if you need to do something slightly more complex, like storing these names into a database:

names.forEach((name) => {

Now let's suppose that you want to create a new array, but with all the names in names in lowercase. If we were to use forEach(), we would need to:

  • Create an empty array lowercaseNames
  • Loop through the names array using forEach
  • For each item, turn the name into lowercase and store it into the empty array

So the code would look like this:

let lowercaseNames = []

names.forEach((name) => {
    let nameInLowercase = name.toLowerCase()

Which could work, but the solution seems a bit complex and not-so straightforward. Also, creating an empty array and populating it works, but it doesn't look particularly clean.

What if there was a better way of saying:

I want to do something with each element in an array and I want to get back an array of the same length as a result

You can do this… with map()!

map() is basically an easy way to loop through an array, but for each element, something is returned.

For example, we can say:

Return the lowercase version of each element in the names array.

It would look something like this: => {
    let nameInLowercase = name.toLowerCase()
    return nameInLowercase

That's it! And since at the end, everything that is returned gets stored in a new array, we can just initialise it like so:

let lowercaseNames = => {
    var nameInLowercase = name.toLowerCase()
    return nameInLowercase

It's that simple! Isn't this much nicer than the above example with forEach()?

I hope this short post made forEach and map a little easier to understand! 👋

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik