Object.keys, values, entries

박경찬·2022년 4월 10일
0

Object.keys, values, entries
일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다.

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

첫 번째 차이는 obj.keys()가 아닌 Object.keys(obj)를 호출한다는 점입니다.

이렇게 문법이 다른 이유는 유연성 때문입니다. 아시다시피 자바스크립트에선 복잡한 자료구조 전체가 객체에 기반합니다. 그러다 보니 객체 data에 자체적으로 data.values()라는 메서드를 구현해 사용하는 경우가 있을 수 있습니다. 이렇게 커스텀 메서드를 구현한 상태라도 Object.values(data)같은 형태로 메서드를 호출할 수 있으면 커스텀 메서드와 내장 메서드 둘 다를 사용할 수 있습니다.

두 번째 차이는 메서드 Object.*를 호출하면 iterable 객체가 아닌 객체의 한 종류인 배열을 반환한다는 점입니다. ‘진짜’ 배열을 반환하는 이유는 하위 호환성 때문입니다.

Object.keys(user) = ["name", "age"]
Object.values(user) = ["John", 30]
Object.entries(user) = [ ["name","John"], ["age",30] ]

아래 예시처럼 Object.values를 사용하면 프로퍼티 값을 대상으로 원하는 작업을 할 수 있습니다.

객체 변환하기

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

하지만 Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용할 수 있습니다. 적용 방법은 다음과 같습니다.

Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻습니다.
1.에서 만든 배열에 map 등의 배열 전용 메서드를 적용합니다.
2.에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌립니다.
이 방법을 사용해 가격 정보가 저장된 객체 prices의 프로퍼티 값을 두 배로 늘려보도록 합시다.

프로퍼티 값 더하기

프로퍼티 개수 세기

https://ko.javascript.info/keys-values-entries#ref-1279

0개의 댓글