자바스크립트 reduce함수

reduce()

arr.reduce(callback[, initialValue])

• callback 함수와 initValue 두 개를 전달
• 두번째 인자(argument) 인 initValue 는 사용을 해도되고 안해도 되는 선택사항
• callback 함수에는 총 4개의 인자(argument) 를 지정
• accumulator 는 콜백의 반환값을 누적, 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 reduce() 함수의 두번째 인자 initValue를 제공한 경우 initialValue 값
• currentValue 는 처리할 현재요소, numberList 의 첫번째 데이터 1이 넘어옴
• currentIndex 는 reduce() 함수의 두번째 인자인 initialValue 를 사용했는지 안했는지에 따라 값이 달라짐, initialValue 를 사용했다면 0 부터, 사용하지 않았다면 1 부터 시작
• array 는 reduce()를 호출한 배열, 이 예제에서는 numberList
• 반환값은 누적계산의 결과값

reduce() 작동 방식 - initValue값이 없는 경우

var res = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
    console.log(`currentIndex : ${currentIndex}`);
    console.log(`accumulator : ${accumulator}`);
    console.log(`currentValue : ${currentValue}`);
    console.log(`currentIndex : ${currentIndex}`);
    console.log("                              ");
    return accumulator + currentValue;
}, 0);
console.log(res);
// 10

//initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다.
//reduce()함수 호출시 initialValue 값이 없는 경우
//-accumulator 는 배열의 첫번째 값
//-currentValue 는 배열의 두번째 값

reduce() 작동 방식 - initValue값이 있는 경우

var res = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
    console.log(`currentIndex : ${currentIndex}`);
    console.log(`accumulator : ${accumulator}`);
    console.log(`currentValue : ${currentValue}`);
    console.log(`currentIndex : ${currentIndex}`);
    console.log("                              ");
    return accumulator + currentValue;
}, 10);
console.log(res);
// 20

//initialValue를 제공하면 인덱스 0에서 시작합니다.
//reduce()함수 호출시 initialValue 값이 있는 경우
//-accumulator 는 initialValue
//-currentValue 는 배열의 첫번째 값

객체 배열에서의 값 합산

var initialValue = 0;
var list = [
    {
        x : 1
    },
    {
        x : 2
    },
    {
        x : 3
    }
];
var sum = list.reduce(function (accumulator, currentValue) {
    console.log(`accumulator : ${accumulator}`);
    console.log(`currentValue : ${currentValue.x}`);
    console.log("                              ");   
    return accumulator + currentValue.x;
}, initialValue)

console.log(sum)
//6

중첩 배열 펼치기

var arr = [
    [0, 1],
    [2, 3],
    [4, 5]
]
var flattened = arr.reduce(function(accumulator, currentValue) {
        console.log(`accumulator : ${accumulator}`);
        console.log(`currentValue : ${currentValue}`);
        return accumulator.concat(currentValue);
    }
,[]);
console.log(flattened);
//[0, 1, 2, 3, 4, 5]

속성으로 객체 분류하기

var peoples = [
    {
        name : 'Alice',
        age : 21
    },
    {
        name : 'Max',
        age : 20
    },
    {
        name : 'Jane',
        age : 20
    }

];

function groupBy(objectArray, property){
    return objectArray.reduce(function (accumulator, currentObj) {
        var key = currentObj[property];
        console.log(`key : ${key}`);
        if (!accumulator[key]) {
            accumulator[key] = [];
        }
        accumulator[key].push(currentObj);
        return accumulator;
    }, {});
};

var groupedPeople = groupBy(peoples, 'age');
console.log(JSON.stringify(groupedPeople));
//"age" 속성으로 객체 분류 (나이 별)
// {"20":[{"name":"Max","age":20},{"name":"Jane","age":20}],"21":[{"name":"Alice","age":21}]}

배열의 중복 항목 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, currentValue) => {
    console.log(`accumulator : ${accumulator}`);
    console.log(`currentValue : ${currentValue}`);
    console.log(`                              `);

    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== currentValue) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(result); 
//[1,2,3,4,5]