배열내장함수 - reduce

reduce함수는 잘 사용할 수 있으면 정말 유용한 함수(라고한)다..ㅋㅋ

 

이 함수는 배열이 주어졌을때 배열 안에 있는 모든 값들을 사용하여 어떠한 값을 연산해야 할 때 사용된다

 

이해를 돕기 위해서 배열이 주어졌을때 배열의 내부 값들을 모두 더해야 된다고 가정해보자

여러가지 방법이 있겠지만 나는 forEach문으로 예시를 들어보고자 한다

 

const numbers = [1,2,3,4,5,6,7,8];
let sum = 0;

numbers.forEach(n => {
  sum += n;
})
console.log(sum); //36

 

위의 식을 사용해서 numbers의 합을 구할수도 있지만

 

reduce를 사용한다면 좀더 간결하게 식을 짤수가 있다.

 

일단 reduce함수의 사용 방법은 다음과 같다

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

 

아래 더하기의 합을 구하는 코드를 통해 reduce 함수를 알아보도록 하겠다. (코드에 대한 설명은 코드블록 내부에 적겠다)

const numbers = [1,2,3,4,5,6,7,8];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0 );
console.log(sum);

//상기 코드에서는 누적값과 현재값만 사용한다
//0은 초기  accumulator 
//accumulator => 누적된 값 (acc라고 칭하겠다)
//current => 각 원소 (1,2,3,4,5,6,7,8 이 순서대로 온다) (cur라고 칭하겠다)
/* => 다음에 실행시킬 명령으로는 { return acc + cur }, 한줄짜리 명령어이기 때문에 return과 {}삭제
초기 accumulater인 0으로 시작해 current자리에 순서대로 요소가 온다면
0(acc) + 1(cur) = 1(acc)
1(acc) + 2(cur) = 3(acc)
3(acc) + 3(cur) = 6(acc)
6(acc) + 4(cur) = 10(acc)
10(acc) + 5(cur) = 15(acc)
15(acc) + 6(cur) = 21(acc)
21(acc) + 7(cur) = 28(acc)
28(acc) + 8(cur) = 36(acc)
위의 과정을 거쳐 최종값인 36을 반환한다
*/

 

 

reduce의 추가 속성을 알면 배열의 평균값도 구할수가 있다

마찬가지로 아래 예제 코드를 작성해두겠다.

const numbers_02 = [1,2,3,4,5,6,7,8];
const avg = numbers_02.reduce((accumulator, current, index, array) => {
  if(index === array.length -1) { //현재 처리해준 배열 원소가 맨 마지막 번호라면 (index번호가 7이라면)
    return ( accumulator + current ) / array.length;
  } else{
      return accumulator + current ;
  }
}, 0 );
//index => 각 원소의 index번호
//array = > 함수를 실행하고 있는 자기 자신

console.log(avg);

//if문을 사용해 배열의 마지막숫자인 8까지의 누적 합계를 구했을 경우에 배열의 개수로 합의 값을 나누어주어야 한다.
//2줄 이상의 식이 들어가므로 { return }을 작성해준다
//8에 도달하기 전까지 acc와 cur을 받아서 더해줄 else문을 작성한다
//if문 내부에 순환을 멈출 조건을 걸어준다

 

 

redce는 많은 예시들이 더하기로 사용하고 있어서 더하는 함수라고 오해하는 사람들이 있지만

사실 정말 많은 상황에서 사용할 수 있는데,

배열 내부의 요소의 개수를 알아보는 코드를 작성해보겠다

const alphabets = ['a','a','b','c','c','c','d','e','e'];
const counts = alphabets.reduce((acc, cur) => {
  if(acc[cur]){ //if문으로 acc안에 cur이 존재하는지 확인
    acc[cur] += 1; //존재한다면 값에 1을 더해줌
  }else{
    acc[cur] = 1;
  }
  return acc;
},{}); //첫번째  {}는 함수의 코드블록이고 두번째 {}는 비어있는 객체를 의미함

console.log(counts);

// 초기 acc값은 공백이다
// 순서대로 루프돌기
//{ }['a'] => {}안에 a가 없으므로 값은 a:1
//acc값이 a로 변경되어 { a }['a'] 이 되고, acc내부에 a가 있기때문에 +1을 해 a:2가 됨
//acc값이 a a로 변경, { a a }['b'] acc내부에 cur값인 b가 없기때문에 b:1
//...
//위와 같은 로직으로 reduce함수가 다 돌아간 후에는
//결과값으로 {a: 2, b: 1, c: 3, d: 1, e: 2} 가 반환된다

 

이밖에도 map, forEach, filter등 대부분의 내장함수를 reduce로 대체할 수 있으니 많은 코드들을 보면서 감을 익혀두는것이 좋을 것 같다.