Javascript reduce

배열이 주어질 때 배열의 모든 원소들을 사용하는 경우 유용

const numbers = [1, 2, 3, 4, 5];

위 배열의 모든 원소의 합을 구하는 프로그램을 만든다고 가정

let sum = 0;
numbers.forEach(n => {
	sum += n;
});

위와 같은 방식으로 구할 수 있음
그런데 reduce를 사용하면 한 줄로 구현이 가능해짐

const sum = numbers.reduce((acc, current) => acc + current, 0);

여기서 acc는 accumulator의 줄임말 current는 줄여서 curr이라고 쓰기도 함
요약하면 acc는 반복될 때마다 축적되는 값이고, current는 배열에서 현재 위치에 담겨진 원소의 값을 가짐 마지막 두번째 매개변수인 0은 기본값이자 acc의 초기값

acc의 기본값은 0이고, acc와 current가 더해진 값이 다시 acc로 들어가는 반복문이라고 보면 편함

Object.keys(state).reduce((acc, current) => {
                acc[current] = '';
                return acc;
}, {});

만약 Object.keys(state)를 통해 return되는 값이 ["username", "email"]이라고 가정
여기에 reduce를 사용하게 되면, acc의 초기값이 {}이 되는데, {}["username"] = ''; 이렇게 되버리니 조금 이해가 안 되고 의아한 부분이 발생

이 부분은 이렇게 보면 됨

const a = {};
a["username"] = '';
console.log(a);
//출력 : {"username" : ""}
a["email"] = '';
console.log(a);
//출력 : {"username" : "", "email" : ""}

a를 {}로 만들어주고 저런식으로 ["something"] = "anything" 해주면 되는 원리

따라서 위의 reduce결과물은 {"username" : "", "email" : ""}
참고로 배열의 합을 구하는 경우, acc+current자체가 return이었기 때문에 따로 return statement를 구현해주지 않아도 문제가 없었지만(실제로 => 오른쪽이 (로 시작해 )로 끝나지만, 후자의 경우는 {로 시작해서 }로 끝남), 위의 Object로 시작하는 예제는 acc[current] = '';가 return이 아니기 때문에, 따로 구현해줘야 함

const sum = numbers.reduce((acc, current, index, array) => acc + current, 0);

위의 경우는 index = 현재 current 원소의 인덱스, array = numbers 배열 그 자체로 쓸 수 있음
총합말고 평균을 구하려면

const avg = numbers.reduce((acc, current, index, array) => {
   if(index === array.length - 1){
       return (acc + current) / array.length;
   }
   return (acc + current);
}, 0);

다음처럼 함수와 조건문을 이용해 구할 수 있음

추가 예제, 알파벳 카운트

const alphabets = ['a', 'b', 'c'];
const count = alphabets.reduce((acc, curr) => {
  if(acc[curr]) acc[curr] += 1;
  else acc[curr] = 1;
  return acc;
}, {});

//결과 : {a: 1, b: 1, c: 1}