05. reduce

📌 5-1 reduce란?

✔ 배열.reduce(콜백함수(누적값, 현재값, 현재 인덱스, 배열), 초기값)
✔ 배열의 각 요소에 대하여 실행값을 누적하면서 단 하나의 값을 반환한다.
✔ 초기값을 설정하지 않는다면 배열의 첫 인덱스 값으로 초기값이 실행된다.

📌 5-2 reduce의 작동예제

배열의 각 요소를 순회하면서 누적한 하나의 값을 반환한다.

const arr = [1,2,3,4,5];
const reduce = arr.reduce((acc, curr, currindex, arr) => {
    console.log(acc, curr, currindex, arr);
});
// 1번 실행 1 2 1 [ 1, 2, 3, 4, 5 ]
// 2번 실행 undefined 3 2 [ 1, 2, 3, 4, 5 ]
// 3번 실행 undefined 4 3 [ 1, 2, 3, 4, 5 ]
// 4번 실행 undefined 5 4 [ 1, 2, 3, 4, 5 ]
console.log(reduce); // undefined 출력

💡 연산을 실행하는 실행문이 없으므로 undefinde가 출력된다.
💡 첫 누적값 시작은 초기값이 없으므로 배열의 첫 인덱스 값이 들어간다.

📌 5-3 reduce의 사용예제

const arr = [1,2,3,4,5];
const reduce = arr.reduce((acc, curr) => {
    console.log('누적값', acc, '현재 넣을값', curr);
    return acc + curr;
});
// 1번 실행 누적값 1 현재 넣을값 2
// 2번 실행 누적값 3 현재 넣을값 3
// 3번 실행 누적값 6 현재 넣을값 4
// 4번 실행 누적값 10 현재 넣을값 5
console.log(reduce); // 15 출력

💡 이처럼 값이 누적되면서 하나의 값을 반환한다.

📌 5-4 reduce의 초기값 실행

const arr = [1,2,3,4,5];
const reduce = arr.reduce((acc, curr) => {
    console.log('누적값', acc, '현재 넣을값', curr);
    return acc + curr;
}, 10);
// 1번 실행 누적값 10 현재 넣을값 1
// 2번 실행 누적값 11 현재 넣을값 2
// 3번 실행 누적값 13 현재 넣을값 3
// 4번 실행 누적값 16 현재 넣을값 4
// 5번 실행 누적값 20 현재 넣을값 5
console.log(reduce); // 25 출력

💡 실행이 한번 더 진행된다. 왜냐하면 초기값을 설정하였기 때문이다.

📌 5-5 reduce의 배열정제

const arr = [1,2,3,4,5];
const reduce = arr.reduce((acc, curr) => {
    console.log('누적값', acc, '현재 넣을값', curr);
    if(curr > 2) return [...acc, curr];
    else return acc;
}, []);
// 1번 실행 누적값 [] 현재 넣을값 1
// 2번 실행 누적값 [] 현재 넣을값 2
// 3번 실행 누적값 [] 현재 넣을값 3
// 4번 실행 누적값 [ 3 ] 현재 넣을값 4
// 5번 실행 누적값 [ 3, 4 ] 현재 넣을값 5
console.log(reduce); // [ 3, 4, 5 ] 출력

💡 빈 배열을 초기값으로 넣어주고 조건에 맞는 경우 acc안에 있는 배열 요소들과 curr의 값을 추가해서 배열로 반환한다.
💡 이처럼 배열에서 조건의 맞게 정제가 가능하다.

👉 계산이나 조건에 맞게 그룹화하는것에 사용하는 함수이다. 아직 reduce를 더하기함수로 사용하지 않도록 reduce에 대해서 알게되는 내용이 있으면 추가할 예정이다.

😂 더하기로만 너무 많이 사용한 것 같다....

출저
MDN = Array.prototype.reduce()