저는 고차함수를 좋아합니다.
map, reduce를 애용하는데요.
이것만 있다면 어떤 데이터를 제 앞에 던져줘도 전처리가 가능합니다.
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue,
);
console.log(sumWithInitial);
// Expected output: 10
발췌 : MDN
공식문서를 확인한다면 더할나위 없이 좋습니다.
하지만 모든 책에는 목차가 있듯, 대주제를 훑고 들어간다면 더 빠른 이해가 가능합니다.
- 3번째 줄 주석이 뭘 말하고 싶은거지? 아, array1의 원소들을 모두 더하는 작업이란걸 설명하고 있구나.
- 변수 이름을 accumulator라고 사용했네? accmulator의 뜻이 뭐지? 아, 누산기?
- 아, reduce()는 자신을 호출한 배열의 원소들을 돌면서 누산해주는 역할이구나
arr.reduce(callbackFn, initialValue)
reduce는 크게 보면 2개의 인자를 받습니다.
1. callbackFn: 함수
2. initialValue?: 변수 // 전달하지 않아도 됨
다시, callbackFn(함수)을 작게 보면 4개의 인자를 받습니다.
1. accumulator
2. currentValue
3. currentIndex
4. array
4개의 인자는 각각 어떤 변수인지 간단하게 알아봅시다.
저는 조금 더 쉽게 설명하고 싶은데요,
위에 적어두었던 Demo: Array.prototype.reduce의 예제코드를 살짝 바꿔 보겠습니다.
코드의 의미는 동일합니다.
const array1 = [1, 2, 3, 4];
const initialValue = 0;
function 덧셈을해주는_함수(accmulator, currentValue) {
return accmulator + currentValue
}
const sumWithInitial = array1.reduce(
(accumulator, currentValue, index) => {
console.log("accumulator", accumulator)
console.log("currentValue", currentValue)
console.log("index", index)
return 덧셈을해주는_함수(accumulator, currentValue);
}, initialValue
);
// console //
accumulator 0
currentValue 1
index 0
덧셈을해주는_함수(accumulator, currentValue) 실행
accumulator 1 (0+1)
currentValue 2
index 1
덧셈을해주는_함수(...) 실행
accumulator 3 (1+2)
currentValue 3
index 2
덧셈을해주는_함수(...) 실행
accumulator 6 (3+3)
currentValue 4
index 3
return 덧셈을해주는_함수(6+4) // 10 (순환 종료)
💡 아, accumulator는 그냥 덧셈을해주는_함수()의 반환값을 계속 저장하고 있는 저장소구나
const obj = [{name: "동동", "age": 22}, {name: "아리", "age": "26"}];
const result = obj.reduce((accmulator, currentValue) => {
const { name, age } = currentValue;
if (age > 23) {
return [...accmulator, currentValue]
}
return accmulator;
}, [])
console.log(result) // ?
result의 값은 무엇일까요??
저는 reduce 함수를 무척 어려워했습니다.
아무리 공식 문서를 읽어도 그때뿐이고 왜 이렇게 동작하는지도 모른 채 막 사용했었던 때가 있었는데
이번이 저 자신도 한 번 더 공부하는 기회였고,
만약 JS에 처음 입문하시거나 reduce 함수가 익숙하지 않은 분들이 본 글을 읽었을 때 조금이나마
도움을 받았으면 좋겠습니다.
쉽게 설명하는 건 정말 어려운 것임을 다시 한번 깨닫습니다..
더 쉽게 이해할 수 있는 노하우가 있다면 알려주세요!
다음 글에서 담아보겠습니다
다음 글은
를 적어보고자 합니다.