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

 

 

반응형