자바스크립트 reduce() 함수의 특징과 활용

오늘은 자바스크립트의 reduce() 함수에 대해 정리해보려고 한다. reduce() 함수는 배열을 순회하면서 요소의 값을 누적시켜 합을 구할 수 있도록 도와주는 기능이다. 일반 for문을 사용하여 누적을 해도 되지만 누적을 위해 만들어진 함수라고 하니 어떤 특징과 장점들이 있는지 알아보자.

---

reduce() 함수의 개념과 특징

자바스크립트의 reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 그 결과를 하나의 값으로 축약하는 함수다.
reduce() 함수는 배열을 순회하면서 각 요소를 처리하고, 그 결과를 누적하면서 최종값을 반환하는 구조다.


함수의 특징

누적된 반환값
reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 지정하고, 그 결과를 누적하여 하나의 값으로 반환한다.

초기값 선택
reduce() 함수의 두 번째 인수로 초기값을 선택적으로 지정할 수 있다. 초기값을 지정하지 않으면 배열의 첫 번째 요소가 초기값으로 사용된다.

불변성
reduce() 함수는 원본 배열을 변경하지 않고 새로운 값을 생성한다.

빈 배열 처리
초기값을 설정하지 않고 빈 배열에서 reduce() 함수를 호출하게 되면 에러가 발생하므로, 초기값을 설정하거나 빈 배열에 대한 예외 처리를 해야 한다.

---

함수의 구문

array.reduce(callback, initialValue)

위의 예시는 함수의 기본 구조다. 매개변수로 콜백 함수와 초기값을 받아서 처리한다.

callback
함수는 총 4개의 매개변수를 받아 처리한다.
accumulator : 누적된 결괏값
currentValue : 현재 처리 중인 요소
currentIndex : 현재 처리중인 요소의 인덱스
array : reduce()가 호출된 배열

initialValue
첫 번째 콜백 호출에서 사용할 초기값이며, 초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값으로 설정된다.

---

배열의 수 합산

// 숫자 배열 정의
const numbers = [1, 2, 3, 4, 5];

// reduce() 함수를 사용하여 배열의 모든 요소를 더함
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

// 결과 출력
console.log("배열의 숫자들의 합:", sum);

위의 코드는 숫자로 구성된 배열의 값을 모두 합산하는 예제 코드다.
위에서 정리한 바와 같이 reduce() 함수의 callback 함수와 초기값을 설정하였고, 모든 요소를 순회하면서 누적시키는 예제다.
reduce()의 가장 흔한 활용 방법이며, 위와 같이 간단하게 누적 계산이 가능하다.

---

물건의 가격과 수량 합산

// 물건의 가격과 수량이 포함된 배열
const items = [
  { price: 1000, quantity: 2 },
  { price: 500, quantity: 3 },
  { price: 300, quantity: 1 }
];

// reduce() 함수를 활용하여 총 구매 금액 계산
const totalPurchaseAmount = items.reduce((total, item) => {
  return total + (item.price * item.quantity);
}, 0);

console.log(totalPurchaseAmount); 
// 출력 결과: 3200

위의 코드는 물건의 가격과 수량이 한 요소로 구성된 배열을 연산하는 예제 코드다.
해당 배열에 reduce() 함수를 호출해 각 요소의 가격과 수량을 연산하여 총합을 구하게 된다.
초기값을 0으로 설정하였고, 각 요소를 순회할 때마다 각 요소의 금액과 수량을 곱하고 그 금액을 누적시킨다.
그렇게 최종적으로 총 구매 금액은 32,000원이 되는 것을 확인할 수 있다.

위의 예제와 같이 물건의 가격을 모두 합산하는 예제에 reduce() 함수를 활용할 수 있다.

---

가장 비싼 제품 찾기

// 물품의 이름과 가격이 포함된 배열
const products = [
  { name: "Laptop", price: 1200 },
  { name: "Smartphone", price: 800 },
  { name: "Headphones", price: 100 },
  { name: "TV", price: 1500 }
];

// reduce() 함수를 활용하여 가장 비싼 물품의 이름 찾기
const mostExpensive = products.reduce((max, product) => {
  return (product.price > max.price) ? product : max;
});

console.log(mostExpensive.name); 
// 출력 결과: TV

위의 코드는 제품과 가격으로 구성된 요소들의 배열을 기준으로 가장 비싼 금액을 찾는 예제 코드다. reduce() 함수를 사용할 때 반드시 누적 합산만 구하는 것은 아니다. 위의 예제와 같이 이전 요소와 비교하면서 가장 비싼 제품이 어떤 것인지 찾을 때에도 유용하게 활용할 수 있다.
이와 같은 예제를 만들 때에는 초기값을 따로 설정하지 않아도 된다.

---

reduce() 함수 사용 시 주의사항

reduce() 함수를 사용하기 전에 몇 가지 주의사항을 확인하는 것이 좋다. 


초기값 설정
reduce() 함수를 호출할 때 초기값을 명시적으로 설정하는 것이 중요하다. 초기값을 설정하지 않으면 첫 번째 요소가 초기값이 되며, 배열이 비어있을 때에는 오류가 발생할 수 있다.

불변성
reduce() 함수 내에서 누적값을 변경하면서 사용할 때에는 불변성을 유지해야 한다. 즉 원본 배열이나 다른 외부 변수를 변경하지 않도록 주의해야 한다.

콜백 함수
콜백 함수에서 반환하는 값의 타입과 구조가 일관되어야 하는데, 일관된 반환값을 유지함으로써 코드의 가독성을 높일 수 있다.

성능
reduce() 함수를 사용할 때에는 성능을 고려해야 하며, 매우 큰 배열이나 복잡한 연산을 수행할 때에는 다른 방법을 고려해야 할 수 있다.

가독성과 유지보수성
reduce() 함수를 사용할 때 코드의 가독성과 유지보수성을 고려해야 한다. 너무 복잡하게 구성되지 않도록 주의하고, 적절한 주석과 변수명을 사용하여 코드를 명확하게 작성해야 한다.


위와 같이 초기값의 설정과 원본 배열의 불변성, 콜백 함수의 처리, 성능 등을 고려하여 함수를 사용해야 한다. 

 

---

마무리

오늘은 자바스크립트 reduce() 함수에 대해서 정리해 봤다. reduce() 함수는 배열 요소들의 누적 합산을 하는 기능이 가장 큰 특징인 것 같다. 그리고 유사한 순회 함수로 filter(), map(), some(), every() 등과 같은 함수들과 적절하게 체이닝시켜 사용한다면 효율적인 배열 처리가 가능하다.