[JavaScript] Object.entries()를 사용하여 Object를 배열로 변환하기

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 

이번에 포스트에서 다룰 것

---

다음과 같은 object가 있다고 가정하자.

sample object

{
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": "value-3"
}

이 object를 아래와 같은 list로 변경하는 것이 이번 포스트에서 목표로 하고 있는 것이다.

sample list

[
  {
    "key": "key-1",
    "value": "value-1"
  },
  {
    "key": "key-2",
    "value": "value-2"
  },
  {
    "key": "key-3",
    "value": "value-3"
  }
]

  Object.entries()를 이용해서 변경할 것이다. 방금의 sample object는 변수 obj에 저장하는 것으로 가정한다.

 

 

Object.entries()만을 이용한 경우

---

기재 방법

Object.entries(obj)

 

결과 출력

[
  [
    "key-1",
    "value-1"
  ],
  [
    "key-2",
    "value-2"
  ],
  [
    "key-3",
    "value-3"
  ]
]

 위와 같이 [key, value]로 변환된 배열이 된다. 이 방법만으로는 원하는 결과가 출력되지 않으므로 다른 방법을 추가했다.

 

 

Object.entries()와 map을 같이 이용한 경우

---

기재 방법

Object.entries(obj).map(([key, value]) => ({key, value}))

 

출력

[
  {
    "key": "key-1",
    "value": "value-1"
  },
  {
    "key": "key-2",
    "value": "value-2"
  },
  {
    "key": "key-3",
    "value": "value-3"
  }
]

 map은 배열의 요소를 인수로 하여 함수의 결과에서 새로운 배열을 생성하는 것인데, map을 함께 사용한다. 

([key, value]) 이 부분에서 Object.entries()의 반환값을 key, value로 받아 뒤에서는 좋아하는 형태의 배열로 만든다.  참고로 ({key, value})부분의 경우, 아래의 문법을 심플하게 만든 것이다.

Object.entries(obj).map(([key, value]) => ({'key': key, 'value': value}))

---

참고자료

https://qiita.com/bbbks9/items/6ce80ae1c0fd28a3a9d7