JavaScript 객체에서 키와 값을 배열로 추출하는 방법

JavaScript에서 객체(Object)에 담긴 데이터를 다루다 보면, 키(key)와 값(value)을 한 쌍씩 묶어 별도의 배열로 변환해야 하는 경우가 자주 발생합니다. 예를 들어, 객체를 순회하면서 각 속성을 표 형태로 출력하거나, Map 구조로 변환하거나, API 응답을 가공할 때 이런 처리가 필요합니다.

문제 정의

리터럴 값들로 구성된 객체를 인수로 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 배열 안에 배열이 중첩된 형태(2차원 배열)를 반환해야 하며, 각 하위 배열은 정확히 두 개의 요소를 포함해야 합니다.

• 첫 번째 요소: 해당 객체 속성의 키(key)
• 두 번째 요소: 해당 키에 대응하는 값(value)

구현 방법

for...in 반복문을 사용해 객체의 모든 키를 순회하면서, 키와 값을 하나의 배열로 묶어 결과 배열에 추가하는 방식으로 해결할 수 있습니다.

const obj = {
    name: 'Nick',
    achievements: 158,
    points: 14730
};

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

console.log(retrieveProperties(obj));

실행 결과

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

[ [ 'name', 'Nick' ], [ 'achievements', 158 ], [ 'points', 14730 ] ]

더 간결한 대안: Object.entries()

사실 위와 동일한 결과는 ES2017(ES8)에서 도입된 Object.entries() 메서드 한 줄로 얻을 수 있습니다.

console.log(Object.entries(obj));
// [ [ 'name', 'Nick' ], [ 'achievements', 158 ], [ 'points', 14730 ] ]

Object.entries()는 객체가 가진 열거 가능한 문자열 키 속성의 [키, 값] 쌍 배열을 그대로 반환하기 때문에, 직접 반복문을 작성할 필요 없이 깔끔하게 처리됩니다. 다만 구형 브라우저 환경을 지원해야 한다면 폴리필(polyfill)이 필요할 수 있으므로, 직접 구현한 함수 방식도 여전히 유용합니다.