고차함수(map, filter, reduce)의 JavaScript 깊이 있는 분석
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 배열 조작 및 함수형 프로그래밍을 활용하는 개발자, 특히 배열 변환, 필터링, 집계 작업에 관심 있는 중급/고급 개발자
핵심 요약
map
,filter
,reduce
는 ES5 이후 도입된 고차함수로, 배열을 변환/필터링/집계하는 데 사용map
은 요소별 변환,filter
은 조건에 따른 필터링,reduce
는 누적 계산을 수행 (모두 비변형적(immutable) 방식)reduce
는 복잡한 집계 작업에 적합하며,initialValue
설정이 필수적
섹션별 세부 요약
1. 고차함수의 정의 및 역할
- 고차함수는 다른 함수를 인자로 받거나 반환하는 함수
- JavaScript의
map
,filter
,reduce
는 콜백 함수를 인자로 받아 배열 요소에 작업 수행 - 모듈성과 추상화를 통해 코드 유지보수성 향상
2. `map` 메서드의 메커니즘
- 배열의 각 요소에 콜백을 적용하여 새로운 배열 생성
array.map(callback(element[, index[, array]])[, thisArg])
형식- 예시:
numbers.map(num => num * 2)
→[2, 4, 6, 8]
- 비변형적(original array 유지)이며, 1:1 변환에 적합
3. `filter` 메서드의 메커니즘
- 콜백이
true
를 반환하는 요소만 포함한 새로운 배열 생성 array.filter(callback(element[, index[, array]])[, thisArg])
형식- 예시:
numbers.filter(num => num % 2 === 0)
→[2, 4, 6]
- 조건 기반 필터링에 적합하며, 비변형적
4. `reduce` 메서드의 메커니즘
- 배열을 단일 값으로 축소하는 집계 함수
array.reduce(callback(accumulator, element[, index[, array]])[, initialValue])
형식- 예시:
numbers.reduce((acc, curr) => acc + curr, 0)
→10
initialValue
설정 필수, 복잡한 집계 작업에 강점
5. 연쇄 사용 및 주의사항
filter
→map
→reduce
연쇄 예시:
```javascript
numbers.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((acc, curr) => acc + curr, 0)
```
→ 결과: 24
(22 + 42 + 6*2)
- 비변형성으로 인한 메모리 사용 주의
reduce
는 간단한 작업보다map
/filter
보다 복잡한 작업에 적합
6. 실무 팁 및 예시
- 쇼핑카트 합계 계산 예시:
```javascript
cart.filter(item => item.price > 3)
.reduce((acc, item) => acc + item.price, 0)
```
→ 결과: 15
(10 + 5)
initialValue
누락 시 빈 배열 오류 발생- 콜백 내부에서 배열 수정은 불순한 함수(impure function)로 피해야 함
결론
map
,filter
,reduce
는 함수형 프로그래밍의 핵심 도구로, 배열 조작 시 결합(chaining)하여 사용할 것initialValue
설정, 비변형성(immutability) 고려, 콜백 명확성(예:isEven
등)을 통해 코드 가독성 향상- 쇼핑카트 계산, 데이터 집계 등 실무에서 즉시 적용 가능한 패턴