Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 문자열을 객체 배열로 변환하는 방법

JavaScript로 개발을 하다 보면 특정 형식으로 작성된 문자열을 구조화된 데이터(배열 또는 객체)로 변환해야 하는 경우가 자주 발생합니다. 이번 글에서는 String.prototype.split() 메서드를 활용해 복잡한 형식의 문자열을 객체 배열로 변환하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 특수한 형식의 문자열이 있다고 가정해 보겠습니다.

const str = "Integer,1 Float,2.0\nBoolean,True Integer,6\nFloat,3.66 Boolean,False";

이 문자열을 아래와 같은 객체 배열로 변환하는 JavaScript 함수를 작성해야 합니다.

const arr = [
    {
        "Integer": 1,
        "Float": 2.0
    },
    {
        "Boolean": true,
        "Integer": 6
    },
    {
        "Float": 3.66,
        "Boolean": false
    }
];

변환 규칙

문자열을 배열로 변환할 때는 다음 세 가지 규칙을 적용합니다.

  • 줄바꿈 문자(\n): 하나의 객체가 끝나는 지점을 나타냅니다.
  • 공백 한 칸: 객체 내부에서 하나의 키/값 쌍이 끝나는 지점을 나타냅니다.
  • 콤마(,): 키와 값을 구분하는 구분자 역할을 합니다.

즉, 이 문자열은 계층적으로 구성되어 있습니다. 먼저 줄바꿈으로 각 객체를 분리하고, 그다음 공백으로 키/값 쌍을 분리한 뒤, 마지막으로 콤마로 키와 값을 나누면 됩니다.

구현 코드

위 규칙에 따라 함수를 작성하면 다음과 같습니다.

const str = "Integer,1 Float,2.0\nBoolean,True Integer,6\nFloat,3.66 Boolean,False";

const stringToArray = str => {
    // 1단계: 줄바꿈(\n) 기준으로 각 객체 단위로 분리
    const strArr = str.split('\n');

    return strArr.map(el => {
        // 2단계: 공백 기준으로 키/값 쌍 분리
        const elArr = el.split(' ');

        return elArr.map(elm => {
            // 3단계: 콤마(,) 기준으로 키와 값 분리 후 객체 생성
            const [key, value] = elm.split(',');
            return {
                [key]: value
            };
        });
    });
};

console.log(stringToArray(str));

코드 동작 원리

이 코드의 핵심은 split() 메서드를 세 단계에 걸쳐 중첩해서 사용하는 것입니다.

  1. 첫 번째 split('\n'): 전체 문자열을 줄바꿈 기준으로 잘라 각 줄(객체)별 배열을 만듭니다.
  2. 두 번째 split(' '): 각 줄을 공백 기준으로 잘라 개별 키/값 쌍으로 분리합니다.
  3. 세 번째 split(','): 각 쌍을 콤마 기준으로 잘라 키와 값으로 나눈 뒤, ES6의 계산된 속성명(computed property name) 문법인 [key]: value를 사용해 객체로 만듭니다.

map() 메서드를 연달아 사용하기 때문에 각 단계의 결과가 자연스럽게 새로운 배열로 반환됩니다.

실행 결과

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

[
    [ { Integer: '1' }, { Float: '2.0' } ],
    [ { Boolean: 'True' }, { Integer: '6' } ],
    [ { Float: '3.66' }, { Boolean: 'False' } ]
]

추가 팁: 값의 타입 변환

현재 구현에서는 모든 값이 문자열로 유지됩니다. 만약 숫자나 불리언 타입으로 변환하고 싶다면, 값을 할당하기 전에 타입을 확인하여 변환하는 로직을 추가하면 됩니다.

const parseValue = value => {
    if (value === 'True') return true;
    if (value === 'False') return false;
    if (!isNaN(value) && value !== '') return Number(value);
    return value;
};

// map 내부에서 적용
return {
    [key]: parseValue(value)
};

이렇게 하면 '1'은 숫자 1로, 'True'는 불리언 true로 변환되어 처음 의도했던 목표 배열과 완전히 동일한 결과를 얻을 수 있습니다.

마무리

split()과 map()의 조합은 구분자 기반 문자열을 구조화된 데이터로 파싱할 때 가장 간결하고 직관적인 방법입니다. CSV 데이터 처리나 로그 파일 파싱 등 실무에서도 널리 활용되는 패턴이니 꼭 익혀두시기 바랍니다.