[JSInfo] Object.keys, values, entries

cptkuk91·2021년 11월 15일
0

JSInfo

목록 보기
25/26

순회에 필요한 메소드 map.keys(), map.values(), map.entries()에 대해 알아봐야합니다.

메소드를 적용할 자료구조는 일련의 합의를 준수해야 합니다.
(커스텀 메소드를 사용하고 싶다면 직접 구현해야 합니다.)

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

  • Map
  • Set
  • Array
    일반 객체에도 순회 관련 메소드가 있습니다. 하지만 keys(), values(), entries()와는 문법적 차이가 있습니다.

Object.keys, values, entries

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

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

일반 객체 문법과 Map, Set, Array 전용 메소드의 차이를 가볍게 살펴보자면

obj.keys()
Object.keys(obj)

ex) 전용 메소드 문법

let user = {
  name: "John",
  age: 30,
};

console.log(Object.keys(user)); // ['name', 'age'] 출력
console.log(Object.values(user)); // ['John', '30'] 출력
console.log(Object.entries(user)); // [['name', 'John'], ['age', 30]] 출력

이렇게 객체를 배열로 펼치는 이유는 원하는 값을 대상으로 작업할 수 있기 때문입니다.
객체는 for...in 문법을 사용하지만 이렇게 배열로 펼치면 for...of를 사용할 수 있게 됩니다.

객체 변환

객체에는 map, filter와 같은 배열 전용 메소드를 사용할 수 없습니다.
하지만 Object.entries 와 Object.fromEntries를 적용하면 객체에도 배열 전용 메소드를 사용할 수 있습니다.

  • Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻습니다.
  • 배열로 변환된 객체에 배열 전용 메소드를 적용시킵니다.
  • 배열은 다시 객체로 변환할 때는 Object.fromEntries(array)를 적용하면 됩니다.

ex) 객체 변환 활용 예시

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

let newArr = Object.entries(prices).map(([key, value]) => [key, value * 2]);
console.log(newArr); // [[ 'banana', 2 ], [ 'apple', 4 ], [ 'meat', 8 ]]
```![](https://velog.velcdn.com/images%2Fcptkuk91%2Fpost%2F1836fec8-082a-4078-896b-bfbf47869cd8%2Fclout.jpeg)
profile
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)

0개의 댓글