[Javascript]Object.keys(), values, entries, assign

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

. Map
. Set
. Array
일반 객체에도 순회 관련 메서드가 있긴 한데 , keys(),values() , entries()
와는 문법에 차이가 있습니다 .

Object.keys,values,entries
일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다 .
. Object.keys(obj) 객체의 키만 담은 배열을 반환합니다.
. Object.values(obj) 객체의 값만 담은 배열을 반환합니다.
. Object.entries(obj) - [키,값] 쌍을 담은 배열을 반환합니다.

        맵 				객체

호출문법 map.keys() Object.keys(obj)(obj.keys()아님)
반환값 iterable 객체 '진짜'배열

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

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

두번째 차이는 메서드 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이 연속적으로 출력됨
}

Object.keys , values,entries 는 심볼형 프로퍼티를 무시합니다.
for ..in 반복문 처럼 object.keys,object.values,Object.entries 는 키가 심볼형인 프로퍼티를 무시합니다 . 대개는 심볼형 키를 연산 대상에 포함하지 않는 게 좋지만, 심볼형 키가 필요한 경우엔 심볼형 키만 배열 형태로 반환해주는 메서드인 Object.getOwnPropertySymbols 를 사용하면 됩니다.

getOwnPropertySymbols 이외에도 키 전체를 배열 형태로 반환하는 메서드인 Reflect.ownKeys(obj)를 사용해도 괜찮습니다.

객체 변환하기

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

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

1.object.entries(obj)를 사용해 객체의 키 값 쌍이 요소인 배열을 얻습니다.
2. 1에서 만든 배열에 map 등의 배열 전용 메서드를 적용합니다.
3. 2에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌립니다.

이방법을 사용해 가격 정보가 저장된 객체의 prices 의 프로퍼티 값을 두배로 늘려보도록 합시다.

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

지금 당장은 어렵게 느껴지겠지만 한두 번 위 방법을 적용해 보면 객체에 배열 전용 메서드를 적용하는게 쉬워질 겁니다.