JavaScript에서 이름을 첫 글자 기준으로 그룹화하는 방법

JavaScript를 사용하다 보면 배열에 담긴 데이터를 특정 기준으로 묶어야 하는 경우가 자주 발생합니다. 이번 글에서는 이름 목록을 첫 글자(알파벳) 기준으로 그룹화하는 방법을 알아보겠습니다.

문제 상황

예를 들어, 다음과 같은 이름 배열이 있다고 가정해 보겠습니다.

const arr = ["Simon", "Mike", "Jake", "Lara", "Susi", "Blake", "James"];

이 배열을 입력받아 각 그룹의 정보를 담은 객체 배열을 반환하는 함수를 작성해야 합니다. 반환되는 객체는 다음 두 가지 속성을 가져야 합니다.

• letter → 이름을 그룹화하는 기준이 되는 첫 글자

• names → 해당 글자로 시작하는 이름들이 담긴 배열

해결 방법

핵심 아이디어는 reduce() 메서드를 활용해 첫 글자를 키(key)로 하는 객체를 만들고, 이를 다시 원하는 형태의 객체 배열로 변환하는 것입니다. 대소문자 구분 없이 그룹화하기 위해 toUpperCase()로 첫 글자를 통일합니다.

const arr = ["Simon", "Mike", "Jake", "Lara", "Susi", "Blake", "James"];

const groupNames = arr => {
   // reduce()로 첫 글자를 키로 하는 객체 생성
   const map = arr.reduce((acc, val) => {
      let char = val.charAt(0).toUpperCase();
      acc[char] = [].concat((acc[char] || []), val);
      return acc;
   }, {});

   // 객체를 { letter, names } 형태의 배열로 변환
   const res = Object.keys(map).map(el => ({
      letter: el,
      names: map[el]
   }));

   return res;
};

console.log(groupNames(arr));

코드 동작 원리

1. reduce()가 배열을 순회하면서 각 이름의 첫 글자를 추출하고 대문자로 변환합니다.

2. 해당 글자가 누적 객체(acc)에 이미 존재하면 기존 배열에 이름을 추가하고, 없으면 새 배열을 만듭니다.

3. 완성된 맵 객체의 키들을 순회하며 { letter, names } 형태의 객체 배열로 재구성합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
   { letter: 'S', names: [ 'Simon', 'Susi' ] },
   { letter: 'M', names: [ 'Mike' ] },
   { letter: 'J', names: [ 'Jake', 'James' ] },
   { letter: 'L', names: [ 'Lara' ] },
   { letter: 'B', names: [ 'Blake' ] }
]

마무리

이처럼 reduce()와 Object.keys()를 조합하면 별도의 외부 라이브러리 없이도 데이터를 손쉽게 그룹화할 수 있습니다. 이 패턴은 이름뿐만 아니라 날짜별 주문 정리, 카테고리별 상품 분류 등 다양한 실무 시나리오에 응용할 수 있으니 꼭 기억해 두시기 바랍니다.