🙆🏻‍♀️ Object method 🙆🏻‍

두둥! 이직한 지 한 달이 지나가는 시점이다.
새로운 곳에 적응하는 것은 언제나 설레면서도 긴장 된다.
"나... 잘 할 수 있을까...?☆"
이러나 저러나 다음 개발자 소희씨의 일일의 글에서 행복한 내용이 많길 바라며...
이번 글은 객체를 배열로 반환해주는 Object method다.

이전 회사는 배열 형태로 데이터를 받아서 따로 후처리를 할 필요가 없었는데,
이번에는 따로 배열을 만들어 줄 필요가 있었다.
그렇지 않고 무작정 배열 메서드를 쓰면 TypeError: 'somthing' is not iterable을 만난다구웃~☆

! 다음 Object 메서드는 실제 배열을 반환한다. !

Object.keys(obj)

const colorObj = {
  a: "red",
  b: "orange",
  c: "yellow"
}

Object.keys(colorObj); // ["a", "b", "c"]

Object.keys(obj)는 객체의 키들의 배열을 반환한다.

Object.values(obj)

const colorObj = {
  a: "red",
  b: "orange",
  c: "yellow"
}

Object.values(colorObj); // ["red", "orange", "yellow"]

Object.values(obj)는 객체의 값들의 배열을 반환한다.

Object.entries(obj)

const colorObj = {
  a: "red",
  b: "orange",
  c: "yellow"
}

Object.entries(colorObj); // [ ["a", "red"], ["b", "orange"], ["c", "yellow"] ]

Object.entries(obj)는 객체의 [키, 값] 묶음을 담은 배열을 반환한다.

이번 프로젝트에서는 Object.keys()와 Object.entries()를 사용했는데, Object.keys()는 코드 리뷰 결과 비효율적이란 의견을 받아서 reduce로 수정했다.
(원하는 키의 값만 필요한 페이지에 사용하려고 했었다.)

위와 같은 메서드를 사용하면 배열 메서드를 사용할 수 있다.
물론 다시 객체로 돌리는 것도 가능하다.

Object.fromEntries(obj)

const colorObj = {
  a: "red",
  b: "orange",
  c: "yellow"
}

const filterColorObj = Object.fromEntries(
  Object.entries(colorObj).filter(([key, value]) => value !== "orange")
); // {a: "red", c: "yellow"}

Object.fromEntries(obj)를 사용하면 다시 객체로 돌리는 것도 가능!

동료 프론트엔드와 코드 리뷰가 있는 삶이라니! 협업이라니!
늘 새롭고 짜릿해-☆
혼자 해왔던 습관이 남아 있어 아직은 스스로가 답답해질 때도 있지만 무던히 나아가는 중이다.
나와 다른 방향의 생각을 가진 사람들의 의견을 듣고 '아! 이런 방법도 있었지' 생각들 때 마다 재밌다.

이따금씩 '호엑... 내가 바로 민폐?' 하며 지레 겁먹지만!
흙흙 결론은 아자아자 파이팅이라구여ㅠㅠ

Object.keys, values, entries - 코어 자바스크립트