Front-end/Javascript
[JS] Map과 Set
집으로 감자
2025. 1. 24. 15:41
Map과 Set이 등장한 이유
Javascript에서 객체와 배열을 이용해서 다양하고 복잡한 프로그램을 만들 수 있다.
그럼에도 불구하고 현실세계의 여러가지 문제를 해결하기에는 부족하기 때문에 Map과 Set이 등장하였다.
Map
key-value 쌍으로 데이터를 저장하는 자료 구조
1. key의 데이터 타입에 제한이 없다.
문자열 뿐만 아니라 숫자, 객체, 심볼 등 모든 데이터 타입을 사용할 수 있다.
객체와의 차이점이 여기서 드러난다.
2. key의 삽입 순서를 기억한다.
3. 순서는 유지 되지 않는다.
Map 기능
📌 new Map()
Map 생성하기
const myMap = new Map();
📌 map이름.set(key,value)
key와 value 저장하기
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
📌 map이름.get(key)
key에 해당하는 값을 가져오기
key가 존재하지 않으면 undefined를 반환한다.
myMap.get("one"); // 결과: 1
📌 map이름.has(key)
해당 key가 존재하면 true, 없으면 false를 반환한다.
console.log(myMap.has("two")); // 결과: true
📌 map이름.delete(key)
key에 해당하는 값을 삭제함
myMap.delete("three")
📌 map이름.clear()
Map 안의 모든 요소 제거하기
myMap.clear()
📌 map이름.size
요소의 개수를 반환한다
console.log(myMap.size); // 결과: 3
Set
고유한 값들의 집합을 저장하는 자료구조
1. 중복을 혀용하지 않는다.
같은 값이 2번 이상 저장되지 않는다.
2. 삽인된 순서대로 요소를 순환한다.
3. 인덱스를 사용하지 않는다.
Set 기능
📌 new Set()
Set 생성하기
const mySet = new Set()
📌 set이름.add(value)
Set에 새로운 값 추가하기
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value4");
mySet.add("value5");
📌 set이름.has(value)
Set에 들어있는 값 검색하기
console.log(mySet.has("value1"));
📌 set이름.size
요소의 개수를 반환한다.
console.log(mySet.size);
[참고자료]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map
https://velog.io/@merkyuri/Javascript-Map-Set
반응형