on your mark

[JAVASCRIPT.INFO] 5.9 Object.keys, values, entries 본문

WEB/Javascript

[JAVASCRIPT.INFO] 5.9 Object.keys, values, entries

dev-olive 2023. 1. 11. 21:48

5.9 Object.keys, values, entries

keys(), values(), entries() 를 사용할 수 있는 자료구조는

  • Map
  • Set
  • Array

일반 객체에도 순회 관련 메서드가 있긴 한데, keys(), values(), entries()와 문법에 차이가 있다.

Object.keys, values, entries

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

Map, Set, Array 전용 메서드와 일반 객체용 메서드의 차이를 비교하면 아래와 같다.

객체
호출문법 map.keys() Object.keys(obj)
반환 값 iterable 객체 '진짜' 배열
  • obj.keys()가 아닌 Object.keys(obj)를 호출한다.
    맵과 문법이 다른 이유는 유연성 때문이다. 자바스크립트에선 복잡한 자료구조 전체가 객체에 기반한다. 그러다 보니 객체 data에 자체적으로 data.values()라는 메서드를 구현해 사용하는 경우가 있을 수 있다. 이렇게 커스텀 메서드를 구현한 상태라도 object.values(data)같은 형태로 메서드를 호출할 수 있으면, 커스텀 메서드와 내장 메서드를 둘 다 사용할 수 있다.

  • Object.*를 호출하면 iterable 객체가 아닌 객체의 한 종류인 배열을 반환한다.

    let user = {
      name: "John",
      age: 30
    }
    • Object.keys(user) = ["name", "age"]
    • Object.values(user) = ["John", "30"]
    • Object.entries(user) = [["name", "John"], ["age", 30]]

Object.keys, values, entries는 심볼형 프로퍼티를 무시한다.

for .. in반복문처럼, Object.keys, values, entries는 키가 심볼형인 프로퍼티를 무시한다.

객체 변환하기

객체엔 map, filter같은 배열 전용 메서드를 사용할 수 없다.

하지만, Object.entries, Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드를 사용할 수 있다.

  1. Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻는다.
  2. 1에서 만든 배열에 map등의 배열 전용 메서드를 적용한다.
  3. 2에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌린다.