Reduce Method

배열함수들을 공부하며 쉽게 이해하지 못했던 reduce 함수에 대해 공부한 것을 남기려고 한다.

우선 mdn 사이트에서 reduce에 대해 정의한 것을 보면

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

라고 정의되어 있다. 이 reduce함수에는 4개의 인자가 존재하는데

1. 누산기(acc)
2. 현재 값(cur)
3. 현재 인덱스(idx)
4. 원본 배열(src)
   이렇게 존재하고 있고, 그리고 선택적으로 인해 초기값 initialValue를 설정할 수 있다.

   // reduce함수의 기본 문법 형식
   array.reduce((acc,cur,idx,src) => {
    // 수행될 로직들
   }, initialValue // 선택적 초기값)

   위에 처럼 reduce함수의 사용방식은 저렇게 되어있다. 하지만 인덱스(idx)와 원본 배열(src)은 선택적으로 생략을 할 수 있기때문에
   이전 값(acc)과 현재 값(cur)만 사용하여도 동작하는데 있어서는 문제가 없다. 하지만 한 가지 알고가야 할 사실이 있는데
   reduce함수에서는 return 값이 있냐와 없냐의 따라 누적값이 달라진다는 것이다. 그 이유는

   return문이 있어야 다음 단계로 전달하면서 합산을 하는데 return문이 없다면 이 함수는 기본적으로 undefined를 반환하기 때문에 생각과 다른 값을 반환할 수 있기떄문에 console을 찍으며 확인하고 싶을때에는 reduce함수안에 return문을 적고 그 변수를 확인해봐야 할 것이다!

예시

    const number = [1,2,3,4,5] // 정수의 배열을 가지고 있는 number 변수
    const sum = number.reduce((acc,cur) => {
        return acc + cur
    })
    // acc 이전 값 : 1
    // cur 현재 값 : 2,3,4,5
    // 합계 : 15

위의 예시를 본다면
acc의 현재 값은 1이고 +연산자를 통해서 cur의 값들이 누산되어 합계가 이루어지는데 순서를 보면
1 + 2의 값은 3이 되고 3에서 3을 더해 6이되고 6에서 4를 더해 10, 10에서 5를 더해 최종값인 15를 반환하게 된다.
이렇게 누적된 하나의 값을 반환하기위해서 사용하면 좋은 함수가 reduce 함수인것 같다. 합산뿐만아니라 평균값,객체변환 등등
자유롭게 응용할 수 있다는 장점도 있다. 아래에는 배열을 객체로 변환하는 예제이다.

예시

    const users = ['철수','유리','훈이']
    const userInfo = users.reduce((acc,cur) => {
        acc[cur] = {age : 20}
      return acc
    },{})
    // {'철수': { age: 20 }, '유리': { age: 20 }, '훈이': { age: 20 }}

위의 예시에는 users 변수안에 3명의 유저가 담긴 배열이 있다. 그리고 초기값으로 객체를 만들고 그 객체안에 각각의 키값으로
철수,유리,훈이가 들어가게 되는데, 각 사용자 이름을 키로 한 뒤 age라는 키를 추가함으로써 철수,유리,훈이의 age가 20인 객체를 반환 할 수 있게된다.

이렇게 다양하게 응용하여 사용할 수 있기때문에 여러 case들을 만든 뒤 연습하는 과정을 겪는것이 좋을 것 같다.