JavaScript에서 가변 개수의 배열을 하나로 합치는 방법

이번 글에서는 임의의 개수의 배열을 인자로 받아, 모든 배열의 값을 하나의 배열에 연결(concatenate)하여 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.

문제 정의

예를 들어 입력으로 다음과 같은 배열들이 주어진다면 −

[1, 5], [44, 67, 3], [2, 5], [7], [4], [3, 7], [6]

함수는 아래와 같이 모든 요소가 순서대로 이어진 단일 배열을 반환해야 합니다 −

const output = [1, 5, 44, 67, 3, 2, 5, 7, 4, 3, 7, 6];

구현 코드

다음은 rest 파라미터(...arr)와 reduce(), concat()을 활용한 구현 코드입니다 −

const a = [1, 5], b = [44, 67, 3], c = [2, 5], d = [7], e = [4], f = [3,
7], g = [6];

const concatArrays = (...arr) => {
    const res = arr.reduce((acc, val) => {
        return acc.concat(...val);
    }, []);
    return res;
};

console.log(concatArrays(a, b, c, d, e, f, g));

코드 동작 원리

− (...arr): 전달된 모든 배열을 하나의 배열 형태로 모아줍니다.
− reduce(): 초기값으로 빈 배열 []을 설정하고, 각 배열을 순회하며 누적 배열에 이어 붙입니다.
− acc.concat(...val): 스프레드 연산자를 사용해 각 배열의 요소들을 개별적으로 펼쳐 누적 배열에 추가합니다.

출력 결과

콘솔에는 다음과 같은 결과가 출력됩니다 −

[
    1, 5, 44, 67, 3,
    2, 5,  7,  4, 3,
    7, 6
]

더 간결한 대안: flat() 활용

ES2019(ES10)부터 지원되는 Array.prototype.flat() 메서드를 사용하면 훨씬 간결하게 같은 기능을 구현할 수 있습니다.

const concatArrays = (...arr) => arr.flat();

console.log(concatArrays(a, b, c, d, e, f, g));
// [1, 5, 44, 67, 3, 2, 5, 7, 4, 3, 7, 6]

flat()은 중첩된 배열을 지정한 깊이만큼 평탄화해 주므로, 위 예제처럼 1차원 배열들의 병합에 적합합니다. 성능 면에서도 대부분의 경우 reduce + concat 조합보다 유리합니다.