JavaScript에서 여러 배열을 열 단위로 하나의 객체 배열로 병합하는 방법

JavaScript로 개발하다 보면 여러 개의 배열에 나뉘어 저장된 데이터를 하나의 객체 배열로 합쳐야 하는 경우가 자주 있습니다. 예를 들어 다음과 같이 세 개의 숫자 배열이 있다고 가정해 보겠습니다.

const code = [123, 456, 789];
const year = [2013, 2014, 2015];
const period = [3, 4, 5];

여기서 우리가 만들어야 할 것은 이 세 배열을 인자로 받아, 각 배열의 같은 인덱스에 있는 값들을 하나의 객체로 묶어 새로운 객체 배열을 반환하는 함수입니다. 즉, 각 배열을 '열(column)'처럼 취급하여 세로 방향으로 병합하는 것이죠. 최종적으로 얻고자 하는 결과는 다음과 같습니다.

const output = [
    {"code": 123, "year": 2013, "period": 3},
    {"code": 456, "year": 2014, "period": 4},
    {"code": 789, "year": 2015, "period": 5}
];

구현 코드

이를 구현하는 가장 간단한 방법은 반복문을 사용해 각 인덱스의 값을 순서대로 꺼내 객체로 조합하는 것입니다.

const code = [123, 456, 789];
const year = [2013, 2014, 2015];
const period = [3, 4, 5];

const mergeColumnWise = (code = [], year = [], period = []) => {
    let results = [];
    for(let i = 0; i < code.length; i++) {
        results.push({
            code: code[i],
            year: year[i],
            period: period[i]
        });
    }
    return results;
};

console.log(mergeColumnWise(code, year, period));

실행 결과

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

[
    { code: 123, year: 2013, period: 3 },
    { code: 456, year: 2014, period: 4 },
    { code: 789, year: 2015, period: 5 }
]

코드 설명

함수 mergeColumnWise는 세 개의 배열을 매개변수로 받으며, 기본값으로 빈 배열([])을 지정해 인자가 누락되어도 오류가 발생하지 않도록 안전장치를 두었습니다. 그런 다음 첫 번째 배열의 길이만큼 반복하면서 각 인덱스 i에 해당하는 값을 세 배열에서 가져와 하나의 객체로 만들고, push() 메서드로 결과 배열에 추가합니다. 모든 반복이 끝나면 완성된 객체 배열을 반환합니다.

map()을 활용한 대안

반복문 대신 Array.prototype.map()을 사용하면 더욱 간결하게 표현할 수 있습니다.

const mergeColumnWise = (code = [], year = [], period = []) =>
    code.map((c, i) => ({ code: c, year: year[i], period: period[i] }));

두 방식 모두 시간 복잡도는 O(n)으로 동일하지만, map()을 활용한 버전은 코드가 짧고 선언형 스타일이라 가독성이 좋다는 장점이 있습니다. 상황과 팀의 코딩 스타일에 맞게 선택하여 사용하시면 됩니다.