JavaScript로 두 배열의 대응 요소를 결합하는 방법

문제 개요

이번 글에서는 길이가 같은 두 개의 배열을 입력받아, 대응하는 요소들을 하나의 하위 배열로 묶어 새로운 배열을 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.

즉, 두 배열에서 같은 인덱스에 위치한 요소들을 짝지어 출력 배열의 각 하위 배열로 구성하는 것이 핵심입니다.

입력 예시

두 배열이 다음과 같다고 가정해 보겠습니다 −

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

기대 출력

그렇다면 함수의 최종 출력은 다음과 같아야 합니다 −

const output = [
    ['a', 1],
    ['b', 2],
    ['c', 3]
];

구현 예제

이를 for 루프로 구현한 코드는 다음과 같습니다 −

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];
const combineCorresponding = (arr1 = [], arr2 = []) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
        const el1 = arr1[i];
        const el2 = arr2[i];
        res.push([el1, el2]);
    };
    return res;
};
console.log(combineCorresponding(arr1, arr2));

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다 −

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

대안: map() 메서드 활용

for 루프 대신 Array.prototype.map() 메서드를 사용하면 코드를 훨씬 간결하게 작성할 수 있습니다 −

const combineCorresponding = (arr1 = [], arr2 = []) =>
    arr1.map((el, i) => [el, arr2[i]]);

console.log(combineCorresponding(['a', 'b', 'c'], [1, 2, 3]));

map()은 원본 배열의 각 요소를 순회하면서 콜백 함수가 반환하는 값으로 새로운 배열을 구성합니다. 콜백의 두 번째 인자로 현재 인덱스를 전달받을 수 있기 때문에, 이 인덱스를 활용하면 두 배열의 요소를 손쉽게 짝지을 수 있습니다. 두 방식 모두 시간 복잡도는 O(n)으로 동일하지만, map()을 사용하면 코드의 가독성과 유지보수성이 크게 향상됩니다.