Javascript : 자료구조 중 Set & Map.

Size와 Delete 사용이 🍡

 

Set

Set는 값들의 집합이다. 특징은 순서가 없고 중복이 불가하는 것이다.

특정 값은 Set내에서 하나씩만 존재하게 된다. 

 

배열 내의 중복을 없애기 위해 쓰이곤 한다. 

 

생성

 

let mySet = new Set([1,2,3]);

//배열 형식으로 넣어주어야 한다.
//기본 숫자나 스트링 값은 들어가지 않는다. new Set(1,2,3) <-- 안됨 X

//기존의 배열을 넣을 수도 있다. 

const array = [1,2,3];
const newSet = new Set(array);

 

기본 동작

const mySet = new Set([1,2,3])


mySet.size  // 3 - 크기 몇개가 들어있는지

mySet.has(2) // true - 이걸 가지고 있는지 없는지 true/false

mySet.forEach(item => console.log(item)) // 1,2,3 순회 가능.

mySet.add(4) // 1,2,3,4 추가된다. 중복요소를 추가하면 무시된다. 

mySet.delete(4) // 1,2,3 삭제된다.

mySet.clear() // 모두 삭제

 

배열과 set의 비교

 

배열과 set은 상호 변환된다.

new Array(mySet) 으로 배열 변환 가능. 

 

가장 큰 차이점은 중복이 불가 하다는 것. 

그리고 배열내에 '특정 요소'의 핸들링에 관한 것. 

특정요소가 배열에 존재 하는지 확인 할 때 indexOf 메서드를 사용하는 것은 효율적이지 못하다. 해당요소의 순서를 찾아서 배열에서 잘라내야 하는 과정보다 직접 해당 요소를 delete("해당요소") 해버릴 수 있어 편하다. 

 

Map

키와 값을 서로 연결(매핑)시켜 저장. 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다.

set이 중복을 제거하기 위해 가끔 등장하는 반면 Map의 사용에 대해서는 사실 감이 잡히지 않는다.

 

Object와 매우 유사하기 때문에 굳이 Map을 써야하나 싶었는데,

공부해보니 차이점이 존재하고, 어떤 부분에서는 Map이 더 유용하게 쓰일 수 있다. 

 

생성

const myMap = new Map([
	['key1', '사과'],
	['key2', '바나나'],
])

console.log(myMap) // {'key' => '사과', 'key2' => '바나나'}

or

const myMap = new Map();
myMap.set("key1", "사과");
myMap.set("key2", "바나나");

console.log(myMap) // {'key' => '사과', 'key2' => '바나나'}

 

기본 동작

 

const myMap = new Map();
myMap.set("key1", "사과");
myMap.set("key2", "바나나");

myMap.size; // 2 - 개수. 

myMap.get("key1"); // 사과 - key로 value 찾기

myMap.has("key2"); // true - 키 값이 있는지 true/false

myMap.delete("key1"); // key1값 삭제

myMap.forEach((ele) => console.log(ele)); // 바나나 - 값이 순회된다.

MDN

 

Object와 Map의 비교

• Object의 키는 Strings 이며, Map의 키는 모든 값을 가질 수 있다.
• Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
• Map은 삽입된 순서대로 반복된다.

Object 혹은 Map중에 어느 것을 사용할지를 결정하는데 도움을 줄 두가지 팁이 있다:

• 실행 시까지 키를 알수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를 대신해서 map을 사용.
• 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용.

 

참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections