JavaScript에서 딕셔너리를 객체 배열로 변환하는 방법

JavaScript 개발을 하다 보면 키-값 쌍으로 이루어진 딕셔너리 형태의 객체를 객체 배열(목록) 형태로 변환해야 하는 경우가 자주 있습니다. 예를 들어 API 응답 데이터를 가공하거나, 화면에 목록 형태로 렌더링하기 전에 데이터 구조를 바꿔야 할 때가 그렇습니다.

Object.values() 메서드 활용하기

가장 간단하고 널리 사용되는 방법은 Object.values() 메서드를 사용하는 것입니다. 이 메서드는 객체가 가진 모든 열거 가능한 속성 값들을 배열로 반환합니다.

다음은 중첩된 딕셔너리를 객체 배열로 변환하는 완전한 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample{
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>딕셔너리를 JavaScript 객체 배열로 변환</h1>
<div class="sample">
{ A: { 1: "Apple", 2: "Apricot" }, B: { 1: "Ball", 2: "Bull" }, C: { 1:
"Cat", 2: "Cow" }, D: { 1: "Dog", 2: "Drill" }}
</div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 딕셔너리가 객체 배열로 변환됩니다.</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let arr;
    const obj = {
        A: { 1: "Apple", 2: "Apricot" },
        B: { 1: "Ball", 2: "Bull" },
        C: { 1: "Cat", 2: "Cow" },
        D: { 1: "Dog", 2: "Drill" },
    };
    BtnEle.addEventListener("click", () => {
        arr = Object.values(obj);
        console.log(arr);
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript에서 딕셔너리를 객체 배열로 변환하는 방법

'클릭하세요' 버튼을 누른 뒤 브라우저 개발자 도구(F12)의 콘솔 탭을 확인하면, 원래 딕셔너리의 각 값들이 아래와 같이 하나의 배열 안에 순서대로 담긴 것을 볼 수 있습니다.

JavaScript에서 딕셔너리를 객체 배열로 변환하는 방법

코드 설명

핵심 로직은 단 한 줄입니다.

arr = Object.values(obj);

Object.values(obj)는 obj 객체의 각 키(A, B, C, D)에 해당하는 값, 즉 내부 객체들을 새로운 배열 요소로 만들어 반환합니다. 결과적으로 [{1: "Apple", 2: "Apricot"}, {1: "Ball", 2: "Bull"}, ...] 형태의 객체 배열이 생성됩니다.

참고: Object.keys()와 Object.entries()

상황에 따라 다른 메서드도 유용할 수 있습니다.

Object.keys(obj): 객체의 키들만 문자열 배열로 반환합니다.
Object.entries(obj): [키, 값] 쌍의 배열을 반환하여, 키 정보까지 함께 활용할 때 적합합니다.

키 이름이 필요 없이 값만 필요한 경우에는 이 예제처럼 Object.values()를 사용하는 것이 가장 깔끔한 해결책입니다.