자바스크립트의 map(), filter(), reduce()는 배열을 다루는 데 유용한 고차 함수(higher-order function)들이다.
각각의 함수는 배열의 요소를 변환, 필터링, 축적하는 데 사용되며, 함수형 프로그래밍 스타일로 코드를 간결하고 가독성 있게 만들어준다.
1. map()
`map()` 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.
각 요소에 동일한 연산을 적용하여 새로운 배열을 만들 때 유용하다.
array.map(callbackFunction(currentValue, index, array), thisArg)- callbackFunction: 각 요소에 대해 실행할 함수이다.
- currentValue: 현재 처리 중인 요소이다.
- index: 현재 처리 중인 요소의 인덱스이다. (선택 사항)
- array: map()을 호출한 배열이다. (선택 사항)
- thisArg: callbackFunction 내에서 this로 사용할 값이다. (선택 사항)
//화살표 함수
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
//일반 함수
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]화살표 함수
(매개변수) => { 함수 본문 } 즉 num을 매개변수로 사용하여 num*2를 리턴하는 함수
2. filter()
- filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다.
- 원본 배열은 변경되지 않는다.
- 특정 조건에 맞는 요소만 추출할 때 유용하다.
array.filter(callbackFunction(currentValue, index, array), thisArg)
- callbackFunction: 각 요소에 대해 실행할 함수이다.
- currentValue: 현재 처리 중인 요소이다.
- index: 현재 처리 중인 요소의 인덱스이다. (선택 사항)
- array: filter()를 호출한 배열이다. (선택 사항)
- thisArg: callbackFunction 내에서 this로 사용할 값이다. (선택 사항)
//화살표 함수
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
//일반 함수
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4
화살표 함수
num을 매개변수로 사용하여 num%2를 리턴하는 함수
num을 2로 나누고 나오는 나머지를 반환한다.그 나머지가 0과 같은가를 확인한다.1 → 1, 2 → 0, 3 → 1, 4 → 0, 5 → 1 즉 여기서 걸러진 것은 나머지가 0이 나오는 2와 4뿐이다.3. reduce()
- reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다.
- 원본 배열은 변경되지 않는다.
- 배열의 모든 요소를 하나의 값으로 축적할 때 유용하다 (예: 합계, 평균, 최대값 등).
array.reduce(callbackFunction(accumulator, currentValue, index, array), initialValue)
- callbackFunction: 각 요소에 대해 실행할 함수이다.
- accumulator: 누적된 결과값이다.
- currentValue: 현재 처리 중인 요소이다.
- index: 현재 처리 중인 요소의 인덱스이다. (선택 사항)
- array: reduce()를 호출한 배열이다. (선택 사항)
- initialValue: 초기 누적값이다. (선택 사항)
//화살표 함수
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
//일반함수
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(acc, curr) {
return acc + curr;
}, 0);
console.log(sum); // 15- numbers.reduce((acc, curr) => acc + curr, 0);: numbers 배열에 reduce() 메서드를 호출한다.
- reduce() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 하나의 결과값을 반환한다.
- (acc, curr) => acc + curr 화살표 함수는 다음과 같이 작동한다.
- acc는 누적값(accumulator)으로, 콜백 함수의 이전 호출의 반환값을 누적한다.
- curr는 현재 요소(current value)다.
- acc + curr는 누적값과 현재 요소를 더한 값을 반환한다.
- 0은 초기 누적값(initialValue)으로, acc의 초기값을 설정한다.
콜백 함수
"콜백 함수를 실행"한다는 것은 어떤 함수 내에서 다른 함수를 호출하는 것을 의미한다.
여기서 "콜백 함수"는 다른 함수의 인자로 전달되는 함수를 말한다.
즉 함수 내에서 함수 내부에서 다른 함수를 호출한다는 의미다.
여기서는 (acc, curr) => acc + curr, 0); 가 콜백 함수다.
화살표 함수라 헷갈릴 수 있지만 function(acc, curr) { return acc + curr; }까지가 내부 함수의 내용이고
0은 initialValue: 초기 누적값이다.
각 요소에 대한 콜백 함수 실행 과정:
- 초기값: acc는 0, curr는 1이다. acc + curr는 1을 반환한다.
- 두 번째 요소: acc는 1, curr는 2이다. acc + curr는 3을 반환한다.
- 세 번째 요소: acc는 3, curr는 3이다. acc + curr는 6을 반환한다.
- 네 번째 요소: acc는 6, curr는 4이다. acc + curr는 10을 반환한다.
- 다섯 번째 요소: acc는 10, curr는 5이다. acc + curr는 15를 반환한다.
- sum: reduce() 메서드는 최종 결과값 15를 반환하고, 이를 sum에 할당한다.
- console.log(sum); // 15: sum을 콘솔에 출력한다.
forEach()
map(), filter(), reduce()는 배열의 모든 요소를 순환하기에 for each와 비슷한 면이 있다.