dolog

Object.keys, values, entries 본문

JavaScript/자료구조와 자료형

Object.keys, values, entries

dokite 2022. 8. 7. 19:10

순회(iteration)에 관하여

 

순회에 필요한 메서드) 

  • map.keys() : 각 요소의 key를 모은 iterable 객체 반환
  • map.values() : 각 요소의 value를 모은 iterable 객체 반환
  • map.entries() : 요소의 [key, value](property) iterable 객체 반환

 

1)포괄적인 용도로 만들어진 메서드라 자료구조(Map, Set, Array)에 적용하려면 일련의 합의를 따른다

 

2)그래서 커스텀 자료구조에 사용하려면 이 메서드들을 사용하지 못하고 직접 메서드를 구현해야한다

 

Object.keys, values, entries

: 일반 객체에서 사용하는 메서드

 

  • Object.keys(obj) : 객체의 key만 담은 배열 반환
  • Object.values(obj) : 객체의 value만 담은 배열 반환
  • Object.entries(obj) : [key, value](property) 쌍을 담은 배열을 반환

 

일반 객체에서 사용하는 메서드 

➡️ Object.keys(obj) (≠ obj.keys())

➡️ (진짜)배열 반환

 

vs

 

Map, Set, Array에서 사용하는 메서드

➡️ map.keys()

➡️ iterable 객체 반환

 

/* 문법이 차이나는 이유: 유연성 때문이다

JS에선 복잡한 자료구조 전체가 객체에 기반한다

그러다 보니 객체 data 에 자체적으로 data.values() 라는 메서드를 구현해 사용하는 경우가 있을 수 있다 

이렇게 커스텀 메서드를 구현한 상태라도 Object.values(data) 같은 형태로 메서드를 호출할 수 있다면 커스텀 메서드와 내장 메서드 둘 다 사용할 수 있다

 

요약하자면 이미 커스텀 메서드가 구현되어 있어도 다른 내장 메서드가 호출 가능하다면 둘다 사용 가능하다는 얘기같다… */

 

// 3가지 메서드 사용해보기

let user = {

name: “John”,

age: 30

};

 

Object.keys(user) = ["name", "age"]

Object.values(user) = ["John", 30]

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

 

// Object.values(obj)를 사용한 값 순회하기 

let user = {

name: “Violet”,

age: 30

};

 

for (let value of Object.values(user)) {

console.log(value);

}

 

Object.keys, values, entries는 심볼형 property 를 무시한다(for..in 반복문 처럼)

: 만약 심볼형 key가 필요한 경우, 심볼형 key만 배열 형태로 반환해주는 메서드 “Object.getownPropertySymbols” 또는 “Reflect.ownKeys(obj)” 를 사용하면 된다  

 

Q. 왜 심볼형 프로퍼티는 무시하지?

 

객체 변환하기

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

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

 

  1. Object.entries(obj) 를 사용해 객체의 프로퍼티 요소 배열을 얻는다
  2. 1.에서 만든 배열에 map, filter 등 배열 전용 메서드를 적용한다
  3. 2.에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열 ➡️ 객체

 

*Object.fromEntries() : 배열 ➡️ 객체

 

let prices = {

banana: 1,

orange: 2,

meat: 4

};

 

let doublePrices = Object.fromEntries(

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

);

 

console.log(doublePrices.meat); // 8

 

  • 일반 객체에서 사용하는 메서드와 map, set, array에서 사용하는 메서드
  • 객체 ➡️ 배열 (그리고 추가로 배열 ➡️ 객체)

'JavaScript > 자료구조와 자료형' 카테고리의 다른 글

Date 객체와 날짜 1  (0) 2022.08.09
구조 분해 할당  (0) 2022.08.09
위크맵과 위크셋  (0) 2022.08.06
맵과 셋  (0) 2022.08.05
iterable 객체  (0) 2022.08.03