JavaScript에서 객체 배열의 여러 속성 값을 하나의 배열로 매핑하는 방법

JavaScript 개발을 하다 보면 객체 배열에 담긴 여러 속성 값들을 하나의 배열로 추출해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {a: 1, b: 2},
    {a: 3, b: 4},
    {a: 5, b: 6}
];

여기서 요구되는 것은 이러한 객체 배열을 입력으로 받아, 각 객체가 가진 모든 속성 값을 순서대로 하나의 숫자 배열로 변환하는 함수입니다. 즉, 아래와 같은 결과를 얻어야 합니다.

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

reduce() 메서드를 활용한 해결 방법

배열의 reduce() 메서드를 사용하면 이 문제를 간결하게 해결할 수 있습니다. reduce()는 누적값(accumulator)을 활용해 배열을 순회하면서 원하는 형태의 단일 결과값을 만들 때 매우 유용합니다.

const arr = [
    {a: 1, b: 2},
    {a: 3, b: 4},
    {a: 5, b: 6}
];

const pushToArray = (arr = []) => {
    const result = arr.reduce((acc, obj) => {
        acc.push(obj.a);
        acc.push(obj.b);
        return acc;
    }, []);
    return result;
};

console.log(pushToArray(arr));

코드 동작 원리

위 코드의 작동 방식을 단계별로 살펴보면 다음과 같습니다.

1. 초기값 설정: reduce()의 두 번째 인자로 빈 배열 []을 전달하여 누적 배열을 초기화합니다.
2. 순회 및 값 추가: 각 객체를 순회하면서 obj.a와 obj.b 값을 차례대로 누적 배열에 push 합니다.
3. 누적값 반환: 콜백 함수가 수정된 누적 배열을 반환하고, 최종적으로 모든 순회가 끝난 후 완성된 배열이 결과가 됩니다.

실행 결과

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

[ 1, 2, 3, 4, 5, 6 ]

참고: Object.values()를 활용한 대안

객체의 속성 개수가 많거나 유동적인 경우에는 Object.values()와 함께 flatMap()을 사용하는 방법도 고려할 수 있습니다.

const output = arr.flatMap(obj => Object.values(obj));
console.log(output); // [ 1, 2, 3, 4, 5, 6 ]

이 방식은 특정 속성명(a, b)에 의존하지 않고 객체가 가진 모든 값을 자동으로 추출하기 때문에, 속성이 더 많은 객체에도 그대로 적용할 수 있다는 장점이 있습니다.