JavaScript에서 쉼표와 세미콜론으로 구분된 문자열을 2차원 배열로 분할하는 방법

JavaScript를 사용하다 보면 쉼표(,)와 세미콜론(;)으로 구분된 복잡한 형태의 문자열을 다뤄야 하는 경우가 종종 있습니다. 예를 들어, 각 사용자가 세미콜론으로 구분되고, 각 사용자의 속성은 쉼표로 구분된 다음과 같은 문자열이 있다고 가정해 보겠습니다.

const users = 'Bob,1234,Bob@example.com;Mark,5678,Mark@example.com';

여기서 요구되는 것은 이러한 형태의 문자열을 입력받아 아래와 같은 2차원(다차원) 배열로 변환하는 JavaScript 함수를 작성하는 것입니다.

const arr = [
    ['Bob', 1234, 'Bob@example.com'],
    ['Mark', 5678, 'Mark@example.com']
];

해결 접근 방식

이 문제는 split() 메서드를 두 단계로 활용하면 간단하게 해결할 수 있습니다. 먼저 세미콜론을 기준으로 문자열을 분할하여 각 사용자별 문자열로 만들고, 그다음 각 사용자 문자열을 쉼표를 기준으로 한 번 더 분할하여 속성 배열을 만드는 방식입니다.

예제 코드

실제 동작하는 코드는 다음과 같습니다.

const users = 'Bob,1234,Bob@example.com;Mark,5678,Mark@example.com';

const splitByPunctuations = (str = '') => {
    let res = [];
    // 먼저 세미콜론(;)을 기준으로 분할
    res = str.split(';');
    // 각 항목을 쉼표(,)를 기준으로 다시 분할
    for(let i = 0; i < res.length; i++){
        res[i] = res[i].split(',');
    };
    return res;
};

console.log(splitByPunctuations(users));

실행 결과

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

[
    [ 'Bob', '1234', 'Bob@example.com' ],
    [ 'Mark', '5678', 'Mark@example.com' ]
]

추가 팁: map()을 활용한 더 간결한 방법

for 반복문 대신 map() 메서드를 사용하면 코드를 더욱 간결하고 함수형 스타일로 작성할 수 있습니다.

const splitByPunctuations = (str = '') =>
    str.split(';').map(item => item.split(','));

console.log(splitByPunctuations(users));

두 방법 모두 동일한 결과를 반환하지만, map()을 활용한 방식이 코드가 짧고 가독성이 뛰어나므로 실무에서는 후자를 선호하는 경우가 많습니다. 참고로 split()의 결과는 항상 문자열 배열이므로, 숫자 타입이 필요하다면 Number()나 parseInt()를 사용해 별도로 변환해 주어야 합니다.