배열의 각 요소를 순회하며 누적 값 계산하기

오늘의 알고리즘 코드카타는 '내적'에 관한 내용!

반복문 + 복합할당연산자를 활용하면 그리 어렵지 않겠다는 생각으로 후딱 풀었는데
세상에 ..! 다른 사람의 풀이를 찾아보다 누적값을 계산해주는 메소드가 있다는 걸 알게 됐다.
물론 그렇다고 내 풀이가 틀렸다는 것은 아니지만 이참에 하나씩 알아간다는 마인드로 공부해봤는데 사실 메소드 구성 요소가 많아서 그런지 이제까지 공부한 것중에 제일 복잡했다.😅 잘 모르겠으면 여러 번 보면 되지 뭐..

결정적으로 배열을 순회하면서 누적값을 계산하는 메소드 이름이 왜 reduce 인지가 이해가 안 간다😑 최강록도 아니구 배열을 졸인다는거야 뭐야

reduce()

---

array.reduce(callback, initialValue)

1. 기본 문법

• 1) callback : 배열의 각 요소에 대해 실행되는 함수로, 4개의 매개변수를 가질 수 있음
  • accmulator (필수) : 이전까지 계산된 누적값을 저장
  • currentValue (필수) : 현재 순회 중인 요소
  • currentIndex (필수) : 현재 순회 중인 요소의 인덱스
  • array (선택) : reduce 메소드가 호출될 배열
    
    
• 2) initialValue (선택) : accmulator의 초기값. 생략 시 배열의 첫 번째 요소가 초기값으로 사용됨
  
  

2. 동작 원리

• reduce는 배열의 첫 번째 요소부터 마지막 요소까지 순회한다.
• 각 단계에서 callback 함수가 실행되고, accumulator에 새로운 값이 저장된다.
• 순회가 끝나면 최종 accumulator 값이 반환된다.
  

reduce() 활용 예제

---

1. 배열의 합 계산

  const numbers = [1, 2, 3, 4, 5];

  const sum = numbers.reduce((accumulator, currentValue) => {
      return accumulator + currentValue;
  }, 0);

  console.log(sum); // 15

• 동작 과정 :
  1. 초기값 : accumulator = 0
  2. 순회 :
  - accumulator = 0 + 1 = 1
  - accumulator = 1 + 2 = 3
  - accumulator = 3 + 3 = 6
  - accumulator = 6 + 4 = 10
  - accumulator = 10 + 5 = 15
  3. 최종 반환값 : 15

---

2. 배열의 곱 계산

  const numbers = [1, 2, 3, 4];

  const product = numbers.reduce((accumulator, currentValue) => {
      return accumulator * currentValue;
  }, 1);

  console.log(product); // 24

• 동작 과정 :
  1. 초기값 : accumulator = 1
  2. 순회 :
  - accumulator = 0 + 1 = 1
  - accumulator = 1 + 2 = 3
  - accumulator = 3 + 3 = 6
  - accumulator = 6 + 4 = 10
  - accumulator = 10 + 5 = 15
  3. 최종 반환값 : 15
  

---

3. 객체 배열에서 특정 값 추출

  const items = [
      { name: "Apple", price: 100 },
      { name: "Banana", price: 200 },
      { name: "Cherry", price: 300 }
  ];

  const totalPrice = items.reduce((accumulator, item) => {
      return accumulator + item.price;
  }, 0);

  console.log(totalPrice); // 600

---

4. 중첩 배열 평탄화 (Flattening)

  const nestedArray = [[1, 2], [3, 4], [5, 6]];

  const flatArray = nestedArray.reduce((accumulator, currentValue) => {
      return accumulator.concat(currentValue);
  }, []);

  console.log(flatArray); // [1, 2, 3, 4, 5, 6]

---

5. 초기값 없이 사용

  const numbers = [1, 2, 3, 4];

  const sum = numbers.reduce((accumulator, currentValue) => {
      return accumulator + currentValue;
  });

  console.log(sum); // 10

• 초기값이 없는 경우 :
  • accumulator는 배열의 첫 번째 요소로 초기화
  • 순회는 배열의 두 번째 요소부터 시작

---

[오늘의 문제 / 내적]

길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.

이때, a와 b의 내적은 a[0]×b[0] + a[1]×b[1] + ... + a[n-1]×b[n-1] 입니다. (n은 a, b의 길이)

• 나의 풀이

  function solution(a, b) {
      var answer = 0;
      var arrayLength = a.length;
      for (let i = 0; i < arrayLength; i++){
          answer += a[i] * b[i];
      }

      return answer;
  }

: 교과서적이면서 '근본 풀이'라고 불린다.

• reduce() 를 활용한 풀이

  function solution(a, b) {
      return a.reduce((acc, _, i) => acc += a[i] * b[i], 0);
  }

_의 의미

1. 사용되지 않는 변수

• javaScript에서 변수 이름으로 _를 사용하면 "이 변수는 필요 없어서 사용하지 않는다"는 의도를 나타낸다.
• 이는 코드를 읽는 사람에게 "이 값은 무시해도 된다"고 알려주는 관례이다.
  
  

2. 코드에서의 예시

return a.reduce((acc, _, i) => acc += a[i] * b[i], 0);

• reduce 콜백 함수의 두 번째 매개변수는 현재 배열 요소의 값
• 여기서 _로 이름을 지정했지만 실제로는 이 값을 사용하지 않고 대신 a[i]와 b[i]를 사용
  
  

3. 왜 무시했을까?

• 이 코드에서는 인덱스(i)만 필요하고, 현재 배열 요소의 값은 사용하지 않기 때문!

요약 및 주의사항

---

1. 요약

• reduce는 배열을 순회하면서 누적값을 생성하는 강력한 메소드이다.
• 초기값을 설정하면 안정적이고 유연한 코드를 작성할 수 있다.
• 합계, 곱셈, 배열 변환, 객체 생성 등 다양한 작업에 활용할 수 있다.

2. 주의사항

• 초기값 설정 : 초기값을 명시하지 않으면 배열이 비어있을 때 오류가 발생한다.

    [].reduce((acc, val) => acc + val); // TypeError: Reduce of empty array with no initial value

• 가독성 : 복잡한 로직을 reduce로 구현하면 가독성이 떨어질 수 있다. 간단한 작업에 적합한 메소드이다.

reduce()도 알게되고 _도 알게되어 머리가 뽀글뽀글 어려운 하루..
그치만 새로운 걸 알아가는 일은 재미나요 ~