[모던 JavaScript 튜토리얼] 28. Object.keys(), Object.values(), Object.entries()

본문 바로가기

앞서 우리는 Map과 Set 자료구조에서 반복을 목적으로 사용되는 메서드 keys(), values(), entries() 를 공부했다. 포스팅 제목을 통해 이 메서드들이 Object 라는 다른 모든 객체의 기반이 되는 기초이자 기본 객체의 메서드를 오버라이딩한 것이라는 것을 짐작할 수 있다.

keys(), values(), entries() 를 사용할 수 있는 자료구조는 다음과 같이 세 개다.

• Array
• Map
• Set

Object.keys, values, entries

일반 객체엔 다음과 같은 메서드를 사용할 수 있다.

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

Array, Map, Set 전용 메서드와 일반 객체용 메서드의 차이는 다음과 같다.

1. 문법이 다르다. map.keys() vs Object.keys(obj)
2. 리턴 값이 다르다. iterable 객체 vs 진짜 배열

문법이 다른 이유는 유연성 때문이다. 커스터마이징 객체에 다른 동작을 수행하는 values() 라는 이름의 메서드를 선언할 수 있기에, 차별을 둔 것이라고 한다.

Object를 통한 메서드 호출시 진짜 배열을 리턴하는 이유는 하위 호환성 때문이다. 이터러블은 배열 내장 메서드를 사용하지 못하니, 진짜 배열을 리턴함으로써 push , pop 등의 메서드들을 사용할 수 있게 하기 위함이라고 생각한다.

객체 변환하기

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

1. Object.entries(obj) 를 사용해 객체의 키-값 쌍들을 요소로 하는 배열을 얻는다.
2. 위에서 만든 배열에 map 등의 배열 내장 메서드를 적용한다.
3. 위에서 메서드들을 충분히 활용했다면, Object.fromEntries(array) 를 적용해 다시 배열을 객체로 되돌린다.

let prices = {
    banana: 1,
    orange: 2,
    meat: 4,
};
let doublePrices = Object.fromEntries(Object.entries(prices).map(([key, value]) => [key, value * 2]));

console.log(doublePrices); // { banana: 2, orange: 4, meat: 8 }

위 코드는 간접적으로 객체에 map() 메서드를 사용한 예시다. entries() 로 배열로 변환한 뒤, map() 을 호출해 모든 요소에 동일한 작업을 가한 뒤, 다시 fromEntries() 를 호출해 객체로 되돌렸다.