모던 자바스크립트 #5.9. Object.keys, values, entries

모던 JavaScript 튜토리얼을 따라가면서 정리합니다.

• iteration에 필요한 메서드들이다.
• Map, Set, Array에서 사용할 수 있다.
• 일반 객체에도 순회 관련 메서드가 있지만 keys(), values(), entries()와는 문법에 차이가 있다.

Object.keys, values, entries

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

• 진짜 배열을 반환하는 이유는 하위 호환성 때문이다.

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

  심볼형 키가 필요한 경우 심볼형 키만 비열 형태로 반환해주는 Object.getOwnPropertySymbols를 사용하도록 하자. 키 전체를 배열 형태로 반환해주는 Reflect.ownKeys(obj)도 있다.

객체 변환

객체에 배열 전용 메서드를 사용하고 싶다면

• Object.entries(obj) 를 통해 키-값 쌍이 요소인 배열을 얻는다.
• 이 배열에 배열 전용 메서드(map, filter 등)를 사용한다.
• Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌린다.

1
2
3
4
5
6
7
8
9
10
11

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8