웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 Object 메소드 entries() 알아보기

Last Modified : 2022-09-07 / Created : 2019-06-18
16,412
View Count
자바스크립트의 객체(Object)에 사용하는 entries() 메소드에 대하여 알아봅니다.



# 자바스크립트 Object의 entries() 메소드는?


자바스크립트의 타입중 객체는 배열처럼 하나가 아닌 여러 개의 값을 키, 밸류 형태로 가지고 있습니다. 만약 객체가 가진 모든 키와 값을 확인하길 원하는 경우라면 entries()를 사용하면 편리합니다. entries()는 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 주기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있겠죠.

Object.entries() // 모든 프로퍼티와 값을 배열로 반환함

이를 바꿔서 얘기하면 객체를 배열 형태로 반환해준다고 얘기할 수 있겠습니다. 왜 굳이 배열로 변환해야할까라고 생각할 수도 있겠지만 실제로 데이터를 조작하면서 때로는 객체로 또 때로는 배열로 변환하는 것이 매우 유용하다는 것을 알고 있습니다. 이런 이유로 Object.entries()Object.fromEntries()는 서로 벼열과 객체를 바꿔주는 편리한 메소드입니다.

팁 ) 이름에서 알 수 있드시 fromEntries()는 entries()와 반대되는 메소드입니다. 즉 바뀐 배열 형태를 다시 객체 형태로 바꿔주는 기능을 수행합니다.


간략하게 알아봤으니 이제 아래에서 간단한 예제를 만들어보고 알아보겠습니다.


! Object entries() 예제보기

예를들어 만약 객체 myObj가 아래와 같이 존재할 경우 여기서 Object.entries()를 사용하여 모든 key, value를 배열로 출력해보도록 하겠습니다.
myObj = {
  a: 1,
  b: 2,
  c: 3
};

먼저 myObj 변수는 a, b, c의 프로퍼티로 이루어져 있습니다. 이제 entries()를 사용해보겠습니다. 아래와 같이 코드를 실행합니다.
Object.entries(myObj)

실행 결과 예상한 것처럼 가지고 있는 값들이 모두 key, value 형태의 배열로 변환되어 출력됩니다.
(3) [Array(2), Array(2), Array(2)]

0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]

보시는 것처럼 모든 프로퍼티와 값을 배열 타입으로 전부 변환하여 출력하는 것을 알 수 있습니다. 여기까지 객체의 entries()에 대하여 알아봤습니다.


[ 추가 팁 ! ]
객체를 배열로 변환하면 키만 남기거나 값만 남기는 과정이 더 간단해집니다. 또한 배열의 경우 Array.flat()처럼 데이터의 동일한 레벨로 변환하여 고유의 값만 비교하거나 찾을 때도 매우 유용할 수 있겠습니다. 실제로 Object.entries()와 Array.flat()의 경우 같이 쓰이는 경우가 많습니다.

Previous

자바스크립트 객체를 쿼리스트링 값으로 바꾸기

Previous

자바스크립트 FormData 데이터 전송 알아보기