🏆 Array.reduce() 활용법! ✨

이번에 네이버 부스트캠프(네부캠) 챌린지 과정을 하면서 js에 대해서 처음 배우는 중입니다. 네부캠 슬랙에서 reduce 함수에 대해서 자료 공유가 올라와서 글을 읽으면서 정리해보았습니다~

---

0. reduce 함수란??

Array.reduce()는 배열의 각 요소를 순회하며 누적 값을 계산하는 함수입니다. 이 함수는 콜백 함수와 초기값, 두 가지 매개변수를 받습니다.

• 콜백 함수: (accumulator, currentValue, currentIndex, array) => { ... }
  - accumulator: 누적값
  - currentValue: 현재 배열 요소
  - currentIndex: 현재 인덱스 (옵션)
  - array: 호출된 배열 (옵션)
• 초기값: 누적값의 초기값

1. 숫자 합산하기 🧮

배열의 모든 숫자를 합산하는 방법입니다. 이 예제는 가장 기본적이지만, 강력한 reduce의 활용법입니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

reduce 함수는 배열의 모든 숫자를 하나의 값으로 합산하는 데 유용합니다. 콜백 함수 (acc, curr) => acc + curr에서 acc는 누적값, curr는 현재 배열 요소를 의미합니다. 초기값 0부터 시작하여 각 요소를 누적하여 더해갑니다. 이 방법으로 배열 [1, 2, 3, 4, 5]의 모든 숫자를 합산하여 15를 얻습니다.

2. 배열 평탄화 (Flattening Arrays) 📜

중첩된 배열을 단일 배열로 만드는 방법입니다.

const nested = [[1, 2], [3, 4], [5]];
const flattened = nested.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattened); // [1, 2, 3, 4, 5]

중첩된 배열을 단일 배열로 만드는 데 reduce와 concat을 함께 사용합니다. 콜백 함수에서 현재 배열 요소(curr)를 누적 배열(acc)에 합칩니다. 초기값은 빈 배열 []입니다. 이렇게 하면 배열 [[1, 2], [3, 4], [5]]를 평탄화하여 [1, 2, 3, 4, 5]로 만듭니다.

concat() 함수는 JavaScript에서 배열이나 문자열을 병합하는 데 사용됩니다. 이 함수는 기존 배열이나 문자열을 변경하지 않고, 새로운 배열이나 문자열을 반환합니다.

3. 객체 속성으로 그룹화하기 🎨

객체 배열을 특정 속성으로 그룹화합니다.

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
const groupedByAge = people.reduce((acc, curr) => {
  acc[curr.age] = acc[curr.age] || [];
  acc[curr.age].push(curr);
  return acc;
}, {});
console.log(groupedByAge);
// { 25: [{ name: 'Bob', age: 25 }], 30: [{ name: 'Alice', age: 30 }, { name: 'Charlie', age: 30 }] }

객체 배열을 특정 속성으로 그룹화할 때 reduce를 사용합니다. 여기서는 age 속성으로 그룹화합니다. acc[curr.age] = acc[curr.age] || []는 현재 나이(curr.age)에 해당하는 배열이 없으면 빈 배열을 할당하고, 있으면 그대로 둡니다. 이후 acc[curr.age].push(curr)로 현재 객체를 해당 나이의 배열에 추가합니다. 이렇게 하면 사람들을 나이별로 그룹화할 수 있습니다.

저는 이번에 js에서는 객체에 []연산자를 이용해서 키를 추가하고 값을 할당 할 수 있다는 사실을 처음 알게 되었습니다~
또한 js에서 a = val1 || val2; 이런식으로 사용하면 val1이 undefined인 경우 val2로 초기화 됩니다.

4. 맵 만들기 🗺️

키-값 맵을 생성합니다.

const people = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const peopleMap = people.reduce((acc, person) => {
  acc[person.id] = person;
  return acc;
}, {});
console.log(peopleMap);
// { 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' }, 3: { id: 3, name: 'Charlie' } }

