Js Reduce

reduce 💡

고차함수 중 하나인 reduce 잘 사용하고 있었으나, 오랜만에 쓰려고 하면

자꾸 헷갈려 간단하게 정리해 보려고 한다.

고차함수란?

• 어떤 프로그래밍 언어의 함수 구현에서 함수를 인자로 넘길 수 있거나 반환할 수 있을 때 함수를 일급 객체(언어 내부에서 값으로 표현되고 전달될 수 있는 자료형)로 취급 하고, 함수를 인자로 받거나 결과로 반환하는 함수를 고차 함수라 한다.
  [참고]: 나무위키

사용방법

arr.reduce(Callback(1️⃣ accumulator, 2️⃣ currentValue, 3️⃣ index, 4️⃣ array), 5️⃣ -initialValue-)
1️⃣: 콜백의 반환값을 누적
2️⃣: 현재 처리할 값(요소)
3️⃣: 처리할 요소의 index값(optional)
4️⃣: reduce를 호출한 배열(optional)
5️⃣: 누적을 시작할 초기 값(optional: 입력하지 않으면 배열의 첫번째 원소)

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, -idx, arr-) => acc + cur, -적지 않으면 1-) 
console.log(result) // 15

값을 합산하는 것 말고도 다른 용도로 사용될 수 있다.

중첩된 배열 평탄화

const arr = [[1,2,3,4],[5,6,7,8]];
console.log(arr.reduce((acc, cur) => acc.concat(cur)))
// [1,2,3,4,5,6,7,8]
// initialValue 입력 x 따라서 배열의 첫 원소인 [1,2,3,4].concat([5,6,7,8])의 결과가 나온다. 

배열 내의 원소 갯수 파악

const arr = ['apple', 'banana', 'apple', 'mango', 'watermelon', 'apple'];
const fruit = arr.reduce((acc, cur) => {
  if(cur in acc) {
    acc[cur]++
  } else {
    acc[cur] = 1
  }
  return acc;
}, {})
console.log(fruit); // {apple: 3, banana: 1, mango: 1, watermelon: 1}
// 초기값으로 빈 객체 {}를 놓은 뒤 객체의 키값이 존재하지 않는다면 등록, 아니면 증가

배열 내 특정 값 혹은 속성으로 정렬

const info = [
  {
    name: '스타크',
    age: 52,
    union: 'avengers'
  },
  {
    name: '배너',
    age: 50,
    union: 'avengers'
  },
  {
    name: '피터',
    age: 22,
    union: 'avengers'
  },
  {
    name: '스티브',
    age: 48,
    union: 'free'
  },
  {
    name: 'vision',
    age: '???',
    union: 'free'
  },
  {
    name: '완다',
    age: 32,
    union: 'free'    
  }
]

const sorted = info.reduce((acc, cur) => {
  const key = cur['union']  // free or avengers
  if(!acc[key]) {
    acc[key] = []
  }
  acc[key].push(cur);
  return acc; // return 잊지 말자 !!
}, {})

주의사항❗️
위 코드에서 if 다음 else에 push하게 된다면 원하는 결과가 나오지 않는다 !!

중복 배열 원소 제거

const arr = [1,1,1,22,2,2,3,3,3,34,5,5,];
const newArr = arr.sort((a, b) => a - b).reduce((acc, cur) => {
  const leng = acc.length;
  if(leng === 0 || acc[leng-1] !== cur) {
    acc.push(cur)
    }
  return acc;
}, [])
console.log(newArr) // [1, 2, 3, 5, 22, 34]

이와 같이 다양하게 쓰일 수 있다. 유용한 reduce 사용 방법을 발견하게 되면 추가