[JS] reduce() 내장메서드 함수 파악하고 써먹어보기

 

 

 

reduce() 기본 문법

 

reduce() 메서드는 배열의 각 요소에 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.

reduce라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙었다. 예로, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 하나의 값으로 줄이는 동작이다. 하지만 reduce가 반환하는 값은 객체일 수도 있고, 다른 배열일 수도 있다.

 

arr.reduce(callback[, initialValue])

 

리듀서 함수는 네 개의 인자를 가집니다.

1. 누산기 accumulator (acc)
2. 현재 값 currentValue (cur)
3. 현재 인덱스 currentIndex (idx)
4. 원본 배열 array (src)

 

◻ accumulator 

- 콜백의 반환값을 누적한다. 콜백 이전 반환 값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는initialValue의 값이다.

 

◻ currentValue

- 처리할 현재 요소.

 

◻ currentIndex (optional)

- 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

 

◻ array (optional)

- reduce()를 호출한 배열.

 

◼ initialValue(optional)

- callback 최초 호출에서 첫 번째 인수에 제공하는 값.

초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생.

 

 

 

 

 

 

 

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

const 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(`array : ${array}`);
    console.log("                              ");
    return accumulator + currentValue;
});

console.log("res:", res);

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

 

 

 

 

 

 

 

 

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

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

console.log("res:", res);

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

 

 

 

 

 

 

 

3. 객체 배열에서의 값 합산

const initial = 0;
const lists = [
    {x : 1},
    {x : 2},
    {x : 3}
];
const sum = lists.reduce((acc, current) => {
    console.log(`accumulator : ${acc}`);
    console.log(`currentValue : ${current.x}`);
    console.log("                              ");   
    return acc + current.x;
}, initial)

console.log(sum) // logs 6

 

1) initial = 0  이니까 acc 인수에 0이 들어감.

2) current는 lists 배열이 순차적으로 들어가고 첫번째 lists 배열의 x의 값 = 1이 담긴다.

3) return으로 acc (0) + current (1) 는 => 1 반환된다.

 

이렇게 반복을 돌려서 총 log에는 6이 찍힌다.

 

 

 

 

 

 

 

4. 중첩 배열 펼치기

const array = [
    [0, 1],
    [2, 3],
    [4, 5]
]
const sumArray = array.reduce((acc, current) => {
	console.log(`accumulator : ${acc}`);
        console.log(`currentValue : ${current}`);
        return acc.concat(current);
    }
,[]);

console.log(sumArray);
//[0, 1, 2, 3, 4, 5]

 

1)  초기값이 [ ] 이라서 acc에는 아무것도 안들어간다.

2) current에는 첫번째 배열 [0, 1]이 들어간다.

3) acc 인수에 2) 배열인 [0, 1]을 concat을 이용해서 합쳐서 반환한다.

4) 이것을 반복한다.

5) log로 sumArray를 찍어보면 [0, 1], [2, 3], [4, 5]가 하나로 합쳐져서 [0, 1, 2, 3, 4, 5]가 나온다. 

 

 

 

 

 

 

5. 배열의 중복 항목 제거

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]