[JavaScript] forEach()와 map()에 대하여

forEach 메서드

forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다. 반환 값이 없으며, 단순히 배열을 순회하면서 작업을 수행할 때 사용된다.

사용법

let numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});
// 출력: 1 2 3 4 5

위 코드에서 forEach는 배열의 각 요소를 순회하면서 console.log를 통해 요소를 출력한다.

예제: 배열 요소 합계 구하기

let sum = 0;
numbers.forEach((number) => {
  sum += number;
});
console.log(sum);
// 출력: 15

이 예제에서는 forEach를 사용하여 배열의 각 요소를 더해 합계를 계산한다.

예제: 배열 요소와 인덱스 출력하기

forEach 메서드는 콜백 함수에 세 가지 인자를 전달한다: 현재 요소 (element), 인덱스 (index), 배열 (array).

numbers.forEach((number, index, array) => {
  console.log(`Element: ${number}, Index: ${index}, Array: ${array}`);
});
// 출력:
// Element: 1, Index: 0, Array: 1,2,3,4,5
// Element: 2, Index: 1, Array: 1,2,3,4,5
// Element: 3, Index: 2, Array: 1,2,3,4,5
// Element: 4, Index: 3, Array: 1,2,3,4,5
// Element: 5, Index: 4, Array: 1,2,3,4,5

이 예제에서는 forEach를 사용하여 배열의 각 요소와 그 인덱스, 그리고 전체 배열을 함께 출력한다.

map 메서드

map 메서드는 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 원본 배열은 변경되지 않으며, 변환된 새로운 배열을 얻고자 할 때 사용된다.

사용법

let doubled = numbers.map((number) => {
  return number * 2;
});
console.log(doubled);
// 출력: [2, 4, 6, 8, 10]

위 코드에서 map은 배열의 각 요소를 두 배로 만든 새로운 배열을 반환한다.

예제: 문자열 배열을 대문자로 변환하기

map 메서드는 콜백 함수에 세 가지 인자를 전달한다: 현재 요소 (element), 인덱스 (index), 배열 (array). 하지만 주로 반환 값을 처리하는 데 중점을 둔다.

let words = ['hello', 'world'];
let uppercasedWords = words.map((word, index, array) => {
  return word.toUpperCase();
});
console.log(uppercasedWords);
// 출력: ['HELLO', 'WORLD']

이 예제에서는 map을 사용하여 문자열 배열의 각 요소를 대문자로 변환한 새로운 배열을 생성한다.

forEach와 map의 차이점

• 반환 값: forEach는 반환 값이 없고, map은 새로운 배열을 반환한다.
• 목적: forEach는 단순히 배열을 순회하며 작업을 수행하는 데 사용되며, map은 배열을 변환하여 새로운 배열을 얻는 데 사용된다.
• 불변성: forEach와 map 모두 원본 배열을 변경하지 않지만, map은 변환된 값을 포함하는 새로운 배열을 반환한다.
• 전달 인자: forEach와 map 메서드는 콜백 함수에 현재 요소 (element), 인덱스 (index), 배열 (array)의 세 가지 인자를 전달한다. 하지만 map은 주로 각 요소를 변환하여 새로운 배열을 만드는 데 중점을 둔다.

forEach와 map의 올바른 사용 시기

• forEach를 사용할 때: 주로 배열의 각 요소에 대해 부수 효과(side effect)를 발생시키는 작업(예: 콘솔 출력, DOM 조작, 변수 변경 등)을 수행할 때 적합하다. 반환 값이 필요 없고 단순히 작업을 반복 실행하는 것이 목적일 때 사용된다.

  let items = ['apple', 'banana', 'cherry'];
  items.forEach((item, index) => {
    console.log(`Item at index ${index}: ${item}`);
  });
  // 출력:
  // Item at index 0: apple
  // Item at index 1: banana
  // Item at index 2: cherry

• map을 사용할 때: 배열의 각 요소를 변환하여 새로운 배열을 만들고자 할 때 적합하다. 예를 들어, 배열의 각 요소를 일정한 규칙에 따라 변환하여 새로운 배열을 생성하는 경우 사용된다.

  let prices = [100, 200, 300];
  let withTax = prices.map((price) => {
    return price * 1.1;
  });
  console.log(withTax);
  // 출력: [110, 220, 330]

이러한 예제와 설명을 통해 forEach와 map 메서드의 차이점과 사용 시기를 이해하고, 상황에 맞게 적절히 사용할 수 있다.