JavaScript : 자바스크립트 Set(), Map()

▶ Set()

• Set()은 value들로 이루어진 컬렉션
• Array와는 다르게 Set은 같은 value를 2번 포함할 수 없다. 따라서 Set에 이미 존재하는 값을 추가하려고 하면 아무 일도 없다.

Method	Description
new Set()	새로운 Set을 생성
add()	Set안에 있는 새 요소를 추가
delete()	Set에 있는 요소 삭제
has()	Set에 해당 요소가 있으면 true를 반환
forEach()	Set 각 요소에 대한 콜백을 호출
values()	Set의 모든 값이 있는 반복자 반환
Property	Description
size	Set안에 있는 요소들의 수를 return

<script>
const letters = new Set();	//1. 새로운 set을 만든다.
letters.add('a');		//2. 새로운 요소를 추가한다.
letters.add('b');
letters.add('c');
letters.add('a'); 		// 이미 존재하는 값을 넣어도 Array처럼 추가되지 않는다.
// letters.size : 3
// letters.has('a') : true

// 3. forEach()
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})
document.getElementById("demo").innerHTML = text;
// text 결과
/*
a
b
c
*/

// 4. values()
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;

</script>

※ has()는 indexOf()보다 빠르다고 하지만, Set에는 index가 존재하지 않기 때문에 index를 가지고 value를 접근할 수 없다.

 

▶ Map()

• Map()은 키가 모든 데이터의 유형이 될 수 있는 키-값으로 이루어진 컬렉션
• Map()은 키의 원래 삽입 순서를 기억한다.
• key를 사용해서 value를 get, set할 수 있다. key들은 중복될 수 없다. 하나의 key에는 하나의 value만 존재한다.

Method	Description
new Map()	새로운 Map을 생성
set()	Map의 키 값을 설정
get()	Map의 키 값을 가져오기
delete()	키로 지정된 Map요소 삭제
has()	해당 키가 Map에 있으면 true반환
forEach()	Map의 각 키/값 쌍에 대한 함수를 호출
entries()	Map에서 [key, value] 쌍이 있는 반복자를 반환
Property	Description
size	Map의 요소 수를 반환

<script>
// 1. Map생성
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
// 결과값 : 500

// 2. Map set사용
fruits.set("apples", 500);

// 3. Map get사용
fruits.get("apples"); // 500 return

// 4.그 외
fruits.size 	// 3 return
fruits.delete("apples");	//apples없어지고 나머지 보임
fruits.has("apples");	//있으면 true, 없으면 false
</script>

 

▶ Map과 Object의 차이

	Object	Map
반복	직접 반복할 수 없음	직접 반복이 가능
크기	크기 속성이 없다	크기 속성이 있다
키 유형	키는 문자열(또는 symbol)이어야 한다	키는 모든 데이터 유형이 될 수 있다
키 순서	키가 정렬되어 있지 않다	키는 삽입 순서로 정렬된다
기본값	기본 키 보유	기본 키가 없다

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
/* 결과
apples = 500
bananas = 300
oranges = 200
*/

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
/* 결과
apples,500
bananas,300
oranges,200
*/
</script>