Array .forEach() / map()

// Executes a function for each element in an array.
arr.forEach(function(element, index, arr) {
	// process
});

// Transforms each element and creates a new array.
var newArray = arr.map(function(element, index, arr) {
	return transformedValue;
});

sample_forEach.js

// Pattern 1: Print each element with its index using forEach
var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num, index) {
	console.log(index + ": " + num);
});

// Pattern 2: Use map to transform each element into a new array
// Double each element.
var doubled = numbers.map(function(num) {
	return num * 2;
});
console.log(doubled); // Outputs "2,4,6,8,10".
console.log(numbers); // Outputs "1,2,3,4,5". The original array is unchanged.

// Pattern 3: Use forEach on an array of objects
var fighters = [
	{ name: "Son Goku", power: 9000 },
	{ name: "Vegeta", power: 8500 },
	{ name: "Piccolo", power: 3500 }
];
fighters.forEach(function(fighter) {
	console.log(fighter.name + ": Power level " + fighter.power);
});

// Pattern 4: Use map to extract a specific property from an object array
var names = fighters.map(function(fighter) {
	return fighter.name;
});
console.log(names); // Outputs "Son Goku,Vegeta,Piccolo".

// Pattern 5: Use map to produce a new object array with additional properties
var labeled = fighters.map(function(fighter, index) {
	return { rank: index + 1, name: fighter.name, power: fighter.power };
});
console.log(labeled[0]); // Outputs "{rank: 1, name: "Son Goku", power: 9000}".

0: 1
1: 2
2: 3
3: 4
4: 5
[ 2, 4, 6, 8, 10 ]
[ 1, 2, 3, 4, 5 ]
Son Goku: Power level 9000
Vegeta: Power level 8500
Piccolo: Power level 3500
[ 'Son Goku', 'Vegeta', 'Piccolo' ]
{ rank: 1, name: 'Son Goku', power: 9000 }

Both array.forEach() and array.map() execute a function for each element in an array, but they serve different purposes. array.forEach() is used simply to loop through elements and returns no value. array.map(), on the other hand, transforms each element to build a new array and does not modify the original array.

The callback function receives three arguments: the first is the value of the current element, the second is its index, and the third is the array itself. The second and third arguments are optional and can be omitted if not needed.

Unlike a for loop, array.forEach() provides no way to stop the loop early. The break statement cannot be used, and a return statement only skips the current iteration. If you need to stop when a condition is met, use a for loop or consider using array.some().