object와 map은 유사해보입니다, 그렇다면 맵은 언제 사용해야 할까요?
key값으로 primitive value( (number, object, boolean, NaN, etc) )을 써야할 때는 map을 사용합니다.
입력된 순서를 기억해야할 때는 map을 사용합니다.
map에서는 쉽게 size를 얻을 수 있다. (Object에서는 Object.keys(obj).length로 접근가능)
primitive value로 키값을 지정하는 예입니다. 객체로도 가능하고 함수로도 가능합니다.
값을 넣을때는 set(키, 값) 메서드를 얻을때는 get(키)메서드를 사용해야 합니다.
값 넣기
|
let map = new Map();
map.set('1', '문자형 키'); // 문자형 키
map.set(1, '숫자형 키'); // 숫자형 키
map.set(true, '불린형 키'); // 불린형 키
let kimc = {name:'김종서'};
map.set(kimc, '만고의 충신'); // 객체를 키로 사용
let fn = ()=>{};
map.set(fn, '함수를 키로 지정'); // 함수를 키로 사용
|
값 얻기
|
document.write(`${map}<br>`);
document.write(`${map.get('1')}<br>`);
document.write(`${map.get(1)}<br>`);
document.write(`${map.get(true)}<br>`);
document.write(`${map.get(kimc)}<br>`);
document.write(`${map.get(fn)}<br>`);
document.write(`${map.size}개<br>`);
|
ex01.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Map</title>
<script>
let map = new Map();
map.set('1', '문자형 키'); // 문자형 키
map.set(1, '숫자형 키'); // 숫자형 키
map.set(true, '불린형 키'); // 불린형 키
let kimc = {name:'김종서'};
map.set(kimc, '만고의 충신'); // 객체를 키로 사용
let fn = ()=>{};
map.set(fn, '함수를 키로 지정'); // 함수를 키로 사용
document.write(`${map}<br>`);
document.write(`${map.get('1')}<br>`);
document.write(`${map.get(1)}<br>`);
document.write(`${map.get(true)}<br>`);
document.write(`${map.get(kimc)}<br>`);
document.write(`${map.get(fn)}<br>`);
document.write(`${map.size}개<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 맵(Map)객체의 요소 반복하기 (0) | 2024.10.23 |
|---|---|
| [JavaScript] 맵(Map) 객체의 map[key]는 객체 접근입니다. (0) | 2024.10.23 |
| [JavaScript] 배열 reduce(), reduceRight() (0) | 2024.10.23 |
| [JavaScript] 배열 map() (0) | 2024.10.23 |
| [JavaScript] 배열 sort() (0) | 2024.10.23 |
