RARRIT

기억을 너무 믿지 말자

:ledger: reduce()함수란 무엇인가?

reduce()함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고 하나의 결과값을 반환하는 배열 메서드이다.
주어진 배열의 모든 요소를 순회하며 누적된 결과를 계산할 때 유용하게 사용된다.
reduce()함수는 초기값을 지정할 수 있고, 초기값을 생략하면 배열의 첫 번째 요소가 초기값이 된다.

:one: reduce()함수의 기본 구조

array.reduce((accumulator, currentValue, currentIndex, array) => {
  // 콜백 함수 로직
}, initialValue)

// 매개변수 한글화
배열.reduce((누적값, 현재값, 현재인덱스, 원본배열) => {
  // 콜백 함수 로직
}, 초기값)
  • accumulator: 누적된 결과를 저장하는 변수로, 콜백 함수가 반환하는 값을 이 변수에 계속 누적한다.
  • currentValue: 현재 순회 중인 배열 요소의 값
  • currentIndex: 현재 순회 중인 배열 요소의 인덱스
  • array: reduce()가 호출된 원본 배열
  • initialValue: 옵션으로 지정할 수 있는 초기값이며, 생략할 경우 배열의 첫 번째 요소가 초기값이 된다.

:two: reduce()함수 사용 예시

reduce()함수는 언제 사용되는지 알아보았다.

:pushpin: 2-1) reduce()함수를 사용한 배열의 합.

const numbers = [1,2,3,4];
// 초기값을 설정해주지 않아서 a가 초기값이 된다.
// 누적값(초기값) a = 1, b는 현재값 
const sum = numbers.reduce((a,b) =>  a + b );
  • 첫 번째 순회
    • 누적값 a = 1
    • 현재값 b = 2
    • 1 + 2 = 3
  • 두 번째 순회
    • 누적값 a = 3
    • 현재값 b = 3
    • 3 + 3 = 6
  • 세 번째 순회
    • 누적값 a = 6
    • 현재값 b = 4
    • 6 + 4 = 10

위와 같이 배열 [1,2,3,4] 의 모든 요소를 더한 값인 10을 반환한다.

:pushpin: 2-3) reduce()함수를 사용한 짝수의 합.

  const numbers = [1,2,3,4,5,6,7,8,9,10]; 
  const solution = numbers.reduce((a,b) => {
    if(b % 2 === 0) return a + b; // 짝수일 경우 누적값에 더해준다.        
    return b; // 짝수가 아닐경우 누적값 그대로 반환
  }, 0) // 초기값 0 설정

  console.log(solution);
  • 첫 번째 순회
    • 누적값 a = 0
    • 현재값 b = 1
    • 1(현재값) % 2 === 0; false 누적값 그대로 반환 (1은 짝수가 아니므로 누적값 0 반환)
  • 두 번째 순회
    • 누적값 a = 0
    • 현재값 b = 2
    • 2 % 2 === 0; true 현재값 2는 짝수이므로 누적값에 더함
      • 0(기존 누적값) + 2(현재 누적값) = 2(새로운 누적값)
  • 세 번째 순회
    • 누적값 a = 2 (두 번째 순회에서 적용된 값)
    • 현재값 b = 3
    • 3 % 2 === 0; false 누적값 그대로 반환 (누적값 2)
  • 네 번째 순회
    • 누적값 a = 2
    • 현재값 b = 4
    • 4 % 2 === 0; true 현재값 4는 짝수이므로 누적값에 더함 (a + b = 누적값 6)

열 번째 순회를 거친 후 변수 numbers의 배열 1~10의 짝수들의 합은 30이 나온다.

#### :pushpin: 2-3) reduce()함수를 사용한 최대값 구하기.

const numbers = [1, 10, 2, 20, 3, 30];

// 누적값 > 현재값 ? 참일경우 누적값 반환 : 거짓일 경우 현재값 반환
const max = numbers.reduce((a,b) => a > b ? a : b);

console.log(max) // 30 반환
  • 첫 번째 순회
    • 누적값 a = 1 (배열의 첫 번째 요소, 초기값)
    • 현재값 b = 10 (배열의 두 번째 요소)
    • 1 > 0 ? 1 : 10는 false로 10을 반환
  • 두 번째 순회
    • 누적값 a = 10 (이전 순회의 결과)
    • 현재값 b = 2 (배열의 세 번째 요소)
    • 10 > 2 ? 10 : 2는 true로 10을 반환
  • 세 번째 순회
    • 누적값 a = 10 (이전 순회의 결과)
    • 현재값 b = 20 (배열의 네 번째 요소)
    • 10 > 20 ? 10 : 20는 false로 20을 반환
  • 네 번째 순회
    • 누적값 a = 20 (이전 순회의 결과)
    • 현재값 b = 3 (배열의 다섯번째 요소)
    • 20 > 3 ? 20 : 3는 true로 20을 반환
  • 다섯 번째 순회
    • 누적값 a = 20 (이전 순회의 결과)
    • 현재값 b = 30 (배열의 여섯번째 요소)
    • 20 > 30 ? 20 : 30는 false로 30을 반환

모든 순회를 마치면 최종적으로 30을 반환한다.

:three: reduce()함수 실무에선 언제 사용될까?

reduce() 함수 예제로 배열의 합, 짝수의 합, 최대값 구하기를 해보았다.
그렇다면 실무에서 언제 사용될지 알아보았다.

:pushpin: 3-1) 이커머스 장바구니 항목 총 가격 계산

  • 배열의 합을 통한 장바구니에 있는 항목들의 총 가격을 계산할 수 있을 것 같다.

:pushpin: 3-2) 문자열 배열에서 가장 긴 단어 찾기

  • b.length > a.length ? a : b 삼항 연산자 식을 활용하여 가장 긴 단어를 추출한다.

:fire: 마무리

프로그래머스 Lv.0 단계의 문제를 풀며, 다른 사람의 풀이 과정을 볼 때 reduce()함수가 정말 많이 보여서 이번에 공부를 해보았다.
배열 처리에 있어서 정말 효율적이고, 코드의 가독성과 단순화하는데 큰 도움이 된 것 같다.
다음 알고리즘 풀이 과정에서 도움이 되길 기대해본다!

태그:

카테고리: ,

업데이트:

참고