Array.prototype.reduce()

이서현·2022년 5월 17일
0

reduce()

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

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

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial); // 10

매개변수

  • callback
    배열의 각 요소에 대해 실행할 함수

콜백함수의 네 가지 인자들

  • accumulator
    누산기는 콜백의 반환값을 누적함
    콜백의 이전 반환값 또는,
    콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는
    initialValue의 값
  • currentValue
    처리할 현재 요소
  • currentIndex(Optional)
    처리할 현재 요소의 인덱스
    initialValue를 제공한 경우 0, 아니면 1부터 시작
  • array(Optional)
    reduce()를 호출한 배열
  • initialValue Optional
    callback의 최초 호출에서 첫 번째 인수에 제공하는 값
    초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용
    빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생

작동방식

지금까지 reduce는 덧셈할 때 쓰는 줄 알았지만
sort, every, some, filter, map 등등 다양한 메소드들을 reduce로 구현 할 수 있음

reduce()로 map(), filter()만들기

let arr = [1,2,3];
let result;

result = arr.reduce((acc, cur) => {
  acc.push(cur);
  return acc;
}, []);
 result; // [1,2,3]

초깃값에 빈배열을 지정하고, 배열에 값들을 push하면
map처럼 새로운 배열을 만들 수 있음

위 코드에 조건문을 달면 filter()도 만들 수 있음

let arr = [1,2,3,5,10,6,70];
let result;

result = arr.reduce((acc, cur) => {
  if(cur < 10) acc.push(cur);
  return acc;
}, []);
result; 

비동기 프로그래밍도 가능

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
// 1초 후 2000
// 2초 후 3000
// 3초 후 4000
profile
🌿💻💪🧠👍✨🎉

0개의 댓글