JavaScript에서 같은 숫자로 시작하는 문자열 그룹으로 묶는 방법

문자열 형태의 숫자들로 이루어진 배열이 있다고 가정해 보겠습니다.

const arr = ["1.1","1.2","1.3","2.1","2.2","3.1","3.2","3.3","4.1","4.2"];

여기서 우리가 작성해야 할 것은 이러한 배열을 입력받아, 소수점 앞의 숫자(첫 번째 숫자)가 같은 문자열들을 하나의 하위 배열로 묶어주는 JavaScript 함수입니다.

따라서 함수의 최종 출력 결과는 다음과 같은 형태가 됩니다.

const output = [["1.1","1.2","1.3"],["2.1","2.2"],["3.1","3.2","3.3"],["4.1","4.2"]];

구현 코드 예시

이를 구현한 코드는 다음과 같습니다.

const arr = ["1.1","1.2","1.3","2.1","2.2","3.1","3.2","3.3","4.1","4.2"];
const groupSimilarStarters = arr => {
    let res = [];
    res = arr.reduce((acc, val, ind) => {
        const firstChar = el => {
            return (el || '').split('.')[0];
        }
        if(firstChar(val) === firstChar(arr[ind - 1])){
            acc[acc.length - 1].push(val);
        }else{
            acc.push([val]);
        };
        return acc;
    }, []);
    return res;
}
console.log(groupSimilarStarters(arr));

코드 동작 원리

이 코드의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.

1. 첫 번째 숫자 추출: firstChar 함수는 각 문자열을 마침표(.) 기준으로 분할한 뒤 첫 번째 요소, 즉 소수점 앞의 숫자를 반환합니다. 예를 들어 "1.1"은 "1"을 반환합니다.

2. reduce를 활용한 그룹화: reduce 메서드를 사용하여 배열을 순회하면서, 현재 요소의 첫 번째 숫자가 바로 앞 요소의 첫 번째 숫자와 같으면 기존 그룹(마지막 하위 배열)에 추가하고, 다르면 새로운 하위 배열을 생성합니다.

3. 연속성 전제: 이 방식은 같은 숫자로 시작하는 문자열들이 배열 내에서 서로 인접해 있을 때 올바르게 동작한다는 점에 유의해야 합니다. 만약 배열이 정렬되어 있지 않다면, 먼저 sort() 메서드로 정렬한 후 이 함수를 적용하는 것이 좋습니다.

출력 결과

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

[
    [ '1.1', '1.2', '1.3' ],
    [ '2.1', '2.2' ],
    [ '3.1', '3.2', '3.3' ],
    [ '4.1', '4.2' ]
]

이처럼 reduce와 간단한 헬퍼 함수만으로도 조건에 맞는 그룹핑 로직을 깔끔하게 구현할 수 있습니다.