[JS] reduce 활용 예제

📖형식

arr.reduce((prev , curr , currIdx , array)=>{
  return prev + curr
},initalValue)

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

let init = 0
  let sum = [{x:1},{x:2},{x:3}].reduce((acc , cur)=>{
    return acc + cur.x //<--key값으로 접근 
  },init)

  console.log('---------------------');
  console.log(sum) //6;

2-1. 중첩 배열 펼치기

  let flat = [[0,1],[2,3],[4,5]].reduce((acc ,cur)=>{
    return [...acc ,...cur] //합쳐버령 
  },[])

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

2-2. spread operator와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기

 let friends = [{
    name: 'Anna',
    books: ['Bible', 'Harry Potter'],
  }, {
    name: 'Bob',
    books: ['War and peace', 'Romeo and Juliet'],
  }, {
    name: 'Alice',
    books: ['The Lord of the Rings', 'The Shining'],
  }];
  
  let result = friends.reduce((acc,cur)=> {
    return [...acc , ...cur.books] //2번에서 key값으로 접근만 하면댐 
  },['Alphabet'])

  console.log('---------------------');
  console.log(result);
/* 
  'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
  'Romeo and Juliet', 'The Lord of the Rings',
  'The Shining'
  */

3. 객체 내의 값 인스턴스 개수 세기

  let name = ['Allice','Bob','Tiff','Bruce','Bob']

  let result = name.reduce((allName , Name) => {
    if (Name in allName) {
      allName[Name] ++ //있으면 + 1 
    }
    else {
      allName[Name] = 1; //없으면 name:1 값 추가
    }

    return allName 
  },{})

  console.log('---------------------');
  console.log(result); 
  // { Allice: 1, Bob: 2, Tiff: 1, Bruce: 1 }

4. 속성으로 객체 분류하기

 let people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
  ];

  const groupBy = (objArr , props) => {
    return objArr.reduce((acc , obj) => {
      let key = obj[props]

      if (!acc[key]) {
        acc[key] = [] // 없으면 추가 
      }

      acc[key].push(acc)

      return acc
    },{})
  }

  console.log('---------------------');
  console.log(groupBy(people , 'age'));
  /* 
    allbooks = [
      'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
      'Romeo and Juliet', 'The Lord of the Rings',
      'The Shining'
    ]
  */

5. 배열의 중복 항목 제거

  let arr = [1, 5, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
  //arr.sort [1, 1, 2, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5] 

  let result = arr.sort().reduce((acc,cur) => {
    const length = acc.length
    if (length === 0 || acc[length - 1] !== cur) { //0이거나 마지막 index값이랑 다른경우
      acc.push(cur)
    }
    return acc
  }, [])

  console.log('---------------------');
  console.log(result); //[1,2,3,4,5]

6. 파이프 함수(함수 합성)

  const double = x => x + x;
  const tripple = x => 3 * x;
  const quadruple = x => 4 * x;

  const pipe = (...fnc) => (input) => fnc.reduce((acc, f)=>f(acc),input)
  
  console.log('---------------------');
  pipe(double,tripple,quadruple)(10) // 240

7. 프로미스 순차적으로 실행

function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
}

// promise function 1
function p1(a) {
  return new Promise((resolve, _) => {
    resolve(a * 5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, _) => {
    resolve(a * 2);
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, _) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200

Reference

MDN