개발/javascript

[javacript] ES6 Map/Set

smile-haha 2023. 1. 4. 00:29
반응형

Map과 Set은 ES6에서 새로 도입한 자료구조이다.

Map은 키와 값의 집합이라 할 수있고, Set은 중복을 허용하지 않는 배열이라 할 수 있다.

 

🎈Map

Map은 키와 값을 연결한다는 점에서 Object와 비슷한데, 아래와 같은 차이가 있다.

 - Map은 프로토타입 체인에서 자유롭다.

 - Map은 저장된 키와 값의 쌍이 몇 개인지 알 수  있다.

 - Map은 객체를 키로 사용할 수 있다. 

 - Map은 순서를 보장한다.

 

사용 방법은 아래와 같다.

//생성
const students = new Map();
//const students = new Map([["01",{name:'ha',age:12}],["02",{name:'roh',age:17}]]);

//추가
students.set("01",{name:'ha',age:12});
students.set("02",{name:'roh',age:17});
//students.set("01",{name:'ha',age:12}).set("02",{name:'roh',age:17});

//조회
students.get("02");//{name:'roh',age:17}

//map에 key가 존재하는지 확인
students.has("01");//true
students.has("03");//false

//map 크기 조회
students.size;//2

//map에 등록된 키 목록 조회
students.keys();//['ha','roh']

//map에 등록된 값 목록 조회
students.values();//[{name:'ha',age:12},{name:'roh',age:17}]

//map에 등록된 키-값 쌍 목록 조회
students.entries();//[["01",{name:'ha',age:12}],["02",{name:'roh',age:17}]]

//특정 요소 삭제
students.delete("roh");

//모든 요소 삭제
students.clear();

 

🎈Set

Set은 다음과 같이 사용한다.

//생성
const names = new Set();

//추가
names.add("ha");
names.add("roh");
names.add("ha");//ha는 이미 존재하기 때문에 변경 x

//크기 확인
names.size;//2

//삭제
names.delete("ha");
반응형