[JS] Reducer?

[JS] Reducer?

// 일반 예제
const nums = [1, 2, 3]
let value = 0
 
for (let i = 0; i < nums.length; i++) {
  value += nums[i]
}
 
// Reducer 사용
const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

기능적으로 동등하며 배열의 모든 숫자를 합산합니다. 

그러나 약간의 패러다임이 있습니다. 

가장 중요한 기능 중 하나는 Reducer는 하나의 값만 반환한다는 것입니다. 하나의 값은 숫자, 문자열, 배열 또는 객체 일 수 있지만 항상 하나뿐입니다. Reducer는 값 그룹에 약간의 로직을 적용하고 또 다른 단일 결과로 끝내는 데 특히 유용합니다.

위 영상의 각 단계별로 변화는 다음과 같습니다.

// 1단계
const nums = [1, 2, 3]
const initialValue = 0
 
const reducer = function (acc, item) { 
  return acc + item
}
 
const total = nums.reduce(reducer, initialValue)
 
// 2단계 (화살표 함수)
const nums = [1, 2, 3]
const initialValue = 0
 
const reducer = (acc, item) => { 
  return acc + item
}
 
const total = nums.reduce(reducer, initialValue)
 
// 3단계 (괄호 제거)
const nums = [1, 2, 3]
const initialValue = 0
 
const reducer = (acc, item) => acc + item
 
const total = nums.reduce(reducer, initialValue)
 
// 4단계 (한줄로 함축)
const nums = [1, 2, 3]
 
const total = nums.reduce((acc, item) => acc + item,

배열에 숫자가 있고 그 배열에 숫자가 나오는 횟수를보고하는 객체를 반환한다고 가정 해 보겠습니다. 

문자열에 쉽게 적용 할 수 있습니다.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]
 
 
const result = nums.reduce((tally, amt) => {
  tally[amt] ? tally[amt]++ : tally[amt] = 1
  return tally
}, {})
 
console.log(result)
 
 
 
 
const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]
// 우리는 짝수와 홀수의 객체를 만들 예정입니다. 
const result = nums.reduce((acc, item) => {
  acc[item] = {
    odd: item % 2 ? item : item - 1,
    even: item % 2 ? item + 1 : item
  }
  return acc
}, {})
 
console.log(result)
 
 
// 콘솔 
1:{odd: 1, even: 2}
3:{odd: 3, even: 4}
4:{odd: 3, even: 4}
5:{odd: 5, even: 6}
6:{odd: 5, even: 6}
82:{odd: 81, even: 82}

출처 : https://css-tricks.com/understanding-the-almighty-reducer/