map, foreach and reduce difference in javascript

map(), forEach(), and reduce() are array methods in JavaScript, each serving a distinct purpose.

1️⃣ map()

• Creates a new array by transforming each element.
• Returns a modified array without changing the original.

Example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

2️⃣ forEach()

• Iterates over an array but does not return anything.
• Used when you need to execute a function on each element (like logging data).

Example:

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); 
// Logs: 2, 4, 6, 8

Unlike map(), there’s no new array—forEach() just loops.

3️⃣ reduce()

• Reduces the array into a single value (sum, product, etc.).
• Takes an accumulator and a current value to compute a result.

Example: Sum of array elements

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Here, reduce() accumulates values (acc) and returns the final sum.

🚀 Key Differences

If you're manipulating data (map()), looping for side effects (forEach()), or computing a single result (reduce()), each method has its place!