자바스크립트 Map 사용하기

Array.map() 이 아니다.

 

Map은 key와 value 쌍을 저장한다는 점에서 object와 유사하다.

 

하지만 object의 경우 key값에 문자열과 심볼만 넣을 수 있지만, Map은 key값에 모든 타입을 다 넣을 수 있다.

(심지어 객체나 함수를 key값에 넣어도 된다.)

 

let 맵 = new Map();

Map을 만들고 싶을 때는 new 생성자로 만든다.

---

콘솔에 찍어보면 Map의 정보가 나온다. size가 찍힌다는게 특이한 점이다.

---

object 에 값을 넣을때는 Object.key = value 혹은 Object[key] = value 이런식으로 추가하는데

 

Map에 값을 추가할 때는 .set 메서드를 사용한다.

 

그리고 값을 읽어올 때는 .get 메서드를 사용한다.

맵.set('key', 'value');
console.log(맵); // Map(1) {'key' => 'value'}
console.log(맵.get('key')); // 'value'

// 생성할 때 이차원배열로 생성해도 된다.
let 맵2 = new Map([
    ['key', 'value'],
    ['key2', 'value2']
])

 

아까 Map은 키값에 모든 타입의 자료형을 넣을 수 있다고 했는데 한번 확인해보자.

 

맵.set(true, '불리언을 키로 사용했군');
맵.set(1, '숫자를 키로 사용했군');

function sayHello(){
	console.log('hello')
}

맵.set(sayHello, '함수를 키로 사용했군')

console.log(맵.get(true)); // '불리언을 키로 사용했군'
console.log(맵.get(1)); // '숫자를 키로 사용했군'
console.log(맵.get(sayHello)); // '함수를 키로 사용했군'

이렇게 key값에 어떤 자료형을 넣어도 들어간다.

 

또한 Map과 Object에는 큰 차이가 몇가지 있는데

 

Map은 size 프로퍼티로 크기를 바로 알 수 있지만, Object는 직접 크기를 알아내야 한다.

let 맵 = new Map();
맵.set('키1', '값1');
맵.set('키2', '값2');
맵.set('키3', '값3');
console.log(맵.size) // 3

let 객체 = new Object();
객체['키1'] = '값1';
객체['키2'] = '값2';
객체['키3'] = '값3';
console.log(Object.keys(객체).length); // 3
// object에는 크기를 알려주는 메서드가 없으니
// 전체 key값을 배열로 받아와서 .length로 알아내야한다.

Map은 iterable 객체라 즉시 순회가 가능하지만, Object는 키값을 알아낸 후 접근해야한다.

for(entry of 맵){
    console.log(entry)
}
// ['키1', '값1']
// ['키2', '값2']
// ['키3', '값3']

for(key in 객체){
    console.log(`${key} : ${객체[key]}`)
}
// 키1 : 값1
// 키2 : 값2
// 키3 : 값3

이외에도 몇몇 차이가 있으니 자세한것은 MDN에서 확인하면 된다.

---

그래서 신기하긴 한데, 이걸 어따 씀?

---

키값에 모든 자료형을 넣을 수 있다는 점을 활용하여, HTTP 코드 자료 등을 만들 때 유용하게 사용할 수 있다.

 

뭐 키값을 다 문자열로 넣어도 되긴하지만, 때로는 다른 자료형을 넣는게 더 편할 때도 있으니까...

let httpCode = new Object();
httpCode.404 = 'Not Found'; // Uncaught SyntaxError: Unexpected number
httpCode[404] = 'Not Found';
// 위와 같이 처리하면 값이 정상적으로 들어가긴한다.
// 다만 자바스크립트가 숫자를 문자열로 자동 치환해서 키값을 넣는것이다.

let httpCode2 = new Map([
    404 : 'Not Found'
])

console.log(httpCode.404); // Uncaught SyntaxError: Unexpected number
console.log(httpCode[404]); // 'Not Found'
console.log(httpCode2.get(404)); // 'Not Found'

또한 Map 은 데이터에 접근할때 get 과 set이라는 명확한 메서드를 사용하기 때문에

 

Object.key 혹은 Object[key] 로 값에 접근하는 일반 객체보다 동작 의도를 파악하기 쉽다.

 

명확한 get 과 set 메서드가 있기 때문에 Map은 자주 변경되는 자료에 사용하기 적합하다.

 

정리하자면, Map은 변경이 자주 일어나는 객체에 사용할 때 빛을 발한다.
.get 메서드와 .set 메서드를 활용하여 자료접근도 쉽고
iterable(순회가능한) 객체라 for...of문을 사용하기도 적합하다.

이 외에 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 – 요소의 개수를 반환한다.