자바스크립트에서 객체를 배열로 변환하는 방법

자바스크립트를 다루다 보면 객체(Object)에 담긴 데이터를 배열(Array) 형태로 변환해야 하는 경우가 자주 발생합니다. 예를 들어, 다음과 같이 키(key)와 값(value) 쌍으로 구성된 객체가 있다고 가정해 보겠습니다.

const obj = {
    name: "Vikas",
    age: 45,
    occupation: "Frontend Developer",
    address: "Tilak Nagar, New Delhi",
    experience: 23,
    salary: "98000"
};

여기서 우리가 작성해야 할 함수는 이 객체를 인수로 받아, 각 하위 배열(subarray)이 하나의 키-값 쌍을 나타내는 배열의 배열을 반환하는 것입니다.

구현 방법

핵심 아이디어는 간단합니다. 먼저 Object.keys() 메서드로 객체의 모든 키를 추출한 뒤, 반복문을 돌면서 각 키와 해당 값을 하나의 배열로 묶어 새로운 배열에 추가하면 됩니다.

예제 코드

const obj = {
    name: "Vikas",
    age: 45,
    occupation: "Frontend Developer",
    address: "Tilak Nagar, New Delhi",
    experience: 23,
    salary: "98000"
};

const objectToArray = obj => {
    const keys = Object.keys(obj);
    const res = [];
    for(let i = 0; i < keys.length; i++){
        res.push([keys[i], obj[keys[i]]]);
    };
    return res;
};

console.log(objectToArray(obj));

실행 결과

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

[
    [ 'name', 'Vikas' ],
    [ 'age', 45 ],
    [ 'occupation', 'Frontend Developer' ],
    [ 'address', 'Tilak Nagar, New Delhi' ],
    [ 'experience', 23 ],
    [ 'salary', '98000' ]
]

코드 설명

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

1단계: Object.keys(obj)를 호출하여 객체의 모든 키를 문자열 배열로 가져옵니다. 이 예제에서는 ['name', 'age', 'occupation', 'address', 'experience', 'salary']가 반환됩니다.

2단계: 빈 배열 res를 선언하고, for 반복문으로 각 키를 순회합니다.

3단계: 반복문 안에서 [keys[i], obj[keys[i]]] 형태로 키와 값을 하나의 하위 배열로 만든 후, push() 메서드로 결과 배열에 추가합니다.

4단계: 모든 키-값 쌍이 담긴 최종 배열을 반환합니다.

더 간결한 대안: Object.entries() 활용하기

사실 ES2017(ES8)부터 도입된 Object.entries() 메서드를 사용하면 위의 로직을 한 줄로 대체할 수 있습니다.

const objectToArray = obj => Object.entries(obj);

console.log(objectToArray(obj));
// 위의 for 반복문 버전과 동일한 결과 출력

Object.entries()는 객체의 각 [키, 값] 쌍을 요소로 갖는 배열을 그대로 반환해 주기 때문에, 직접 반복문을 작성할 필요 없이 훨씬 깔끔하고 가독성 좋은 코드를 작성할 수 있습니다. 다만 구버전 브라우저나 오래된 실행 환경을 지원해야 한다면 앞서 소개한 Object.keys() 기반의 방식이 더 안전한 선택입니다.