[JS] Object.keys, values, entries 알아보기

Object도 Array처럼 다룰 순 없을까?

JS의 array prototype 메서드에는 map, reduce 등 정말 편리한 기능이 많다. 처음에 JS를 배우기 시작했을 때는 대부분의 데이터가 array 형식이었기에 array 메서드를 통해 데이터를 내가 원하는 형식으로 변환하는게 자유로웠는데, JSON 데이터와 같이 Obejct 형식의 데이터를 가공할 일이 많아지면서.. 데이터 처리에 한계를 느끼고 있었다..😫

Object.keys, values, entries?

일반 객체 형식의 자료구조 변환에 어려움을 겪던 와중 함께 공부하는 동료들의 코드를 보게되었는데, 거기에서 Object.keys, values, entries 삼형제를 마주하게 되었다. 확인해보니 일반 객체를 순회(iteration)할 때 유용하게 사용되는 메서드라고 한다.

• Object.keys(obj) : 객체의 키만 담은 배열을 반환
• Object.values(obj) : 객체의 값만 담은 배열을 반환
• Object.entries(obj) : [키, 값] 쌍을 담은 배열을 반환

keys, values, entries는 Map, Set, Array에도 있는 메서드인데, 객체에 사용하는 keys, values, entries는 Map, Set, Array과 달리 obj.keys()가 아닌 Object.keys(obj)형식으로 사용해야 한다.

<예시 코드>

const user = {
  name: "Daisy",
  food: "pizza"
};

<결과>

• Object.keys(user) = ["name", "food"]
• Object.values(user) = ["Daisy", "pizza"]
• Object.entries(user) = [ ["name","Daisy"], ["food","pizza"] ]

이렇게 Object.keys, values, entries(일반 객체)로 객체 -> 배열로 변환함으로써 배열의 여러 편리한 메소드를 사용할 수 있다는게 아주 큰 장점이다!👍

배열을 객체로 되돌릴 땐? Object.fromEntries

Object.entries(obj)은 객체를 [키, 값] 쌍을 담은 배열으로 반환한다. 그럼 이렇게 변환된 배열을 다시 객체로 바꿀 순 없을까? 이때 사용하는 메서드가 Object.fromEntries(array)이다.

<예시 코드>

const user = {
  name: "Daisy",
  food: "pizza"
};

const updatedUser = Obejct.fromEntries(Object.entries(user)
                                       .map(([key,value]) => [key, value + "updated"]));

<결과>
{name: "Daisyupdated", food: "pizzaupdated"}

이렇게 객체를 배열로 변환한 뒤 배열의 메서드를 이용해서 데이터를 원하는 대로 변경한 뒤 다시 객체로 변환 할 수도 있다.(이걸 왜 이제 알았냐..🤦‍♀️)
객체 다룰 때 아주 유용한Object.keys, values, entries를 꼭 기억하자!!😎