JavaScript - 배열 값들을 줄여서 하나의 값으로 reduce()

arr.reduce(fn)

array.reduce( callback( accumulator, currentValue [, index [, array ] ])[, initialValue ] )

- 누적값 : accumulator / 현재값 : currentValue (cur , val) / 현재 인덱스 : index / 원본 배열 : array /
- 초기값 : initialValue

 

• 인수로 함수
• (누적 계산값, 현재값) => { return 계산값 };
• 초기값을 안써주면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너뜀. 초기값으로 0을 넣으면, 인덱스 0에서 시작함.
• 원본 배열의 값은 변경하지 않음

// 배열의 모든 수 합치기

let arr = [1, 2, 3, 4, 5];


// for, for of, forEach

let result = 0;
arr.forEach((num) => {
    result += num;
});

console.log(result);    // 15 


// 이 작업을 한번에 처리해줄 수 있는게 reduce()

const result = arr.reduce((prev, cur) => {    // prev: 이전값 (현재까지 누적된 계산값), cur: 현재값
    return prev + cur;
}, 0)    // 초기값 : 0 (안쓰면 첫번째 요소값이 들어감)

console.log(result);    // 15

let userList = [
    { name: "Mike", age: 30 },
    { name: "Tom", age: 10 },
    { name: "Jane", age: 27 },
    { name: "Sue", age: 26 },
    { name: "Harry", age: 3 },
    { name: "Steve", age: 60 },
];


// map, filter 대신에 reduce를 써서 배열을 반환해볼거야
// 나이를 판단해서 성인인 데이터만 뽑아가지고 새로운 배열을 만들어볼거야

let result = userList.reduce((prev, cur) => {
    if(cur.age > 19) {          // 현재 객체의 age가 > 19 라면 
        prev.push(cur.name);    // 지금까지 만들어졌던 배열에 push를 해줘. 이름만 넣어볼거야
    }
    return prev;
}, []);                         // 초기값은 빈 배열로 해서, 저 빈 배열에다가 하나씩 넣어서 반환

console.log(result);            // ["Mike", "Jane", "Sue", "Steve"]


// 이번엔 나이의 합을 구하려면?

let result = userList.reduce((prev, cur) => {
    return prev += cur.age;
}, 0);

console.log(result);            // 196


// 이름이 3글자인 사람을 구하려면?

let result = userList.reduce((prev, cur) => {
    if(cur.name.length === 3) {
        prev.push(cur.name);
    }
    return prev;
}, []);

console.log(result);            // ["Tom", "Sue"]