Map에 대하여

키와 값의 쌍으로 이루어진 컬렉션 객체

- Key - value값의 한쌍으로 이루어진 데이터 집합이다. 

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);
console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' }

 

값을 추가하기, 해당 값이 포함되어있는지 확인하기

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);
console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' }

// 추가
map.set('rabbit', '토순이');
console.log(map); //Map(3) { 'cat' => '나비', 'dog' => '바둑이', 'rabbit' => '토순이' }

console.log(map.size); //3 개수 가져오기 

console.log(map.has('cat')); //true
console.log(map.has('rabbit')); //true

값 변경하기 

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);
console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' }

map.set('cat', '냐옹이'); //값 변경하기
console.log(map);

값 삭제하기 

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);
console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' }

// 삭제
map.delete('cat'); 
console.log(map); //Map(1) { 'dog' => '바둑이' }

값 순회하기

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);

// 순회
map.forEach((value, key) => console.log(key, value));

키값, 벨류값 따로 뽑기 

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);

console.log(map.keys()); // [Map Iterator] { 'cat', 'dog' }
console.log(map.values()); // [Map Iterator] { '나비', '바둑이' }

키, 벨류 페어로 뽑기 

const map = new Map([
	['cat', '나비'],
	['dog', '바둑이'],
]);
console.log(map.entries()); // [Map Entries] { [ 'cat', '나비' ], [ 'dog', '바둑이' ] }

그렇다면 오브젝트와 맵의 차이점은 무엇일까?

const errorMsgObj = {
	404: '페이지가 없습니다',
	500: '서버 오류입니다',
	401: '권한이 없습니다',
};

console.log(errorMsgObj['404']);
// console.log(errorMsgObj.404) //오류남.

객체는 암묵적으로 "404" : "페이지가 없습니다" ==> 이런식으로 변환이 된다. 

console.log(errorMsgObj.404)  ==> 그래서 이런식으로는 불러올수가 없다. 

 

맵은 가능하다. 하지만 get을통해 값을 가져와야함! 

const errorMsgMap = new Map([
	[404, '페이지가 없습니다'],
	[500, '서버 오류입니다'],
	[401, '권한이 없습니다'],
]);

errorMsgMap.get(404); //get을 통해 안에있는 값을 가지고온다. 
//console.log(errorMsgMap['404']); //undefined

for of를 적용해보기 

const errorMsgMap = new Map([
	[404, '페이지가 없습니다'],
	[500, '서버 오류입니다'],
	[401, '권한이 없습니다'],
]);

// console.log('===========');
for (const [key, value] of errorMsgMap) {
	console.log(key, value);
}