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

문제 상황

JavaScript 개발을 하다 보면 각 요소가 대시(-)를 포함하고 있는 문자열 배열을 다뤄야 할 때가 있습니다. 이때 대시 왼쪽에는 속성 키(property key)가, 오른쪽에는 해당 키의 값(value)이 위치합니다.

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

const arr = ["playerName-Kai Havertz", "age-21", "nationality-German", "position-CAM", "languages-German,English,Spanish", "club-Chelsea"];

이 배열의 각 문자열을 분할(split)하여 하나의 객체(object)로 변환하는 함수를 작성해야 합니다.

해결 방법

가장 직관적인 접근 방식은 배열을 순회하면서 각 문자열을 대시 기준으로 나눈 뒤, 키와 값을 새로운 객체에 할당하는 것입니다.

구조 분해 할당(destructuring assignment)과 split() 메서드를 조합하면 코드를 매우 간결하게 작성할 수 있습니다.

예제 코드

const arr = ["playerName-Kai Havertz", "age-21", "nationality-German",
"position-CAM", "languages-German,English,Spanish", "club-Chelsea"];

const arrayToObject = arr => {
    const obj = {};
    arr.forEach(string => {
        const [key, value] = string.split("-");
        obj[key] = value;
    });
    return obj;
};

console.log(arrayToObject(arr));

코드 설명

- forEach() 메서드로 배열의 각 문자열을 순회합니다.
- string.split("-")를 호출하면 대시를 기준으로 문자열이 두 부분으로 나뉩니다.
- 구조 분해 할당을 통해 첫 번째 요소는 key, 두 번째 요소는 value에 저장됩니다.
- obj[key] = value 구문으로 새 객체에 속성을 동적으로 추가합니다.
- 모든 순회가 끝나면 완성된 객체를 반환합니다.

실행 결과

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

{
    playerName: 'Kai Havertz',
    age: '21',
    nationality: 'German',
    position: 'CAM',
    languages: 'German,English,Spanish',
    club: 'Chelsea'
}

추가 팁: reduce()를 활용한 더 간결한 방법

reduce() 메서드를 사용하면 같은 로직을 한 줄로 더욱 함수형 스타일로 표현할 수 있습니다.

const arrayToObject = arr =>
    arr.reduce((obj, str) => {
        const [key, value] = str.split("-");
        return { ...obj, [key]: value };
    }, {});