[Javascript] Map과 Set

Map

맵(Map) 은 키가 있는 데이터를 저장하는 점에서 객체와 비슷하지만 맵의 키에는 객체와는 다르게 다양한 자료형을 사용할 수 있음

 

맵의 주요 메서드

• new Map() – 맵을 생성
• map.set(key, value) – key를 이용해 value를 저장
• map.get(key) – key에 해당하는 값을 반환key가 존재하지 않으면 undefined를 반환
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key) – key에 해당하는 값을 삭제
• map.clear() – 맵 안의 모든 요소를 제거
• map.size – 요소의 개수를 반환

//map의 선언

let map1 = new Map();

//맵에 값 할당(다양한 자료형 사용)
map1.set('1','first');
map1.set(2,'second');
map1.set(false,'third');

//맵의 값(value) 가져오기
console.log(`1: ${map1.get('1')} , 2: ${map1.get(2)} , 3:${map1.get(false)}`)

 

 

Map의 요소로 반복작업하기

다음 메서드들과 for .. of을 통해 맵을 이용해 반복작업을 할 수 있음

 

• map.keys() : 요소들의 키를 모아놓은 이터러블 객체를 반환
• map.values() : 요소들의 값을 모아놓은 이터러블 객체를 반환
• map.entries() : 요소들의 키, 값 을 모아놓은 이터러블 객체를 반환

//해당 형태로도 값 할당 가능
let myMap = new Map([
	["firstName","namsu"],
    ["lastName","park"],
    ["age",27]
]);

//키를 대상으로 하여 반복
for(let key of myMap.keys()){
	console.log(`key : ${key}`)
}

//값을 대상으로 하여 반복
for(let val of myMap.values()){
	console.log(`value : ${val}`)
}

//키 , 값 쌍을 대상으로 하여 반복
for(let entry of myMap.entries()){ // myMap 으로 반복해도 entries 와 동일
	console.log(`key , value : ${entry}`)
}

 

맵은 또한 배열처럼 forEach 메서드를 사용할 수 있음

let myMap = new Map([
	["firstName","namsu"],
    ["lastName","park"],
    ["age",27]
]);

myMap.forEach(( val, key, map) => {
	console.log(`${key} : ${val}`)
    console.log(`map : ${map}`)
})

 

객체를 맵으로 변경

Object.entries는 일반 객체를 키, 값 쌍을 요소로 가지는 배열을 생성해 주어 이를 이용하여 맵을 생성할 수 있음

 

let person = {
	name:"park",
    age:25,
    gender:"male"
}	

let entries = Object.entries(person); // Object.entries 이용해 객체를 배열로 생성

let map = new Map(entries); // entries로 맵을 생성

console.log(entries)

console.log(map)

entries 는 배열로 생성되고 map은 맵 타입으로 생성된 것을 볼 수 있음

 

맵을 객체로 변경

Object.fromEntries 는 [키, 값] 의요소를 가지고 있는 배열을 객체로 바꿔줌.

map.entries() 의 메서드는 맵을 [키,값] 의 배열로 바꾸어주는 메서드이므로 Object.fromEntries 를 이용해 맵을 객체로 변경할 수 있음

let menu = new Map(
	[
    	["pasta",1],
        ["steak",2],
        ["fried rice",3]
    ]
); // map 을 생성

let entries = menu.entries(); //map의 [키,값] 형태의 배열을 생성

let object = Object.fromEntries(entries); //배열을 객체로 변환

console.log(object);

object 타입으로 변경

 

 

Set

셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션임. 셋에는 키가 없는 값이 저장됨

 

셋의 주요 메서드

• new Set(iterable) – 셋을 만듬. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줌.
• set.add(value) – 값을 추가하고 셋 자신을 반환
• set.delete(value) – 값을 제거 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
• set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환
• set.clear() – 셋을 비움
• set.size – 셋에 몇 개의 값이 있는지 카운트

 

셋에는 똑같은 값이 중복으로 들어가지 않음

let num_set = new Set();

num_set.add(10);
num_set.add(10);
num_set.add(10);
num_set.add(5);
num_set.add(5);
num_set.add(5);

console.log(num_set) // 중복값이 들어가지 않으므로 추가는 6개를 했지만 요소의 개수는 5,6 두개임

 

 

 

참조:https://ko.javascript.info/map-set