In this article, we are going to understand the difference between the forEach and map methods in JavaScript. how to use them loop through an array and also which one to use depending on what you want to achieve. JavaScript has a different method of looping an array. we also have for loop but we are going to focus only on these two.

• forEach

• map

forEach - this is an es6 method that was introduced to JavaScript. this type of method iterates every single item in the array but returns nothing at the end. it is like you eating bread, you chewed and swallow every piece of it until you are satisfied. but when asked to return the bread you eat back. the bread will be no were to be found. this type of method is mostly used for side effects.

const food = ["rice", "meat", "beans", "eggs"]

const resultA = food.forEach(item => { console.log(item) })
console.log(resultA)

//output:
// rice
// meat
// beans
// eggs
// undefined

const result = food.forEach(item => { return item })
console.log(resultB)

// output:
// undefined

In the code above we get undefined when we stored it in a variable but when we console each item we get the items. Remember earlier forEach doesn’t return anything. so, nothing is stored in the variable

 const uppercaseNames = [];

 const result = names.forEach(name => {
   if (name === name.toLowerCase()){
     return name
   }
 });
 console.log(result)

// output:
// undefined

In the code above we get undefined because for does not return anything, so thus it can’t be used.

map - this type of method was also introduced by es6 in JavaScript. It's the same as the forEach method but it doesn’t swallow the whole item in the array like forEach. instead, it returns it to a new array so it can be used later and can also be used by other methods well.

const mapResult = food.map(item => console.log(item))
console.log(mapResult)

// output:
// rice
// meat
// beans
// eggs
// [undefined, undefined, undefined, undefined]

In the code, we get a list of each item in the food array and an array of undefined when consoling the result. we get an array of undefined. because the item was not returned back, instead, it was consoled and the Map method creates a new array.

let's take another example to understand more.

const mapResult = food.map(item => { return item })
console.log(mapResult)

// output:
// [rice, meat, beans, eggs]

in the code above, this time the food item is in a new array because it was returned.

here’s what we can also do with the Map method. we can also add another method to it. in the code below we are checking for a name with lowercase characters using the map and toLoweCase method.

  const uppercaseNames = [];

  const result = names.map(name => {
    if (name === name.toLowerCase()){
      return name
    }
  });
  console.log(result)

// output:
// ['john', undefined, 'Philip', 'sean', undefined, undefined]

in the output, we get an array of undefined, names with smaller characters.

let’s wrap it all up.

• forEach method has a side effect, the original array has been changed.

• The map has no side effect, it returns an instance of an array and stores it in a new array.

• forEach can't be used with other methods

• map method can be used with other methods.

That’s all for this article hope you found something useful. if you like it, follow me here or @Emmauzoezie on Twitter for more topics like this.