[JavaScript] 자바스크립트 객체 -> 배열 변환(keys, values, entries)

자바스크립트에서 생성된 객체를 배열로 변환해 접근하는 편한 방법이 존재한다.

 

먼저 객체(object)를 하나 간단하게 생성해 보자.

const person = {
  name: "홍길동",
  age: "23",
  gender: "boy",
};

 

이렇게 생성된 객체는 key값에만 혹은 value값에만 접근하기 귀찮을 때가 있다.

때문에, key값 혹은 value값을 배열에 따로 저장한다면 index번호만으로 쉽게 접근할 수 있다.

 

마지막 entries()를 사용하면 객체 값을 배열에 담고 새로운 배열을 생성하여 모두 저장할 수 있다.

 

어렵지 않은 과정이니 한번 살펴보자.

---

배열로 바꾸는 방법은 크게 3가지가 존재하는데,

 

첫 번째로 Object.keys()이다.

이 방법은 객체의 키값들만 배열에 담아 저장하는 방법이다.

 

코드로 한번 살펴보면

let newArray = Object.keys(person);

console.log(newArray);

 

이렇게 newArray라는 배열에 Object.keys(person)를 활용해 person객체에 담긴 key값을 배열에 저장할 수 있다.

 

코드를 실행해 보면

key값만 배열에 잘 담긴 것을 확인할 수 있다.

---

그렇다면 객체의 value값은 배열에 어떻게 저장할까?

 

바로 Object.values()를 사용하면 된다.

이 방법은 객체의 벨류값만 배열에 담아 저장하는 방법이다.

 

코드로 살펴보면

let newArray2 = Object.values(person);

console.log(newArray2);

 

이렇게 newArray2라는 배열에 Object.values(person)을 활용해 person 객체에 담긴 value값을 배열에 저장할 수 있다.

 

코드를 실행해 보면

value값만 배열에 잘 담긴 것을 확인할 수 있다.

---

마지막으로, key와 value값을 모두 배열에 담을 순 없을까? 가능하다.

 

바로 Object.entries()를 사용하면 된다.

이 방법은 새로 생성한 배열 안에 다른 배열을 추가로 생성하여 저장한다.

때문에, key값과 value값 모두가 배열에 새로 저장된다.

 

코드로 살펴보면

let newArray3 = Object.entries(person);

console.log(newArray3);

이렇게 객체를 newArray3라는 배열에 Object.entries(person)을 활용해 person 객체에 담긴 key, value값을 배열에 저장할 수 있다.

 

먼저 위 코드를 실행해 보면

이렇게 key 그리고 value값이 새로 생성된 배열 속 새로운 배열에 들어가 있는 것을 확인할 수 있다.

 

새로 생긴 배열을 응용하면 for문을 통해 index번호 만으로도 쉽게 객체를 출력해 낼 수 있다.

 

예시

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

 

코드를 실행해 보면

 

이와 같이 객체 속 내용을 간편하게 출력할 수 있다.

 

---

근데 사실, 이렇게 배열로 바꾸지 않고 for문을 통해 훨씬 더 쉽게 접근할 수 있다.

(굳이 배열로 바꾸지 않아도 되는 상황이면 for문을 통해 객체에 바로 접근하자.)

 

[예시]

let person = {
  name: "홍길동",
  age: "23",
  gender: "boy",
};

//for문을 사용한 객체 값 접근
for (let i in person) {
  console.log(`key : ${i} / value : ${person[i]}`);
}

 

이렇게 실행하면

위와 동일한 결과를 얻을 수 있다.