[JavaScript] reduce() 메서드

배열 아카이브에 담았지만, 따로 정리가 필요한 친구

reduce()

용도

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

구문

	arr.reduce(callback[, initualValue])

매개변수

callback
배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

accumulator

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

currentValue

• 처리할 현재 요소.

currentIndex Optional

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

array Optional

• reduce()를 호출한 배열.

initialValue Optional

• callback의 최초 호출에서 첫 번째 인수에 제공하는 값.
• 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용
• 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함에 유의

예제

배열의 합

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10

ㄴ 현재는 initialValue를 제공해주고 있으므로 0번 인덱스부터 합을 구한다.
ㄴ 제공해주지 않으면 1번째 인덱스부터 시작함

화살표 함수를 활용한 사용 예시

const array1 = [1, 2, 3, 4];
array1.reduce((prev,curr) => prev + curr ); // 10
array1.reduce((prev,curr) => prev + curr, 10); // 20

객체 배열에서의 값 합산

객체 배열에서도 쓸 수 있다. 편리하다 편리해

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

중첩 배열 펼치기

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

Array.flat() 메서드도 있음

객체 내 value개수 세기

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

짧게 쓰면 이렇게 됨 (폰켓몬 문제 풀이 코드)

    const countnums = (arr) => {
        return nums.reduce((p,c)=>{ 
            p[c] = ++p[c] || 1;
            return p;
        }, {}); 
    };

배열의 중복 항목 제거

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

let result = array.reduce((ac, v) => ac.includes(v) ? ac : [...ac, v], []);
console.log(result3);	// ['C', 'A', 'B', 'D', 'E']

• reduce() 와 includes() 함수를 사용하여 배열의 중복 제거
  reduce()의 두번째 인자 값으로 결과값을 담을 새로운 빈 배열 하나를 만들고,
  reduce()의 첫번째 인자로 callback 안에서 callback 함수의 두번째 인자(v)를 새로 만든 배열(ac)에 includes()를 사용하여
  새로 만든 배열에 존재하지 않으면 해당 값을 삽입한 배열을 반환하고,
  존재하면 해당 값을 삽입하지 않고 반환하는 방식으로 배열을 만들어 만들어진 최종 값을 반환

✅ Set과 Array.from()을 사용할 수 있는 환경이라면, let orderedArray = Array.from(new Set(myArray));를 사용해 중복 요소를 제거하면 됨