[JS] map과 forEach의 차이

---

JavaScript에서 배열을 다룰 때 자주 사용되는 메소드로 map과 forEach가 있습니다. 이 두 메소드는 배열의 각 요소에 대해 작업을 수행하며 유사해 보이지만, 그 차이점이 있습니다.

1. forEach 메소드

forEach 메소드는 각 배열 요소에 대해 주어진 함수를 실행합니다. 이 메소드는 반환 값이 없고, 단순히 배열의 각 요소에 대해 주어진 함수를 호출합니다.

const numbers = [1, 2, 3, 4];

numbers.forEach(function (num) {
  console.log(num * 2);
});

// 출력:
// 2
// 4
// 6
// 8

2. map 메소드

map 메소드는 새로운 배열을 생성하며, 각 요소에 대해 주어진 함수를 호출한 결과를 해당 요소의 값으로 갖습니다. map 메소드는 새로운 배열을 반환하기 때문에 기존 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled); // 출력: [2, 4, 6, 8]

차이점 정리

반환 값

• forEach: 반환 값이 없음(undefined).
• map: 새로운 배열을 반환하며, 각 요소에 대한 함수 호출 결과가 해당 요소의 값이 됨.

배열의 변경 여부

• forEach: 배열을 직접 변경하지 않음.
• map: 기존 배열을 변경하지 않고, 새로운 배열을 반환.

활용 시점

• forEach: 주어진 작업을 각 요소에 대해 실행하고자 할 때 사용.
• map: 각 요소에 대한 변형된 값을 가진 새로운 배열을 생성하고자 할 때 사용.

활용 예시

forEach

const colors = ['red', 'green', 'blue'];

colors.forEach(function (color) {
  console.log('Color:', color);
});

map

const numbers = [1, 2, 3, 4];

const squared = numbers.map(function (num) {
  return num ** 2;
});

console.log(squared); // 출력: [1, 4, 9, 16]

각 메소드는 자신만의 사용 시점과 적합한 상황이 있으므로, 상황에 맞게 적절히 선택하여 활용하면 됩니다.