[JavaScript] 굉장히 편한 reduce() 알아보기

자바스크립트에서 .reduce()함수는 배열에서 하나의 결과값을 만들어내는 강력한 함수이다.
조금 어렵게 느껴질 수도 있지만, 핵심 개념이 딱 이해되면 정말 잘 써먹을 수 있다.

 

앞서 말했지만 reduce는 여러 개의 배열 값에 간단한 조작을 통해 하나의 결과 값을 만들어 낼 수 있도록 해준다.

 

---

 

먼저 배열을 하나 생성해보자.

let value = [1, 2, 3, 4, 5];

이 배열의 모든 값을 더한 하나의 결괏값을 출력하기 위해서는 for, forEach 등 다양한 함수를 사용할 수 있다.

하지만, reduce를 사용하면 훨씬 간편하게 결과값을 도출해 낼 수 있다.

 

코드로 예시를 살펴보면,

let value = [1, 2, 3, 4, 5];

const result = value.reduce((acc, cur) => {
  return acc + cur;
}, 0);

console.log(result);

 

이렇게 작성할 수 있다.

 

acc는 지금까지의 누적값을 나타낸다.

누적값 즉, acc의 초기 값은 함수의 괄호 전 '0' 작성해 지정해 준다.

 

cur은 배열을 순차적으로 도는 현재 값을 나타낸다.

for 문에서 i가 증가하며 배열의 값을 순차적으로 도는 것과 같다.

 

따라서, cur의 값은 처음엔 1, 2, 3 이렇게 증가하게 된다.

 

return 값으로 acc와 cur값을 더해주게 되면 결과로는 value라는 배열의 최종 합이 된다.

 

[출력 결과]

 

---

또, reduce를 사용하면 배열의 가장 작은 값을 편하게 찾아낼 수 있다.

 

먼저 다양한 수가 들어있는 배열을 하나 생성해 보자.

let small = [10, 2, 3, 5, 6, 7, 8];

 

이 배열에서 가장 작은 수를 찾아내는 것도 마찬가지로 반복문을 사용해 찾을 수 있다.

 

하지만 reduce를 사용하면 훨씬 간편하게 찾을 수 있다.

const smallest = small.reduce((acc, cur) => {
  if (acc > cur) {
    return cur;
  } else {
    return acc;
  }
});

console.log(smallest);

 

위쪽 코드에서는 total값을 구하기 위해 acc를 0으로 초기화했었다.

 

하지만 이번 코드에서는 아무것도 작성하지 않았는데, 그 이유는 reduce의 사용 목적에 있다.

 

reduce함수에서 마지막에 acc값을 지정하지 않으면

acc는 0번째 배열의 인수를 값으로 가지게 되며,

cur의 값은 1번째 배열의 인수를 값으로 가지게 된다.

 

이렇게 하면 두 값을 비교하여 더 작은 값을 반환할 수 있다.

 

[결과]

 

---

마지막으로, 배열에 객체가 할당되어 있어도 reduce를 통해 간단하게 합을 구할 수 있다.

 

예를 들어 배열에는 과일의 이름과 가격이 저장되어 있고,

과일 가격의 총합을 구하는 코드가 필요하다고 가정해 보자.

 

let object = [
  {
    name: "사과",
    price: 5000,
  },
  {
    name: "망고",
    price: 4000,
  },
  {
    name: "수박",
    price: 9000,
  },
];

 

이러한 경우에도 reduce를 통해 간편하게 과일 가격의 총합을 구할 수 있다.

const totalPrice = object.reduce((acc, cur) => {
  return acc + cur.price;
}, 0);

console.log(totalPrice);

 

 

[결과]

---

이렇게 reduce를 사용하면 코드를 훨씬 간단하게 적으며 원하는 기능을 수행할 수 있다