[JavaScript] 객체를 배열로 바꾸는 방법 [Object.keys(), Object.values(), Object.entries()]

---

- 객체를 배열로 바꾸는 방법

객체를 배열로 바꾸는 방법에 대해 알아볼 예정이다. (아래 person 객체를 배열에 담을 것이다.)

let person = {
    name: "홍길동",
    age: 25,
    height: 180,
};

console.log(person); // {name: "홍길동", age: 25, height: 180}

---

1. Object.keys()

매개변수로 받은 객체의 key들을 모두 찾아 배열의 형태로 반환하는 객체 매서드

// person 객체를 [key, key, ...] 형태의 배열로 변환
let newArray = Object.keys(person); // ["name", "age", "height"]

for (let i = 0; i < newArray.length; i++) {
    let nowKey = newArray[i]; // newArray 배열의 요소 순서대로 접근
    console.log(`key : ${nowKey}, value : ${person[nowKey]}`);
}

---

2. Object.values()

매개변수로 받은 객체의 value들을 모두 찾아 배열의 형태로 반환하는 객체 매서드
(객체 프로퍼티의 key 값은 알 수 없다.)

// person 객체를 [value, value, ...] 형태의 배열로 변환
let newArray = Object.values(person); // ["홍길동", 25, 180]

for (let i = 0; i < newArray.length; i++) {
    console.log(`value : ${newArray[i]}`);
}

---

3. Object.entries()

객체를 받으면[[key, value], [key, value], ...] 형태의 배열로 변환하는 객체 메서드

// person 객체를 [[key,value], [key,value], ...] 형태의 배열로 변환
let newArray = Object.entries(person); // [ ["name", "홍길동"], ["age", 25], ["height",180] ]

for (let i = 0; i < newArray.length; i++) {
    console.log(`key : ${newArray[i][0]}, value : ${newArray[i][1]}`);
}

---

- 참고자료

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의

---