JavaScript에서 중첩 배열을 하나의 배열로 평탄화하는 방법

JavaScript를 다루다 보면 배열 안에 배열이 중첩된 형태의 데이터를 자주 만나게 됩니다. 예를 들어 다음과 같은 배열의 배열(2차원 배열)이 있다고 가정해 보겠습니다.

const arr = [
    [ {"c": 1},{"d": 2} ],
    [ {"c": 2},{"d": 3} ]
];

여기서 요구되는 작업은 이 배열을 인수로 받아, 중첩된 내부 배열을 제거하고 객체들만 담긴 새로운 단일 배열을 만드는 함수를 작성하는 것입니다.

즉, 최종 출력 결과는 다음과 같은 형태가 되어야 합니다.

const output = [{"c": 1},{"d": 2},{"c": 2},{"d": 3}];

해결 방법: forEach를 활용한 평탄화

가장 직관적인 방법은 바깥쪽 배열과 안쪽 배열을 각각 순회하면서 요소들을 새로운 배열에 하나씩 추가하는 것입니다. 아래 예제 코드를 살펴보겠습니다.

const arr = [
    [ {"c": 1},{"d": 2} ],
    [ {"c": 2},{"d": 3} ]
];
const simplifyArray = (arr = []) => {
    const res = [];
    arr.forEach(element => {
        element.forEach(el => {
            res.push(el);
        });
    });
    return res;
};
console.log(simplifyArray(arr));

출력 결과

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

[ { c: 1 }, { d: 2 }, { c: 2 }, { d: 3 } ]

다른 방법: flat()과 reduce() 활용하기

ES2019부터 도입된 Array.prototype.flat() 메서드를 사용하면 훨씬 간결하게 처리할 수 있습니다.

const output = arr.flat();
console.log(output); // [ { c: 1 }, { d: 2 }, { c: 2 }, { d: 3 } ]

또한 reduce()와 전개 연산자(spread operator)를 조합하는 방법도 널리 사용됩니다.

const output = arr.reduce((acc, cur) => [...acc, ...cur], []);
console.log(output); // [ { c: 1 }, { d: 2 }, { c: 2 }, { d: 3 } ]

마무리

중첩 배열을 단일 배열로 변환하는 작업은 실무에서 매우 흔하게 발생합니다. 간단한 경우에는 flat() 메서드가 가장 깔끔한 선택이며, 순회 과정에서 추가 로직이 필요하다면 forEach나 reduce를 활용하는 것이 좋습니다. 상황에 맞는 방법을 골라 사용해 보시기 바랍니다.