javascript 6. 객체 순회 , 객체 분해 , 배열 분해

 

 

이제 제목만 봐도 모르겠는 파트로 들어왔다. 배열과 객체를 거쳐 왔으니 이것도 할 수 있겠지. 힘내자.

객체 순회

순회 (iteration) 에 필요한 메서드

map.keys()

map.values()

map.entries()

> 사용할 수 있는 자료 구조 : Map Set Array > 반환 값 : iterable 객체

 

Object.keys(obj) 객체의 키만 담은 배열을 반환

Object. values(obj) 객체의 값만 담은 배열을 반환

Object.entries(obj) [키, 값] 쌍을 담은 배열을 반환

> 반환값 : 진짜 배열

 

객체 변환하기

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

하지만 이렇게 하면 된다.

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)

 

구조 분해 할당

: 객체나 배열을 변수로 연결

 

객체 분해하기 

let {prop : varName = default, ...rest} = object

object 의 프로퍼티 prop의 값은 변수 varName 에 할당

object 에 prop 이 없으면 default 가 varName 에 할당

연결할 변수가 없느 나머지 프로퍼티들은 객체 rest 에 복사

 

배열 분해하기

let [item1 = default, item2, ...rest] = array

array의 첫 번째 요소는 item1 에 할당

array의 두 번째 요소는 item2 에 할당

이어지는 나머지 요소들은 배열 rest에 저장

 

* 할당 연산자 좌측의 패턴 = 우측의 구조 : 복잡한 구조에서도 원하는 데이터를 뽑아낼 수 있다!

 

소감

사실 이 파트는 반은 이해하지 못했다. 웹개발 종합반을 3번 듣고 나면 다시 돌아와서 이해해 봐야지. 하하. 

이러나 저러나 내일배움캠프의 사전캠프를 완주했다. 앞으로도 파이팅!

 

출처 : 스파르타 코딩 클럽 내일 배움 캠프 [자바스크립트 핸드북]