JavaScript에서 배열 속성을 가진 객체를 하나의 배열로 병합하는 최선의 방법

실무에서는 여러 개의 배열을 값으로 가지는 객체를 마주치는 경우가 많습니다. 이럴 때 객체에 담긴 모든 배열을 하나의 평탄화(flattened)된 배열로 합쳐야 할 필요가 생기는데요, 이번 글에서는 그 해결 방법을 단계별로 살펴보겠습니다.

예를 들어 다음과 같은 객체가 있다고 가정해 보겠습니다.

const obj = {
    arr_a: [9, 3, 2],
    arr_b: [1, 5, 0],
    arr_c: [7, 18]
};

우리가 작성해야 할 JavaScript 함수는 위와 같은 객체를 입력으로 받아, 모든 배열의 요소를 순서대로 이어 붙인 하나의 병합 배열을 반환해야 합니다.

따라서 최종 출력 결과는 다음과 같아야 합니다.

const output = [9, 3, 2, 1, 5, 0, 7, 18];

방법 1: for...in 반복문과 전개 연산자 사용

가장 기본적인 접근 방식은 객체의 각 키를 순회하면서, 해당 키에 담긴 배열의 요소를 전개 연산자(spread operator)를 이용해 결과 배열에 하나씩 추가하는 것입니다.

const obj = {
    arr_a: [9, 3, 2],
    arr_b: [1, 5, 0],
    arr_c: [7, 18]
};

const objectToArray = (obj = {}) => {
    const res = [];
    for (key in obj) {
        const el = obj[key];
        res.push(...el);
    }
    return res;
};

console.log(objectToArray(obj));

출력 결과

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

[
    9, 3, 2, 1,
    5, 0, 7, 18
]

방법 2: Object.values()와 flat() 활용하기

ES2019에서 도입된 Array.prototype.flat() 메서드를 사용하면 같은 로직을 훨씬 더 간결하게 표현할 수 있습니다.

const objectToArray = (obj = {}) => Object.values(obj).flat();

console.log(objectToArray(obj));
// [9, 3, 2, 1, 5, 0, 7, 18]

Object.values()는 객체의 값(즉, 각 배열)만 모아 새로운 배열로 반환하고, 이어지는 flat()이 중첩된 구조를 한 단계 평탄화해 줍니다. 만약 배열이 여러 겹으로 중첩되어 있다면 flat(Infinity)처럼 인수를 지정해 모든 깊이를 평탄화할 수도 있습니다.

마무리

두 방법 모두 동일한 결과를 내지만, 코드의 가독성과 유지보수 측면에서는 Object.values().flat()을 활용하는 두 번째 방법이 더 권장됩니다. 반복문 기반 방식은 로직을 명시적으로 제어해야 하는 상황에서 유용하니, 상황에 맞게 선택해서 사용하시기 바랍니다.