딥 다이브 스터디 36,37(디스트럭처링 할당, Set과 Map)

김영현·2023년 11월 27일
0

디스트럭처링 할당(구조 분해 할당)

구조화된 배열같은 이터러블 또는 객체를 구조 파괴하여 변수에 개별 할당함.
보면 바로안다.

const arr = [1,2,3];
const [a,b,c] = arr;
console.log(a, b, c) // 1,2,3

const obj = {
	singer:"aespa",
  	song:"drama"
}
const { singer, song } = obj;
console.log(singer, song) // aespa, drama

배열은 인덱스 순으로할당, 객체는 키를 뽑아와 사용하면 된다.
기본값 설정, 스프레드 문법을 사용할 수 있음

const [a,b, c =5] = [1,3];
console.log(a,b,c) // 1,3,5
const [a,b,...c] = [1,2,3,4,5]
console.log(a,b,c) // 1,2,[3,4,5]

객체는 키 이름 변경이 가능함.

const obj ={
	firstName:"winter",
  	lastName:"karina"
}
const { firstName:w, lastName:k } = obj;
console.log(w,k) //winter, karina

중첩객체 추출은 이렇게...

const user = {
	name:"ningning"
  	address:{
		city:"Seoul"
	}
}

const { address: { city } } = user;
console.log(city) // Seoul

Rest프로퍼티, 스프레드 프로퍼티도 사용 가능하나, 아주 최신문법임

Set, Map

Set은 집합이라는 의미를 가진다. 중복되지 않는 유일한 값들의 집합이다. 사실 집합을 구현하기위한 자료구조다.

//생성자 함수로 생성함. 이터러블을 인수로 받는다.
const set = new Set() //Set(0) {}
const set2 = new Set([1,2,3,3]) // Set(3) 1 2 3
//크기
set2.size // 3
//요소 더하기. 체이닝으로 계속 add할수있음.
set2.add(4) // Set(4) 1,2,3,4
//요소 삭제. 없는걸 삭제해도 에러없이 무시. 체이닝으로 delete 불가능
set2.delete(4) // Set(3) 1,2,3
//요소 존재여부 확인
set2.has(4) // false
//요소 전부삭제
set2.clear();

참고로 Set은 모든 값을 저장할 수 있다.
SetforEach로 순회한다. 단, 이때 사용하는 메서드는 Set.prototype.forEach(현재 순회중인 요소값, 현재순회중인 요소값, 현재 순회중인 Set객체) 1,2번이 같은건 배열의 forEach와 인터페이스를 맞추기 위함임.

Set은 이터러블이기에 for...of, 스프레드, 디스트럭처링가능하다.

Set의 집합연산

합집합, 차집합, 교집합, 부분집합, 상위집합. 전부 구현가능.

Map

객체와 아주유사함. 다만 Map은 이터러블이며 로 모든 값을 사용할수있다.

const map = new Map();
//인수 전달할땐 키-값쌍으로
const map2 = new Map(['key', 'value'], ['key2', 'value2']);

//크기
map.size //0
//추가(덮어쓰기)
map.set('key', 'value');
//읽기
map.get('key')
//존재여부
map.has('key')
//삭제
map.delete('key')
//일괄삭제
map.clear()

Map을 순회할땐 역시나 Map.prototype.forEach(현재 순회중인 요소값, 현재 순회중인 요소키, 현주 순회중인 Map 객체)를 사용함.
이녀석도 이터러블이라 for..of, 스프레드, 디스트럭처링 가능

객체처럼 keys,values,entries메서드가 존재함.

순회할땐 요소가 추가된 순서를 따름(원래 순서에 의미가 없지만 다른 이터러블과 순회 호환성 유지)

profile
모르는 것을 모른다고 하기

0개의 댓글