[js] Map, Set, Destructuring

babypig·2023년 1월 15일
1

javascript

목록 보기
11/12
post-thumbnail

Map은, Set은 ES6에서 새로 도입한 자료구조이다.
Map은 일반 객채 리터럴과 비슷하고 Set은 배열 리터럴과 비슷하다.

Map

Map은 속성들 간의 순서를 보장하고 반복문을 사용할 수 있으며, 속성명으로 문자열이 아닌 값도 사용할 수 있고 size 메서드를 통해 속성의 수를 쉽게 알 수 있다는 점에서 일반 객체와 다르다.

const m = new Map();

m.set('a','b'); //set(키, 값) 으로 Map에 속성 추가;

const c = {};

m.set(c,'d'); //객체도 가능

m.get('a') // get(키)로 속성값 조회

m.size; // size로 속성 개수 조회

for (const [key, value]of m) { // 반복문에 바로 넣어 사용 가능
  	console.log(key, value);
}

m.forEach((value, key) => { // forEach 도 바로 사용 가능
	console.log(key, value)
})

m.has('a') // has(키)로 속성 존재 여부 확인 가능
m.delete('a') // delete(키)로 속성을 삭제
m.clear(); // clear로 전부 제거
 

Set

Set은 중복을 허용하지 않는다는 것이 가장 큰 특징이며, 배열 자료구조를 사용하고 싶으나 중복은 허용하고 싶지 않을 때 Set을 대신 사용하거나 기존 배열에서 중복을 제거하고 싶을 때도 Set을 사용한다.

const s = new Set();

s.add(1); // add(요소)로 Set에 추가
s.add('1');
s.add(1); // 중복이므로 무시
s.add(2);

s.size //size로 속성 개수 조회

s.has(1) // has(요소)로 요소 존재 여부 확인 가능

s.delete(1) // delete(요소)로 요소를 삭제

s.clear(); // clear로 전부 제거

//중복 제거에 용이한 예

const arr = [1,2,3,4,5,3,2];
const s = new Set(arr);
const result = Array.from(s);

비구조화(구조분해) 할당 (Destructuring Assignment)

비구조화 할당이란 배열이나 JSON 객체의 프로퍼티를 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 자바스크립트 표현식 이다.
구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.


const example = {a:123, b:{c:456, d:789}};

const a = example.a;
const c = example.b.c;
const d =exampl.b.d; 


const {a, b:{c,d}} = example; // 위 구문을 이 코드로 바꿀 수 있음

const arr = [1,2,3,4,5];
const x = arr[0];
const y = arr[1];
const z = arr[4];

const [x,y,,,z] = arr; // 위 구문을 이 코드로 바꿀 수 있음

⚠️ this를 사용하고있는 경우에는 사용하지 않는게 좋다, this는 함수를 호출할 때 어떻게 호출되었냐에 따라 결정되기 때문이다.

profile
babypig

0개의 댓글