외곈 World 👽🌏

# 요약

• 단순히 무언가를 반복하면서 작업을 수행할 때 ➡ forEach (원본 배열 변경되지 않음 / 새로운 배열 반환하지 않음)
• 원본 배열을 변경하지 않고 변형된 데이터를 따로 사용할 필요가 있을 때 ➡ map (원본 배열 변경되지 않음 / 새로운 배열 반환)

✅ forEach

• 배열의 각 요소에 대해 특정 작업을 수행할 때 사용한다.

const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2); // 2, 4, 6 출력
});
console.log(numbers); // [1, 2, 3] 원본 배열은 그대로!

• forEach는 배열의 요소들을 순회하면서 각 요소를 2배로 계산해서 출력하지만, 새로운 배열을 반환하지 않는다.
  (원본 배열은 변경되지 않음)
• 원본 배열을 유지하면서, 단순히 반복 작업을 수행할 때 사용(데이터를 화면에 출력하거나, 로그 찍을 경우 사용됨)

✅ map

• 배열의 각 요소에 대해 작업을 수행하고, 그 결과를 새로운 배열로 반환할 때 사용한다.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6] 변형된 데이터를 새 배열로 반환
console.log(numbers); // [1, 2, 3] 원본 배열은 그대로 유지!

• map은 배열을 순회하며 각 요소를 2배로 만들어 새로운 배열을 반환한다.
• 원본 배열을 그대로 두고 새로운 배열을 생성한다.
  ➡ 원본 배열을 변경하지 않음으로 데이터 손실 막을 수 있고, 변형된 데이터를 재사용하거나 어딘가 저장할 때 유용하다.
  (ex: 가격 데이터를 변형해서 할인가를 계산한 후, 이를 새로운 배열로 저장 가능)

🔥 map을 사용해야 할 상황에서 forEach를 사용하는 경우 발생하는 문제

1. 변형된 데이터를 얻을 수 없다.

forEach는 단순히 배열의 각 요소를 순회하면서 작업을 수행할 뿐이므로, 변형된 데이터를 저장하거나 재사용할 수 없다.

const numbers = [1, 2, 3];
const doubled = numbers.forEach(num => num * 2);
console.log(doubled); // undefined

forEach를 사용하면 새로운 배열을 반환하지 않기 때문에 doubled 변수는 undefined가 된다.
변형된 데이터를 배열로 얻으려는 상황에서 forEach를 사용하면, 데이터를 따로 저장할 수 없다.

const numbers = [1, 2, 3];
numbers.forEach(num => {
  num = num * 2; // 작업은 수행되지만
});
console.log(numbers); // [1, 2, 3] 원본 배열은 여전히 그대로

변형된 데이터를 저장할 수 없으니 재사용도 당연 불가..

2. 코드가 복잡해지고 가독성이 떨어진다.

map은 "변형된 배열을 반환"하는 명확한 목적을 가지고 사용된다. 반면, forEach는 주로 "배열을 순회하면서 작업을 수행"할 때 사용된다. 이런 차이를 무시하고 forEach를 변형 작업에 사용하면, 코드의 의도가 불분명해지고, 이는 결국 코드의 가독성을 떨어뜨리게 된다.

const numbers = [1, 2, 3];
let doubled = [];
numbers.forEach(num => {
  doubled.push(num * 2);
});

forEach로 새로운 배열을 만들기 위해서는 직접 배열을 생성하고 각각의 요소를 배열에 넣는 작업을 해야 한다. 코드는 복잡해지고 가독성은 떨어지기 때문에 이 경우 map을 사용하는 것이 더 직관적이고 의도가 명확하다.