reduce를 사용하여 객체 배열을 맵으로 변환합니다. 여기서 각 객체의 id를 키로 사용합니다. acc[person.id] = person을 통해 각 객체를 맵에 추가합니다. 초기값은 빈 객체 {}입니다. 결과적으로, 사람들을 ID를 키로 가지는 맵으로 변환합니다.

5. 발생 빈도 계산 📊

배열 내 각 요소의 발생 빈도를 계산합니다.

const fruits = ['apple', 'banana', 'orange', 'apple', 'orange', 'banana', 'banana'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count);
// { apple: 2, banana: 3, orange: 2 }

배열 내 각 요소의 발생 빈도를 계산하기 위해 reduce를 사용합니다. 콜백 함수에서 acc[fruit] = (acc[fruit] || 0) + 1로 현재 과일의 빈도를 증가시킵니다. 초기값은 빈 객체 {}입니다. 이를 통해 각 과일의 발생 빈도를 계산하여 객체로 반환합니다.

6. 함수 합성 🛠️

함수들을 합성하여 새로운 함수를 만듭니다.

const compose = (...functions) => initialValue =>
  functions.reduceRight((value, func) => func(value), initialValue);

const add5 = x => x + 5;
const multiply = x => x * 2;

const composed = compose(add5, multiply);
console.log(composed(10)); // 25

reduce와 reduceRight를 사용하여 함수들을 합성합니다. 함수 합성은 여러 함수를 결합하여 새로운 함수를 만드는 과정입니다. 이 예제에서는 compose 함수를 정의하여 여러 함수를 결합하고, initialValue부터 시작하여 오른쪽에서 왼쪽으로 함수들을 적용합니다.

JavaScript 코드에서 "..."는 "스프레드 연산자(Spread Operator)" 또는 "나머지 매개변수(Rest Parameter)"로 사용됩니다.

스프레드 연산자 (Spread Operator)
스프레드 연산자는 배열 또는 객체를 개별 요소로 분해합니다. 배열이나 객체의 요소를 펼치는 데 사용됩니다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr1의 요소를 개별 요소로 분해하고 새로운 요소 추가
console.log(arr2); // [1, 2, 3, 4, 5]

나머지 매개변수 (Rest Parameter)
나머지 매개변수는 함수의 인수를 배열로 수집합니다. 함수의 매개변수 목록의 나머지 부분을 하나의 배열로 모을 때 사용됩니다.

function sum(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

7. 상태 관리 🔄

간단한 상태 관리를 구현합니다.

const actions = [
  { type: 'INCREMENT' },
  { type: 'INCREMENT' },
  { type: 'DECREMENT' }
];
const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const finalState = actions.reduce(reducer, initialState);
console.log(finalState); // { count: 1 }

reduce를 사용하여 간단한 상태 관리 시스템을 구현합니다. 상태 변경을 나타내는 액션 배열을 순회하며 상태를 업데이트합니다. reducer 함수는 현재 상태와 액션을 받아 새로운 상태를 반환합니다. 초기값은 { count: 0 }입니다. 액션 배열을 순회하여 최종 상태를 계산합니다.

8. 고유 값 생성 🔍

배열에서 고유한 값을 생성합니다.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = numbers.reduce((acc, number) => {
  if (!acc.includes(number)) {
    acc.push(number);
  }
  return acc;
}, []);
console.log(unique); // [1, 2, 3, 4, 5]

배열에서 중복된 값을 제거하고 고유한 값을 얻기 위해 reduce를 사용합니다. 콜백 함수에서 현재 숫자가 누적 배열에 포함되어 있지 않으면 추가합니다. 초기값은 빈 배열 []입니다. 이를 통해 중복을 제거하고 고유한 값들만 남깁니다.

9. 평균 계산 📏

배열의 평균을 계산합니다.

const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((acc, curr, index, array) => {
  acc += curr;
  if (index === array.length - 1) {
    return acc / array.length;
  }
  return acc;
}, 0);
console.log(average); // 3

배열의 평균을 계산하기 위해 reduce를 사용합니다. 누적값에 현재 값을 더하고, 배열의 마지막 요소일 때 총합을 배열 길이로 나눕니다. 초기값은 0입니다. 이를 통해 배열의 모든 요소의 평균을 계산합니다.

참고 블로그