Frontend/JavaScript
[JavaScript | Array] .reduce() / .fill() / .map()
blueprint-12
2022. 5. 14. 17:51
Array.prototype.reduce()
- reduce() 메소드는 배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환
- 각각의 배열 요소에 콜백함수를 실행하고 결과를 누적한 최종 답이 필요할 때 유용함 (e.g.배열 요소의 전체 합을 구할 때)
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
// expected output: 10
리듀서 함수(콜백함수)의 인자 4개
-optional 은 자주 안쓰임 특히 원본배열은 거의 안 쓰이는 듯, 필요할 때 콜백함수의 인자로 넘겨주면 된다.
-optional 은 말만 옵션이지 넣어주는 쪽이 좋음
🌞누산기 (acc)
- accumulator(누산기) - 콜백의 반환값을 누적한다. 콜백의 이전 반환값 or 콜백의 첫 번째 호출이면서 initialValue를 제공하는 경우에는 initialValue의 값이다.
- 맥락상 이전 값이라고 생각하면 된다. previous value(하지만 이제 첫번째를 빼면 누적이 된 이전 값..)
🌞현재 값(curr)
- 처리할 현재 요소
- 맥락상 현재 처리할 값이라고 생각하면 된다. current value
🌞현재 인덱스(idx) optional
- 처리할 현재 요소의 인덱스 initialValue를 제공한 경우 0, 아니면 1부터 시작한다.
🌞원본 배열(src) optional
🌚초기 값(initialValue) optional
- 얘는 콜백의 인자가 아님 콜백함수의 초기값임 그렇기 때문에 아래와 같이 작성
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// sum is 6
- 콜백의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다)인덱스 0을 초기값으로 세팅) .
- 초기값을 제공하지 않으면 reduce()는 인덱스 1부터 시작해 콜백함수를 실행하고 첫 번째 인덱스는 건너 뛴다.
- 보통은 초기값을 주는 것이 더 안전하다.
주의❗ 빈 배열에서 초기값 없이 reduce() 를 호출하면 오류 발생
-> 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.
arr.reduce(callback[, initialValue])
reduce( )활용 예시
🔽중첩 배열 펼치기
const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(accumulator, currentValue) {
return accumulator.concat(currentValue);
},
[]
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]
//이어서 정리