reduce

reduce() 메서드는 덧셈 함수로 자주 사용됩니다.

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

배열.reduce((누적값, 현재값, 인덱스, 요소) => {
   return 결과;
}, 초기값)

아래 코드는 덧셈 예시 입니다.

const number = [1, 2, 3];

// 1. reduce를 사용하여 number 배열 안의 값을 다 더하기
result = number.reduce((acc, cur, i) => {
  // acc : 누적값, cur : 현재값 , i : 인덱스
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2

console.log(result); // 6

acc(누적값)이 초깃값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있습니다. 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.

reduceRight는 reduce와 동작은 같지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 차이입니다.

// 2. reduceRight를 사용하여 number 배열 안의 값을 다 더하기
result = number.reduceRight((acc, cur, i) => {
  // acc : 누적값, cur : 현재값 , i : 인덱스
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 3 2
// 3 2 1
// 5 1 0
console.log(result); // 6

reduce를 사용하여 홀수, 짝수 구분하는 코드입니다.

// 3. reduce를 사용하여 홀수, 짝수 구분하기
result = number.reduce((acc, cur) => {
  acc.push(cur % 2 ? '홀수' : '짝수');
  return acc;
}, []);
console.log(result); // [ '홀수', '짝수', '홀수' ]

초기값을 배열로 만들고, 배열에 값들을 push하면 map과 같아집니다. 이를 응용하여 조건부로 push하면 filter와 같아집니다.

다음은 홀수만 필터링하는 코드입니다.

// 4. reduce를 사용하여 홀수만 필터링하기
result = number.reduce((acc, cur) => {
  if (cur % 2) acc.push(cur);
  return acc;
}, []);
console.log(result);  // [ 1, 3 ]

reduce() 는 비동기 프로그래밍을 할 때에도 유용합니다.

// 5. reduce로 비동기 프로그래밍하기
const promiseFactory = (time) => {
  return new Promise((resolve, reject) => {
    console.log(time);
    setTimeout(resolve, time);
  });
};
[1000, 2000, 3000, 4000].reduce((acc, cur) => {
  return acc.then(() => promiseFactory(cur));
}, Promise.resolve());
// 1000 (바로)
// 2000 (1초 후)
// 3000 (2초 후)
// 4000 (3초 후)

초기값을 Promise.resolve() 로 한 후에, return된 Promise 에 then을 붙여 다음 누적값으로 넘기면 됩니다. Promise 가 순차적으로 실행됨을 보장할 수 있습니다.

반복되는 모든 것에는 reduce() 를 사용할 수 있습니다.

이 외에도, 배열의 메서드에는 sort, filter, every, some, find, findIndex, includes 가 있습니다.