JavaScript에서 두 개의 배열을 하나의 JSON 객체 배열로 변환하는 방법

문제 상황

JavaScript 개발을 하다 보면 두 개의 배열을 하나의 객체 배열로 합쳐야 하는 경우가 자주 있습니다. 예를 들어 다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

이 두 배열의 요소를 인덱스 기준으로 짝지어, 아래와 같은 형태의 객체 배열(JSON)로 변환하고자 합니다.

const response = [
    { opt: 'A', val: true },
    { opt: 'B', val: false },
    { opt: 'C', val: false },
    { opt: 'D', val: false }
];

for 반복문을 이용한 해결 방법

가장 기본적인 접근 방식은 for 반복문을 사용하는 것입니다. 각 인덱스에 해당하는 요소들을 하나의 객체로 묶어 새로운 배열에 추가하면 됩니다.

예제 코드

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

const mapArrays = (options, values) => {
    const res = [];
    for (let i = 0; i < options.length; i++) {
        res.push({
            opt: options[i],
            val: values[i]
        });
    }
    return res;
};

console.log(mapArrays(options, values));

실행 결과

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

[
    { opt: 'A', val: true },
    { opt: 'B', val: false },
    { opt: 'C', val: false },
    { opt: 'D', val: false }
]

map() 메서드를 이용한 더 간결한 방법

ES6 이상 환경이라면 map() 메서드를 활용해 훨씬 간결하게 작성할 수 있습니다. map()은 원본 배열을 순회하면서 콜백 함수의 반환값으로 새로운 배열을 생성하기 때문에, 별도의 빈 배열 선언이나 push 작업이 필요하지 않습니다.

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

const mapArrays = (options, values) =>
    options.map((opt, i) => ({ opt, val: values[i] }));

console.log(mapArrays(options, values));

두 방법 모두 동일한 결과를 반환하지만, map()을 사용하면 코드가 짧아지고 의도가 더 명확하게 드러난다는 장점이 있습니다. 단, 두 배열의 길이가 다를 경우 짧은 배열을 기준으로 변환되므로, 실무에서는 배열 길이가 일치하는지 먼저 확인하는 것이 안전합니다.