[Java Script] reduce() 베열 및 데이터 변환으로 사용하는 방법

자바스크립트 reduce() MDN 정의

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

 

리듀서 함수는 4개의 인자를 가진다.
1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

 

1-1) 1행에서 reduce()메서드의 콜백 함수에 두 개의 인수를 전달

1-2) 두 개의 인수는 반환되는 항목(collectedValues라고 부른다.)과 개별 항목이다.

1-3) 반환값은 콜백 함수가 반환하는 값을 누적한 것으로, reduce() 메서드가 특별한 이유다.

1-4) reduce() 메서드의 반환값은 정수뿐 아니라 세트 같은 컬렉션도 될 수 있다.

 

2-1) 7행의 reduce() 메서드는 두 가지 값, 즉 콜백 함수와 기본값을 전달받는다.

2-2) 기본값은 선택적으로 넘겨줄 수 있지만 대부분의 경우 작성한다.

2-3) 기본값을 작성하면 반환값을 담을 수 있고, 다른 개발자들에게 반환되는 값에 대한 단서를 제공한다.

2-4) reduce() 메서드에서 까다로운 부분은 콜백 함수에서 항상 누적된 값을 반환해야 한다는 점이다.

const callback = function (collectedValues, item) {
    return [...collectedValues, item];
}
 
const saying = ['venti', 'vedi', 'veci'];
const initialValue = [];
const copy = saying.reduce(callback, initialValue);
console.log('copy : ', copy);
// [ 'venti', 'vedi', 'veci' ]

 

대부분의 예제가 숫자를 사용해서 추상적인 개념만 제공된다. 일반적인 경우를 고려하기 위해 배열에서 고윳값을 분류하는 경우의 예시이다.

const dogs = [
  {
    이름: "우주",
    크기: "소형견",
    견종: "푸들",
    색상: "검정색",
  },
  {
    이름: "은하",
    크기: "중형견",
    견종: "레브라도레트리버",
    색상: "검정색",
  },
 
  {
    이름: "도니",
    크기: "대형견",
    견종: "보스턴테리어",
    색상: "빨간색",
  },
];
 
const colors = dogs.reduce((colors, dog) => {
  // inCludes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별
  if (colors.includes(dog["색상"])) {
    return colors;
  }
  return [...colors, dog["색상"]];
}, []);
console.log("colors : ", colors);
// [ '검정색', '빨간색' ]

 

reduce() 메서드를 볼 때는 맨 뒷부분부터 보면 결과값을 쉽게 알 수 있다. 결과값은 어떤 형식든 가능하다.

문자열, 불 값, 객체 등 무엇이든 가능하다.

 

29행을 보면 빈 배열로 함수를 초기화하는 것을 알 수 있다.

reduce() 메서드를 파악하기 위한 또 다른 중요한 요소는 초깃값이 함수에 전달된 후 어떻게 불리는지 이해하는 것이다. 

 

주의할 점은, 누적값을 반환하지 않으면 값은 완전히 사라진다. 밑에 코드에서 확인해보자

const dogs = [
  {
    이름: "우주",
    크기: "소형견",
    견종: "푸들",
    색상: "검정색",
  },
  {
    이름: "은하",
    크기: "중형견",
    견종: "레브라도레트리버",
    색상: "검정색",
  },
 
  {
    이름: "도니",
    크기: "대형견",
    견종: "보스턴테리어",
    색상: "빨간색",
  },
];
 
const colors = dogs.reduce((colors, dog) => {
  if (colors.includes(dog["색상"])) {
    return colors;
  }
  [...colors, dog["색상"]];
}, []);
console.log("colors : ", colors);
// TypeError: Cannot read property 'includes' of undefined
// reduce의 누적값을 반환하지 않으면 값은 완전히 사라져서 TypeError 발생

 

 

지금까지 나는 두 가지 작업을 수행했다. 데이터의 일부를 반환해 크기(길이)를 변경했고, 동시에 형태도 변경해 반환했다. 중요한 점은 배열 내부에 있는 정보를 기반으로 크기를 변경한것이다. 데이터의 크기와 형태를 모두 변경할 수 있기 때문에 reduce() 메서드를 이용해서 다른 배열 메서드를 다시 만들 수도 있다. 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어