10. Map

📌 10-1 Map이란?

자바스크립트의 내장 메서드로 키와 값의 형태로 되어 있으며 자료형에 상관없이 모든 값을 넣을 수 있다.

💡 Key : Value 형식으로 인자를 저장할 수 있다.
💡 new Map()으로 빈 Map객체를 생성한다.

📌 10-2 Map의 메서드

1. Map.prototype.set(key, value) => Map 객체에 키에 해당하는 값을 추가한다.
2. Map.prototype.has(key) => Map 객체 안에 해당되는 Key의 값에 따라 Bool값으로 반환한다.
3. Map.prototype.get(key) => 해당 되는 키의 값을 반환한다.
4. Map.prototype.delete(key) => 해당 되는 키의 값을 삭제한다.
5. Map.prototype.keys() => Map 객체 안에 해당되는 Key의 이름을 출력
6. Map.prototype.values() => Map 객체 안에 해당되는 Value의 값을 출력
7. Map.prototype.clear() => Map 객체를 빈 Map 객체로 초기화한다.
8. Map.size => 메서드는 아니고 프로퍼티이며 Map안에 인자의 개수를 확인한다.

const myMap = new Map(); // Map객체 생성
myMap.set('name', 'Kim'); // 객체 Key = name, Value = Kim 생성
console.log(myMap.get('name')); // Kim 출력
myMap.set('age', 20); // 객체 추가
myMap.set('city', 'Seoul'); // 객체 추가
console.log(myMap); // Map(3) { 'name' => 'Kim', 'age' => 20, 'city' => 'Seoul' } 출력
console.log(myMap.keys()); // [Map Iterator] { 'name', 'age', 'city' } 출력
console.log(myMap.values()); // [Map Iterator] { 'Kim', 20, 'Seoul' } 출력
console.log(myMap.size) // 3 출력
console.log(myMap.has('name')); // true 출력
myMap.delete('name');
console.log(myMap); // Map(2) { 'age' => 20, 'city' => 'Seoul' } 출력
myMap.clear(); // Map 초기화
console.log(myMap); // Map(0) {} 출력

📌 10-3 Map과 Obj와 다른점

1. Map은 Obj와 다르게 forEach문이 사용이 가능하다.

const Obj = {
    name : 'Kim',
    age: 20,
    city: 'Seoul'
} // 객체 생성
const myMap = new Map();
myMap.set('name', 'Kim');
myMap.set('age', 20);
myMap.set('city', 'Seoul'); // Map 안에 객체 생성
myMap.forEach((value) => console.log(value)); // Kim , 20 , Seoul 출력
Obj.forEach((value) => console.log(value)); // 오류 발생

forEach문은 배열의 메서드이므로 Obj로 사용할 수 없지만 Map은 forEach 메서드를 지원한다.
Obj의 값을 순차적으로 확인할려면 for in 문을 사용해야한다.

const Obj = {
    name : 'Kim',
    age: 20,
    city: 'Seoul'
}
for(let index in Obj) {
    console.log(Obj[index]); // Kim, 20, Seoul 출력
}

2. Map은 Obj와 다르게 Key값에 Number Type이 가능하다.

const Obj = {
    name : 'Kim',
    age: 20,
    city: 'Seoul'
}
Obj[0] = 0; // Obj에 키 0과 값 0인 객체 추가
const myMap = new Map();
myMap.set('name', 'Kim');
myMap.set('age', 20);
myMap.set('city', 'Seoul');
myMap.set(0, 0); // Map에 키 0과 값 0인 객체 추가
console.log(Obj); // { '0': 0, name: 'Kim', age: 20, city: 'Seoul' } 출력
console.log(myMap); // Map(4) { 'name' => 'Kim', 'age' => 20, 'city' => 'Seoul', 0 => 0 } 

이와 같이 Key값에 숫자형이 가능하다.