Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is difference between forEach() and map() method in JavaScript?
JavaScript provides several ways to loop through arrays. Two of the most commonly used methods are forEach() and map(). While both iterate through array elements, they serve different purposes and have distinct characteristics.
The forEach() Method
The forEach() method executes a callback function for each array element. It's designed for performing side effects like logging, updating DOM elements, or modifying external variables. Importantly, forEach() always returns undefined.
Syntax
array.forEach(function(element, index, array) {
// Execute code for each element
});
forEach() Example
<!DOCTYPE html>
<html>
<head>
<title>forEach Example</title>
</head>
<body>
<div id="result"></div>
<script>
var arr = [1, 2, 3, 4, 5];
// Using forEach to display elements
arr.forEach(function(element) {
var item = document.createElement('div');
item.innerText = 'Number: ' + element;
document.getElementById("result").appendChild(item);
});
// forEach returns undefined
var result = arr.forEach(function(element) {
return element * 2;
});
console.log('forEach return value:', result); // undefined
</script>
</body>
</html>
The map() Method
The map() method creates a new array by calling a callback function on each element and collecting the return values. It's designed for transforming data without modifying the original array.
map() Example
<!DOCTYPE html>
<html>
<head>
<title>map Example</title>
</head>
<body>
<div id="result"></div>
<script>
var arr = [1, 2, 3, 4, 5];
// Using map to create a new array
var doubledArr = arr.map(function(element) {
return element * 2;
});
console.log('Original array:', arr);
console.log('Doubled array:', doubledArr);
// Display the results
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = '<p>Original: [' + arr.join(', ') + ']</p>';
resultDiv.innerHTML += '<p>Doubled: [' + doubledArr.join(', ') + ']</p>';
</script>
</body>
</html>
Key Differences
| Feature | forEach() | map() |
|---|---|---|
| Return Value | undefined | New array |
| Purpose | Side effects (logging, DOM updates) | Data transformation |
| Original Array | Can modify (if you mutate elements) | Unchanged |
| Chaining | Cannot chain (returns undefined) | Can chain with other array methods |
When to Use Which
Use forEach() when:
- You need to perform side effects (console.log, DOM manipulation)
- You don't need a return value
- You're updating external variables or state
Use map() when:
- You need to transform array elements
- You want to create a new array
- You plan to chain with other array methods
Method Chaining Example
var numbers = [1, 2, 3, 4, 5];
// map() can be chained with other array methods
var result = numbers
.map(x => x * 2)
.filter(x => x > 5)
.map(x => x + 1);
console.log('Chained result:', result);
// forEach() cannot be chained (returns undefined)
// This would cause an error:
// numbers.forEach(x => console.log(x)).map(x => x * 2); // Error!
Chained result: [7, 9, 11]
Conclusion
Use forEach() for side effects and when you don't need a return value. Use map() for data transformation and when you need a new array. Choose map() for functional programming patterns and method chaining.
42K+ Views
