Map 자료형

강의를 듣고 까먹을 것 같아서 정리한다. 

 

Map 자료형

• object 와 비슷하게 key value 를 저장하지만,
• object 와는 다르게 {'name' => 'kim}의 구조를 가지고 있다. 
• 생성자 함수를 통해 만들 수 있다. 

 

좀더 자세히 살펴보자. 

일단 Map 자료형을 만드는 과정은 아래와 같다.

//Map 자료형 생성하기
let thisIsMap = new Map(); 

//Map에서 데이터 저장하기
thisIsMap.set('name', 'kim');    
thisIsMap.set('age', '20');

console.log(thisIsMap);   //Map(2) {'name' => 'kim', 'age' => '20'}

//Map에서 데이터 가져오기
console.log(thisIsMap.get('age'));  

//Map에서 데이터 삭제하기.
thisIsMap.delete('age');   
console.log(thisIsMap);   //Map(1) {'name' => 'kim'}  삭제 잘 됨.

//Map 자료형에 저장된 데이터의 개수 출력하기.
console.log(thisIsMap.size);  //1

 

 

object와 비슷하지만 다르다고 했는데, 

key 에 문자 타입만 올 수 있는게 아니라 모든 타입이 올 수 있다. 

 

let coco = new Map();
coco.set('grean', 'yellow');
coco.set([22,53,13], [2,4, 8]);
coco.set({name : 'kim'}, {gender : 'M'});

console.log(coco)  
//결과는 이렇다.
//Map(3) {'grean' => 'yellow', Array(3) => Array(3), {…} => {…}}
//[[Entries]]
//0: {"grean" => "yellow"}
//key: "grean"   value: "yellow"

//1: {Array(3) => Array(3)}
//key: (3) [22, 53, 13]   value: (3) [2, 4, 8]

//2: {Object => Object}
//key: {name: 'kim'}     value: {gender: 'M'}

//size: 3
//[[Prototype]]: Map

 

이렇게 배열이나 object 같은 다른 데이터 타입들도 잘 저장이 되는걸 볼 수 있다. 

그렇다면 가져오는것도 잘 될까?🧐

 

let coco = new Map();
coco.set('grean', 'yellow');
coco.set([22,53,13], [2,4, 8]);
coco.set({name : 'kim'}, {gender : 'M'});

console.log(coco.get('grean'));      //yellow
console.log(coco.get([22,53,13]));   //undefined
console.log(coco.get({name : 'kim'}));  //undefined

 

👀❓

분명 저장은 잘 되었는데, 가져오는게 안먹는다.🥲

다른 방법으로 시도해 보자. 😃

 

let coco = new Map();

let numbers = [22,53,13];
let obj = {name : 'kim'};

coco.set('grean', 'yellow');
coco.set(numbers, [2,4, 8]);
coco.set(obj, {gender : 'M'});

console.log(coco.get('grean'));   //yellow
console.log(coco.get(numbers));   //(3) [2, 4, 8]
console.log(coco.get(obj));       //{gender: 'M'}

 

배열이나, obj 를 바로 담는게 아니라, 변수에 담아서 가져와 봤는데 잘 가져와 졌다.

Map 자료형에서 key값 으로 array나 object 를 사용할 때에는 변수에 넣어주는 것이 좋겟다. 

 

 

Map자료형에 .keys( )  혹은 .values( ) 를 붙이면 반복문을 사용할 수 있다. 

let coco = new Map();

let numbers = [22,53,13];
let obj = {name : 'kim'};

coco.set('grean', 'yellow');
coco.set(numbers, [2,4, 8]);
coco.set(obj, {gender : 'M'});

//반복문으로 Map자료의 key 출력하기
for(let k of coco.keys()){
	console.log(k);  //grean  //(3)[22, 53, 13]  //{name: 'kim'}
}

//반복문으로 Map자료의 value 출력하기
for(let v of coco.values()){
	console.log(v);  //yellow  //(3)[2, 4, 8]  //{gender: 'M'}
}

//Map자료형이 for~ of를 돌 수 있는 이유.
console.log(coco.keys()); //MapIterator {'grean', Array(3), {…}}

 

 

Map 자료형을 생성자 함수로 만들 때 동시에 자료를 바로 넣어줄 수 있다.  __대괄호 2개 있어야 함!!

let 변수 = new Map( [  [자료의 키, 자료의 값 ] ] )

let perr = new Map([
    [[3,2,2], 'nam'],
    ['hey', 'hello']
]);
console.log(perr); //Map(2) {Array(3) => 'nam', 'hey' => 'hello'}

 

 

지금은 이걸 배워서 도대체 어디에 써먹나, 굳이 obj 놔두고 Map을 쓰는 이유는 뭘까 싶지만, 

나중에 엄청 많은 자료에서 원하는 자료를 찾기 위해 반복문을 돌려야 할 때에, Hash Table, Hash Map 을 사용한다고 함.

object로 Hash Table 만들면 너무 유연하기 때문에 

Map() 을 쓰면 좋다고 함.  👶👍