map vs foreach in JavaScript

JavaScript

In this article we will explain map vs forEach in JavaScript. This is the most common question which is asked in the interview i.e difference between map & foreach in JavaScript. In previous article we have explained var let & const in JavaScript.

forEach

.forEach() executes a provided function once for each element of an array and does not returns anything i.e. it returns undefined.

Iterate array in forEach using callback function

const array = ['HTML', 'CSS'];

function iterate(item, index) {
	console.log(item + ' index is ' + index)
}
array.forEach(iterate); 

// Output - 'HTML index is 0' 'CSS index is 1' 

=================================================================

const array = ['HTML', 'CSS', 'JavScript'];

array.forEach(function (item, index) {
	console.log(item + ' index is ' + index) 
});

// Output - 'HTML index is 0' 'CSS index is 1' 

=================================================================

const array = ['HTML', 'CSS'];

const newArray = array.forEach(function (item) {
	return item
});
console.log(newArray) // Output - undefined

In this example you have seen, we have passed the itearte function as a parameter in forEach loop. So here is iterate function is a callback function. we will discuss later about callback.

Iterate array in forEach using arrow function

we can iterate the item of array with arrow function. Arrow function is the new feature of ES6.

const array = ['HTML', 'CSS'];

array.forEach((item, index) => {
	console.log(item + ' index is ' + index) 
});

// Output - 'HTML index is 0' 'CSS index is 1' 

===============================================================

const array = ['HTML', 'CSS'];

const newArray = array.forEach((item) => {
	return item
});
console.log(newArray) // Output - undefined

Arrow function also returns undefined in forEach loop. So this is the main drawback of forEach loop in programming. ES6 introduced map to resolve this problem in JavaScript.

map

.map() executes a provided function on every element of an array and returns a new array.

Iterate array in map using callback function

const array = ['HTML', 'CSS'];
 
function iterate(item, index) {
    console.log(item + ' index is ' + index)
}
array.map(iterate); 

// Output - 'HTML index is 0' 'CSS index is 1' 

=============================================================

const array = ['HTML', 'CSS'];

array.map(function (item, index) {
	console.log(item + ' index is ' + index) 
});

// Output - 'HTML index is 0' 'CSS index is 1' 

=============================================================

const array = ['HTML', 'CSS'];

const newArray = array.map((item) => {
	return item
});
console.log(newArray) // Output - ['HTML', 'CSS']

Iterate array in map using arrow function

we can iterate the item of array with arrow function in map.

const array = ['HTML', 'CSS'];

array.map((item, index) => {
	console.log(item + ' index is ' + index) 
});

// Output - 'HTML index is 0' 'CSS index is 1' 

==============================================================

const array = ['HTML', 'CSS'];

const newArray = array.map((item) => {
	return item
});
console.log(newArray) // Output - ['HTML', 'CSS']

So map returns a new array with updated value and doesn’t modify the original array.

Conclusion

So in this tutorial you have seen, In forEach loop we have put the console inside the loop to log the value of element from an array while in map we put console outside of the loop.

If you want to change or alter data from an array then you can use map otherwise you can use forEeach to iterate the elements of an array.

So forEach doesn’t return anything i.e. undefined but map returns new array.

In this article you have learned map vs foreach in JavaScript. If you want to improve or find anything wrong/incorrect in this article then please leave a message using below comment box.



Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − 11 =