[TIL] map과 foreach의 차이?

오늘은 map 과 foreach 의 차이에 대해 알아볼 것이다.

---

🟡 알아보기 전에

먼저, 두 함수 모두 함수형 프로그래밍을 위한 메서드라고 한다.
함수형 프로그래밍은 프로그래밍 패러다임 중 하나로, 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태변경을 피하려는 프로그래밍 이라고 한다.
(함수형 프로그래밍이 뭔지 궁금해 참조한 사이트)

---

🟡 Array.prototype.forEach()

• forEach() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행한다.
  이 메서드는 배열을 변경하지 않으며, 각 요소에 대해 한 번씩만 콜백 함수를 호출한다.
• 즉, forEach() 메서드는 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 호출한다. 아무 값도 반환하지 않는다.

array.forEach(callback(currentValue [, index [, array]])[, thisArg])

• array : forEach() 메서드를 호출한 배열

• callback : 각 요소에 대해 실행될 콜백 함수

• currentValue : 현재 처리중인 요소의 값

• index : 현재 처리중인 요소의 인덱스

• thisArg : 콜백함수 내에서 this 로 사용될 값, 생략될 경우 undefined 로 설정

• 예제

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

numbers.forEach(function(number) {
  console.log(number);
});

// 출력 결과:
// 1
// 2
// 3
// 4
// 5

• 위 예제에서 forEach() 메서드는 numbers 배열의 각 요소에 대해 주어진 콜백 함수를 실행한다.
  각 요소는 number 매개변수에 할당되며, 이 예제에서는 console.log() 함수를 사용하여 각 요소를 출력한다. 따라서 출력 결과는 1, 2, 3, 4, 5 이다.

---

🟡 Array.prototype.map()

• map() 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 여기서 forEach 와 다른점은, map 은 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다는 점이다.
• 이 메서드는 원본 배열의 요소를 변경하지 않는다.

array.map(callback(currentValue[, index[, array]])[, thisArg])

• array : map() 메서드를 호출한 배열

• callback : 각 요소에 대해 실행될 콜백 함수

• currentValue : 현재 처리중인 요소의 값

• index : 현재 처리중인 요소의 인덱스

• thisArg : 콜백함수 내에서 this로 사용될 값, 생략시 undefined

• 예제

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

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers);

// 출력 결과:
// [2, 4, 6, 8, 10]

• 위 예제에서 map() 메서드는 numbers 배열의 각 요소에 대해 주어진 콜백 함수를 호출하여 새로운 배열 doubledNumbers를 생성한다.
  각 요소는 number 매개변수에 할당되며, 이 예제에서는 각 요소를 두 배로 만드는 return number * 2 구문을 사용하여 처리된다. 따라서 출력 결과는 [2, 4, 6, 8, 10] 이다.
• map() 메서드는 새로운 배열을 만들어 반환하기 때문에, 원본 배열을 변경하지 않는다.
  이러한 특성은 원본 데이터를 보존하면서 데이터 변환을 쉽게 할 수 있도록 도와준다!

---

결론! 차이점?

• forEach()와 map() 메서드는 모두 배열의 각 요소에 대해 주어진 콜백 함수를 실행하지만, 그 결과는 다르다.

• 차이점

  • forEach 는 주어진 콜백함수를 배열의 각 요소에 대해 한번 씩 실행한다. 이 때, 주어진 콜백함수는 어떠한 값도 반환하지 않는다.
  • 즉, 단순히 배열의 각 요소에 대해 주어진 콜백함수를 실행하고 배열 자체는 변경하지 않는다.
  • map 은 주어진 콜백함수를 배열의 각 요소에 대해 한번씩 실행하며, 이 때 주어진 콜백함수의 실행결과를 모아서 새로운 배열을 만든다.

• 진짜최종결론.text

  • forEach 메서드는 단순히 반복문을 대체하기 위한 함수이며 데이터를 변경하는 것이 아니라 데이터베이스에 저장하는 작업에 유용할 수 있다.
  • map 메서드는 새로운 배열을 반환하므로 데이터를 변경할 때 유용한 메서드이다.
    여기서 새로운 배열을 반환한다는 것은, filter 등의 다른 메서드들과 유용하게 사용될 수 있다.
  • forEach()는 콜백함수로 현재 Array를 변환할 수 있으며,
    map()은 새로운 Array를 리턴한다.