JavaScript에서 여러 배열을 조합해 객체 배열을 만드는 방법

문제 상황

다음과 같이 두 개의 배열이 있다고 가정해 보겠습니다.

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

이 두 배열을 조합하여 아래와 같은 형태의 새로운 객체 배열을 생성하고 반환하는 JavaScript 함수를 작성해야 합니다.

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

즉, 첫 번째 배열의 요소는 opt 속성에, 두 번째 배열의 요소는 val 속성에 매핑하면 됩니다.

방법 1: 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 }
]

방법 2: map() 메서드 활용

코드를 더 간결하게 작성하고 싶다면 Array.prototype.map() 메서드를 사용할 수 있습니다. map()은 각 요소를 변환한 결과로 새로운 배열을 반환하므로 이 문제에 딱 맞는 도구입니다.

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()을 사용하면 별도의 임시 배열 선언 없이 한 줄로 처리할 수 있어 가독성과 유지보수성 면에서 더 유리합니다. 단, 두 배열의 길이가 다를 경우 짧은 배열 기준으로 처리되므로, 필요하다면 길이 검증 로직을 추가하는 것이 좋습니다.