객체를 배열로 만드는 메서드 < Object.entries() / keys() / values() >

들어가기 전

지금 간단한 프로젝트를 하는 중이다. react를 사용 중이고 ul안에 li를 map() 메서드로 순회하여 출력하다가 객체 key값을 출력해야할 일이 있었다. 그렇게 찾아보던중 Object.entries() 라는 것을 알게 됐다. 오늘은 Object.entries()가 어떤건지, 언제 쓰면 좋은지에 대해서 간단히 글을 써보려고 한다.

1. Object.entries()

Object.entries()는 객체를 [key, value] 쌍의 배열로 변환해주는 메서드이며 반환 타입은 2차원 배열이다.

객체는 원래 순회가 불가능하다. 그렇기 때문에 배열에만 쓸 수 있는 메서드 (forEach, map 같은 것을 바로 사용하지 못한다.)

그래서 사용하는 것이 Object.entries()이다. 그러면 객체를 배열처럼 다룰 수 있게 된다.

2. Object.keys()

Object.keys()는 객체의 [key]를 배열로 변환해주는 메서드이며 반환 타입은 배열이다.

3. Obejct.values()

Object.values()는 객체의 [value]를 배열로 변환해주는 메서드이며 반환 타입은 배열이다.

 

바로 예제 코드를 통해 알아보자.

 

예제 코드

const user = {
  name: 'Jaka',
  age: '30',
  job: 'developer'
};

const entries = Object.entries(user);
const keys = Object.keys(user);
const values = Object.values(user);

console.log(entries);
console.log(keys);
console.log(values);

 

여기서 entries는 아래와 같이 출력됨을 확인할 수 있다.

[
  ["name", "Jaka"],
  ["age", 30],
  ["job", "developer"]
]

["name", "age", "job"]

["Jaka", 30, "developer"]

 

enrtries()와 forEach를 이용해서 응용 코드를 작성해보자.

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key} : ${value}`);
});

 

해당 코드는 forEach와 매개변수에 배열 구조분해할당을 이용한 코드이다.

이 코드의 출력값은 아래와 같다.

name : Jaka
age : 30
job : developer

 

Object.entries()는 언제 쓰면 좋을까?

- 객체를 순회하면서 key와 value를 동시에 쓰고 싶을 때

- map() 메서드를 이용, 데이터를 변형해서 새로운 배열을 만들고 싶을 때

- 객체 데이터를 리스트 UI로 변환할 떄 (React에서 리스트 만들 때, 오늘 내가 entries를 필요로 하게된 이유가 이것이다.)

 

나머지 keys, values는 뭐 필요할 때 쓰면 될 것 같아서 굳이 언급을 하지 않겠다.

마무리

최근에 ChatGPT를 활용할 일이 많다. 활용하면서 느낀점은 내가 어떤 것을 해야할지 명확히 알고 물어보는것이 얼마나 중요한 것인지를 다시 알게 되기도 했다. 그렇기 때문에 이렇게 좋은 메서드를 알게 된 것이라고 생각한다. 단순히 메서드를 아는 것에서 그치는 것이 아닌 어떻게 쓰며 왜 쓰는지 아는 것을 목표로 할 필요로 하려고 한다.