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

JavaScript 개발을 하다 보면 문자열 배열의 각 요소를 키(key)와 값(value)으로 분리하여 객체(object)로 만들어야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 문자열 배열이 있다고 가정해 보겠습니다.

const arr = [ 'type=A', 'day=45' ];

이번 글에서는 이러한 배열을 입력받아 객체로 변환하는 JavaScript 함수를 작성해 보겠습니다. 변환된 객체에는 배열의 각 문자열이 하나의 키/값 쌍으로 담겨야 합니다.

변환 규칙

규칙은 매우 간단합니다. 각 문자열에서 등호(=)를 기준으로 앞부분은 키가 되고, 뒷부분은 값이 됩니다. 예를 들어 'type=A'라는 문자열은 'type'이라는 키와 'A'라는 값으로 분리됩니다.

구현 코드

배열을 순회하면서 split() 메서드로 각 문자열을 나눈 뒤, 새로운 객체에 키/값 쌍을 추가하는 방식으로 구현할 수 있습니다.

const arr = [ 'type=A', 'day=45' ];

const arrayToObject = (arr = []) => {
    const obj = {};
    for (let i = 0; i < arr.length; i++) {
        let currentItem = arr[i].split('=');
        let key = currentItem[0];
        let value = currentItem[1];
        obj[key] = value;
    };
    return obj;
};

console.log(arrayToObject(arr));

실행 결과

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

{ type: 'A', day: '45' }

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

for 반복문 대신 ES6의 reduce() 메서드를 사용하면 코드를 더욱 간결하게 작성할 수 있습니다.

const arrayToObject = (arr = []) =>
    arr.reduce((obj, item) => {
        const [key, value] = item.split('=');
        obj[key] = value;
        return obj;
    }, {});

또한 Object.fromEntries()를 활용하면 한 줄로도 처리할 수 있습니다.

const arrayToObject = (arr = []) =>
    Object.fromEntries(arr.map(item => item.split('=')));

어떤 방법을 선택하든 결과는 동일하지만, 데이터 변환 로직이 많은 프로젝트에서는 reduce()나 Object.fromEntries() 같은 함수형 접근 방식이 가독성과 유지보수 측면에서 유리할 수 있습니다.