JavaScript에서 객체 키를 순회하며 배열 값을 단일 값으로 변환하기

문제 상황

다음과 같이 객체로 이루어진 배열이 있다고 가정해 보겠습니다.

const arr = [
    {
        col1: ["a", "b"],
        col2: ["c", "d"]
    },
    {
        col1: ["e", "f"],
        col2: ["g", "h"]
    }
];

여기서 우리가 작성해야 할 것은 이러한 배열을 입력받아 아래와 같은 결과를 반환하는 JavaScript 함수입니다.

const output = [
    {
        col1: "b",
        col2: "d"
    },
    {
        col1: "f",
        col2: "h"
    }
];

접근 방법

핵심 아이디어는 간단합니다. 객체의 각 키가 가진 값이 현재는 배열 형태이므로, 이를 단일 값으로 변환하는 것입니다. 그리고 그 값은 각 키에 해당하는 배열의 두 번째 요소(인덱스 1)가 됩니다.

즉, col1: ["a", "b"]라는 값이 있다면 col1: "b"로 바꾸는 것이 목표입니다.

사용할 메서드

• reduce(): 배열 전체를 순회하면서 새로운 결과 배열을 누적하여 만듭니다.
• Object.keys(): 객체가 가진 모든 키 이름을 배열로 반환하여, 각 키에 접근할 수 있게 해줍니다.

구현 코드

이를 구현한 코드는 다음과 같습니다.

const arr = [
    {
        col1: ["a", "b"],
        col2: ["c", "d"]
    },
    {
        col1: ["e", "f"],
        col2: ["g", "h"]
    }
];

const reduceArray = (arr = []) => {
    const res = arr.reduce((s, a) => {
        const obj = {};
        Object.keys(a).map(function(c) {
            obj[c] = a[c][1]; // 각 키의 배열에서 두 번째 요소를 추출
        });
        s.push(obj);
        return s;
    }, []);
    return res;
};

console.log(reduceArray(arr));

코드 동작 설명

1. reduceArray 함수는 빈 배열 []을 초기값으로 하는 reduce를 실행합니다.
2. 배열의 각 객체(a)마다 새로운 빈 객체 obj를 생성합니다.
3. Object.keys(a)로 객체의 모든 키(col1, col2)를 가져온 뒤, 각 키에 대해 a[c][1], 즉 해당 키 값 배열의 두 번째 요소를 새 객체에 할당합니다.
4. 완성된 obj를 누적 배열 s에 추가하고, 최종적으로 변환된 배열을 반환합니다.

실행 결과

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

[ { col1: 'b', col2: 'd' }, { col1: 'f', col2: 'h' } ]

이처럼 reduce와 Object.keys를 조합하면, 객체 배열 내부의 배열 형태 값을 원하는 위치의 단일 값으로 손쉽게 변환할 수 있습니다. 참고로 인덱스 [1] 대신 다른 인덱스나 특정 조건을 사용하면, 같은 패턴으로 다양한 형태의 데이터 변환도 가능합니다.