Array.map() 이 아니다.
Map은 key와 value 쌍을 저장한다는 점에서 object와 유사하다.
하지만 object의 경우 key값에 문자열과 심볼만 넣을 수 있지만, Map은 key값에 모든 타입을 다 넣을 수 있다.
(심지어 객체나 함수를 key값에 넣어도 된다.)
let 맵 = new Map();
Map을 만들고 싶을 때는 new 생성자로 만든다.
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 – 요소의 개수를 반환한다.
'개발 > Javascript' 카테고리의 다른 글
자바스크립트 Date 객체 활용하기 (0) | 2022.08.29 |
---|---|
자바스크립트 addEventListener 중복 방지 (0) | 2022.08.26 |
요소의 크기 변화를 감지하는 ResizeObserver (0) | 2022.08.22 |
자바스크립트의 프로토타입 (Javascript prototype) (0) | 2022.08.17 |
비동기 요청 여러 개 보내고 전부 완료됐을 때 함수 실행하기 (Promise.allSettled) (0) | 2022.08.09 |