Difference between foreach and map in JavaScript

Working with an array is a very common task while programming. It is a collection of a large number of elements. To deal with the array we need to loop through it.

In JavaScript, there are multiple ways to loop through an array. Two of which are forEach and map methods.

Both of these methods have different purposes and are used in different cases. In this article, we will learn about the difference between forEach and map methods.

Table of Contents

1. forEach method
2. map method
3. Difference between forEach and map
4. Conclusion

forEach method

forEach method is specially designed to loop through an array and execute a function for each element in the array.

Syntax:

arrayName.forEach(function(currentValue, index, arr){
  // code block to be executed
})

It accepts a callback function as an argument. The callback function takes three arguments:

• currentValue - It is the current element being processed in the array.
• index (optional) - It represents the index value of the current element.
• arr (optional) - It is an array on which forEach method is called.

Let's see some examples:

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach(function(value, index, arr){
  console.log(value, index, arr);
})

Here is another example of forEach method that prints an element if it is even.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach(function(value){
  if(value % 2 == 0){
    console.log(value);
  }
})

You can use forEach in the following cases:

map method

Now let's look at the map method. It is similar to forEach method but it returns a new array based on the result performed on each element of the array.

The original array remains unchanged.

Syntax:

var newArray = arrayName.map(function(currentValue, index, arr){
  // code block to be executed
})

It also accepts a callback function that takes three arguments:

• currentValue - It is current element being processed in the array.
• index (optional) - It represets index value of current element.
• arr (optional) - It is array on which map method is called.

Here are some examples using map method:

let arr = [1, 2, 3, 4, 5];

let double = arr.map(function(value){
  return value * 2;
})
console.log(double);

The above example use map method to double each element of the array and return a new array.

Here is another example of map method that returns a new array with nth fibonacci number of each element of the array.

let arr = [1, 2, 3, 4, 5];

let fib = arr.map(function(value){
  return fibonacci(value);
})
// fibonacci function
function fibonacci(n){
  if(n <= 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fib);

You can use map in following cases:

Difference between forEach and map

Here is a table that highlights the difference between forEach and map method.

Conclusion

In summary, the main difference between forEach and map method is that map method returns a new array with modified elements whereas forEach method returns nothing but is a good choice for performing some task on each element of an array.

That's all for now. Keep learning and keep coding! 😇