오늘은 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를 리턴한다.
