[javascript] reduce() 함수 사용법 및 쉬운 예시

 

📌1. reduce()함수란?

JavaScript의 reduce() 함수는 배열의 각 요소에 대해 콜백함수를 실행하고, 하나의 새로운 결과값을 반환해주는 함수입니다. 하나의 결과값을 리턴하기 때문에 reduce()는 해당 요소의 값을 기반으로 배열에서 단일 값을 파생해야 할 때 특히 유용합니다. 예를 들면, 각 요소의 값을 합산한 결과값 하나만 리턴하는 경우에 reduce를 사용하면 유용합니다. 

기본 구문은 다음과 같습니다. 

array.reduce(callback[, initialValue]);

• callback: 콜백함수는 배열의 각 요소에 대해 실행되며, 아래 4가지 인수를 가지고 있습니다.
  • accumulator: 이전 콜백 실행의 누적 결과 (콜백 함수의 반환 값을 누적한 값)
  • currentValue: 배열의 현재 요소
  • currentIndex(선택 사항): 현재 처리 중인 요소의 인덱스
  • array (선택 사항): 호출한 배열
• initialValue(선택사항): 콜백함수의 첫 번째 호출에 대한 첫 번째 인수로 사용하는 값입니다. 초기 값이 제공되지 않으면 배열의 첫 번째 요소가 사용됩니다.

 

 

📌2. 사용 예시(배열, 오브젝트 배열)

2-1. 배열 예시

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log('sum: ', sum)		// sum:  15

* 배열을 사용할 때는 accumulator의 initialValue(초기값)을 생략할 수 있습니다. 배열에서는 initialValue가 없으면 첫 번째 배열 요소를 자동으로 초기값으로 사용합니다.

 

 

2. 오브젝트 배열 예시

const users = [
    { name: 'Mike', age: 30 },
    { name: 'Sam', age: 18 },
    { name: 'Susan', age: 16 },
    { name: 'Tom', age: 12 },
    { name: 'Tomu', age: 40 },
    { name: 'Herry', age: 20 },
];


  const sum = users.reduce((accumulator, currentValue) => {
    return accumulator + currentValue.age;
  }, 0)
  console.log('sum: ', sum)			// sum:  136

* 하지만 객체를 reduce 함수로 처리할 때는 초기값을 반드시 명시해주어야 합니다. 왜냐하면 객체의 초기값은 명확하지 않기 때문에, 초기값을 명시하지 않으면 에러가 발생합니다.

 

 

📌3. reduce함수 언제쓰나요?

 reduce()는 해당 요소의 값을 기반으로 배열에서 새로운 단일 값을 파생해야 할 때 유용합니다. 몇가지 예시를 보여드리겠습니다.

1. 값 합산: 장바구니에 담긴 항목의 총 가격 하나만 파생해야 하는 경우
   

   const cart = [
       { name: 'apple', price: 3000 },
       { name: 'spoon', price: 5000 },
       { name: 'onion', price: 3000 },
       { name: 'potato', price: 3000 }
   ];
   
   
     const sum = cart.reduce((accumulator, currentValue) => {
       return accumulator + currentValue.price;
     }, 0)
   
     console.log('sum: ', sum)     // sum:  14000​

2. 평균 계산: 합산한 값의 평균값 하나만 파생해야하는 경우
   

   const numbers = [1, 2, 3, 4, 5];
   const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
   const ave = sum / numbers.length;
   
   console.log('Ave:', ave);  		 // Ave: 3

3. 배열 병합: 여러가지 배열을 병합해서 하나의 배열을 만들어야하는 경우
   

   const arrays = [[1, 2], [3, 4, 5], [6]];
   const flat = arrays.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
   
   console.log('Flat:', flat); 		// Flat: [ 1, 2, 3, 4, 5, 6 ]​

   
   
   
4. 데이터 변환: 요소의 값들을 변형해서 하나의 새로운 배열로 만들어야 하는 경우 
   

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   const dubble = numbers.reduce((accumulator, currentValue) => {
       if (currentValue % 2 === 0) {
           accumulator.push(currentValue * 2);
       }
     return accumulator;
   }, []);
   console.log('dubble:', dubble);         // dubble: [ 4, 8, 12, 16, 20 ]

5. 빈도 계산: 배열에 같은 요소가 여러개 있을 때, 해당 요소가 몇개나 있는지 하나의 객체로 나타내고 싶은 경우

   const data = ['apple', 'banana', 'peach', 'apple', 'banana', 'apple'];
   const count = data.reduce((accumulator, currentValue) => {
       accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
     return accumulator;
   }, {});
   console.log('Count:', count);       // Count: { apple: 3, banana: 2, peach: 1 }​

   * 논리연산자 OR( a || b) : a가 true인 경우 a로 평가, a가 false (false, 0, '', null, undefined, NaN) 인 경우 b로 평가