Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference Between forEach and map Method in JavaScript
JavaScript provides several ways to loop through arrays and objects. The most common way is the for loop, which is used to iterate through the elements of an array or object. However, there are other ways to loop through arrays and objects, such as the forEach() and map() methods.
The forEach() Method
The forEach() method is used to loop through each element of an array or object. The forEach() method takes a callback function as an argument. The callback function is invoked for each element of the array or object.
The forEach() method is similar to the for loop, but it does not have a return value.
Example
Below is the full working code with an explanation
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
var arr = [1,2,3,4,5];
arr.forEach(function(element){
var item2 = document.createElement('div');
item2.innerText = element;
document.getElementById("result").appendChild(item2);
});
</script>
</body>
</html>
In the above code, we have defined an array named “arr”. The forEach() method is called on the “arr” array. The forEach() method takes a callback function as an argument. The callback function is invoked for each element of the “arr” array.
The map() Method
The map() method is used to loop through each element of an array or object. The map() method takes a callback function as an argument. The callback function is invoked for each element of the array or object.
The map() method is similar to the forEach() method, but it returns a new array.
Example
Below is the full working code with an explanation -
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
var arr = [1,2,3,4,5];
arr.map(function(element){
var item2 = document.createElement('div');
item2.innerText = element;
document.getElementById("result").appendChild(item2);
});
</script>
</body>
</html>
In the above code, we have defined an array named “arr”. The map() method is called on the “arr” array. The map() method takes a callback function as an argument. The callback function is invoked for each element of the “arr” array. The return value of the callback function is stored in a new array named “newArr”.
map() vs forEach()
Some of the difference between map() and forEach() methods are listed below
The map() method returns a new array, whereas the forEach() method does not return a new array.
The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array.
The map() method can be used with other array methods, such as the filter() method, whereas the forEach() method cannot be used with other array methods.
Conclusion
In conclusion, the forEach() and map() methods are both used to loop through arrays and objects. The forEach() method does not return a new array, whereas the map() method returns a new array. The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array.
42K+ Views
