야근시렁

Object형 데이터는 어떻게 map을 돌려야 할까.

const person = {
  id: 15,
  name: "홍길동",
  age: 33
};

이렇게 생긴 데이터가 있다고 하자.

Object.keys() 함수를 사용하면 각 object의 key 값을 배열로 나열해 준다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const keys = Object.keys(user);
console.log(keys); // ['id', 'name', 'age']

그리고 만약  value 값을 return 하고 싶다면 이렇게 한 뒤 key값들을 map이나 for문으로 돌려주면 된다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

Object.keys(user).map((key, idx) => (
  <p>key: {key} - value: {user[`${key}`]}</p>
))

이외 객체의 key값을 추가하고 삭제하는 방법도 알아보자.

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

user.location = "Seoul"; // key값과 value값을 추가 
delete user.age; // age 속성 삭제

그리고 잘 사용되지는 않지만, 찾아본것들 중에 객체를 배열로 변환하는 두 가지 함수를 더 발견했다. 

Object.values()는 객체의 value 값들을 배열로 만들어준다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const userValues = Object.values(user);
console.log(userValues); // [15, "홍길동", 33]

또한, Object의 key값과 value값을 배열로 한번 묶고 배열로 리턴해주는 함수도 있었다. 

(즉, 이중배열로 리턴된다.)

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const userEntries = Object.entries(user);
console.log(userEntries); // [['id', 15], ['name', '홍길동'], ['age', 33]]

위의 두 가지는 쓸 일이 많아 보이지는 않지만, 언젠가 쓸 수 있게 되는 상황이 오면 미리 공부해 둔 것이 뿌듯할 것 같다. 😘