JavaScript에서 기존 객체 배열을 변환해 새로운 객체 배열 만들기

JavaScript를 사용하다 보면 기존 객체 배열의 데이터 구조를 다른 형태로 변환해야 하는 경우가 자주 발생합니다. 이번 글에서는 사용자별 '좋아요' 정보가 담긴 객체 배열을 받아, 각 사용자 이름을 키(key)로 하고 좋아요 여부를 값(value)으로 하는 새로운 객체 배열을 만드는 방법을 알아보겠습니다.

문제 상황

예를 들어, 다음과 같이 여러 사용자의 좋아요 정보와 나이가 포함된 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {"user":"dan","liked":"yes","age":"22"},
    {"user":"sarah","liked":"no","age":"21"},
    {"user":"john","liked":"yes","age":"23"},
];

여기서 우리가 원하는 결과는 다음과 같습니다. 즉, user 값을 키로, liked 값을 값으로 가지는 단순한 구조의 객체 배열입니다.

const output = [
    {"dan":"yes"},
    {"sarah":"no"},
    {"john":"yes"},
];

해결 방법: map() 활용하기

배열의 각 요소를 하나씩 변환해야 하므로 JavaScript의 map() 메서드를 활용하면 깔끔하게 해결할 수 있습니다. map()은 원본 배열을 변경하지 않으면서 각 요소를 콜백 함수의 반환값으로 대체한 새로운 배열을 생성하기 때문에, 이런 데이터 변환 작업에 가장 적합한 도구입니다.

각 객체마다 빈 객체를 생성하고, user 속성의 값을 동적 키로 사용하여 liked 속성의 값을 할당하면 됩니다.

예제 코드

const arr = [
    {"user":"dan","liked":"yes","age":"22"},
    {"user":"sarah","liked":"no","age":"21"},
    {"user":"john","liked":"yes","age":"23"},
];

const mapToPair = (arr = []) => {
    const result = arr.map(obj => {
        const res = {};
        res[obj['user']] = obj['liked'];
        return res;
    });
    return result;
};

console.log(mapToPair(arr));

실행 결과

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

[ { dan: 'yes' }, { sarah: 'no' }, { john: 'yes' } ]

코드 설명

동작 과정을 단계별로 살펴보면 다음과 같습니다.

1. mapToPair 함수는 매개변수로 전달받은 배열에 대해 map()을 호출합니다.
2. map()의 콜백 함수는 배열의 각 객체(obj)를 인자로 받습니다.
3. 콜백 내부에서 빈 객체 res를 생성한 뒤, obj['user'](예: 'dan')를 키로 사용하고 obj['liked'](예: 'yes')를 해당 키의 값으로 할당합니다. 대괄호 표기법([])을 사용했기 때문에 변수의 값으로 프로퍼티 이름을 동적으로 지정할 수 있습니다.
4. 완성된 객체를 반환하면, map()이 모든 반환값을 모아 새로운 배열로 만들어 줍니다.

참고로 age 속성은 결과에 포함되지 않는데, 이처럼 필요한 속성만 선택적으로 추출하는 것도 이 방식의 장점입니다. 만약 여러 개의 속성을 함께 옮기고 싶다면 res[obj['user']] = obj['liked'] 아래에 추가 할당문을 작성하거나, 객체 구조 분해(destructuring)와 스프레드 연산자를 조합하여 확장할 수도 있습니다.