23) Object.keys(), values, entries, assign

송인호·2022년 6월 9일
0

React

목록 보기
67/70
post-thumbnail

Object.keys, values, entries

필요한 메서드 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 전용 메서드와 일반 객체용 메서드의 차이를 (맵을 기준으로) 비교하면 다음과 같습다.

맵 객체
호출 문법 map.keys() Object.keys(obj)(obj.keys() 아님)
반환 값 iterable 객체 ‘진짜’ 배열
첫 번째 차이는 obj.keys()가 아닌 Object.keys(obj)를 호출한다는 점이다.

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

예시:

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를 사용하면 프로퍼티 값을 대상으로 원하는 작업을 할 수 있습니다.

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

// 값을 순회합니다.
for (let value of Object.values(user)) {
  alert(value); // Violet과 30이 연속적으로 출력됨
}
profile
프론트엔드 개발자

0개의 댓글