자바스크립트에서 문자열 배열을 분할해 객체로 변환하는 방법

자바스크립트로 개발하다 보면 각 요소에 하이픈(-)이 포함된 문자열 배열을 다루는 경우가 있습니다. 이때 하이픈의 왼쪽은 키(key), 오른쪽은 값(value)이 됩니다. 우리가 해야 할 작업은 이 문자열들을 분할(split)하여 하나의 객체(object)로 만드는 것입니다.

예제 배열

다음과 같은 샘플 배열이 있다고 가정해 보겠습니다.

const arr = ["name-Rakesh", "age-23", "city-New Delhi", "jobType-remote", "language-English"];

구현 방법

배열을 순회하면서 각 문자열을 split("-") 메서드로 나누고, 그 결과를 새로운 객체에 추가하면 됩니다. forEach와 구조 분해 할당(destructuring)을 활용하면 코드를 매우 간결하게 작성할 수 있습니다.

• split("-"): 문자열을 하이픈 기준으로 잘라 배열을 반환합니다. 예를 들어 "name-Rakesh"는 ["name", "Rakesh"]가 됩니다.
• 구조 분해 할당: const [key, value] = ... 형태로 반환된 배열의 첫 번째 요소를 key, 두 번째 요소를 value에 담습니다.
• 객체에 추가: obj[key] = value로 동적 속성을 생성합니다.

전체 코드

const arr = ["name-Rakesh", "age-23", "city-New Delhi", "jobType-remote", "language-English"];
const obj = {};
arr.forEach(string => {
    const [key, value] = string.split("-");
    obj[key] = value;
});
console.log(obj);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 객체가 출력됩니다.

{
    name: 'Rakesh',
    age: '23',
    city: 'New Delhi',
    jobType: 'remote',
    language: 'English'
}

추가 팁: reduce 활용하기

forEach 외부 변수 없이 reduce를 사용하면 더욱 함수형 스타일로 처리할 수 있습니다.

const obj = arr.reduce((acc, str) => {
    const [key, value] = str.split("-");
    acc[key] = value;
    return acc;
}, {});
console.log(obj); // 위와 동일한 결과 출력

값에 하이픈이 포함될 가능성이 있다면(예: "phone-010-1234-5678") split에 두 번째 인자로 개수 제한을 주거나 정규식을 활용하는 방법도 고려할 수 있습니다. 예를 들어 str.split(/-(.*)/s)처럼 첫 번째 하이픈만 기준으로 분리하면 안전합니다.