map[key]는 Map을 쓰는 바른 방법이 아닙니다.
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다.
하지만 이 방법은 map을 일반 객체처럼 취급하는것 입니다. 따라서 여러 제약이 생기게 됩니다.
map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다.
객체 선언과 동시에 초기값을 지정 가능합니다.
|
let map = new Map(
[
['1', 234],
['2', 345]
]
);
|
메서드 체이닝도 가능합니다.
|
let kimc = {name:'김종서'};
let leec = {name:'이순신'};
map
.set(leec, '위대한 장군')
.set(kimc, '만고의 충신'); // 객체를 키로 사용
|
다음은 키를 추가하는것이 아니라 객체에 속성을 추가하는 것입니다.
|
// 이렇게 사용하면 안된다.
map['3'] = 567; // 맵에 추가가 아니다. 속성이 추가된 것이다.
map[leec] = 678;
// {"3":567,"[object Object]":678} document.write(`${JSON.stringify(map)}`);
|
ex02.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!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>
/*
map[key]는 Map을 쓰는 바른 방법이 아닙니다.
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다.
하지만 이 방법은 map을 일반 객체처럼 취급하게 됩니다. 따라서 여러 제약이 생기게 되죠.
map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다.
*/
let map = new Map(
[
['1', 234],
['2', 345]
]
);
let kimc = {name:'김종서'};
let leec = {name:'이순신'};
map
.set(leec, '위대한 장군')
.set(kimc, '만고의 충신'); // 객체를 키로 사용
document.write(`${map.size}개<br>`);
document.write(`${map.get('1')}<br>`);
document.write(`${map.get('2')}<br>`);
document.write(`${map.get(leec)}<br>`);
document.write(`${map.get(kimc)}<br><hr>`);
// 이렇게 사용하면 안된다.
map['3'] = 567; // 맵에 추가가 아니다. 속성이 추가된 것이다.
map[leec] = 678;
document.write(`${map.size}개<br>`);
document.write(`${map.get('3')}<br>`);
document.write(`${map['3']}<br>`);
document.write(`${map.get(leec)}<br>`);
document.write(`${map[leec]}<br><hr>`);
document.write(`${JSON.stringify(map)}<br><hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 맵(Map) 객체의 메서드들 (0) | 2024.10.23 |
|---|---|
| [JavaScript] 맵(Map)객체의 요소 반복하기 (0) | 2024.10.23 |
| [JavaScript] 맵(Map) 객체의 set(), get() (0) | 2024.10.23 |
| [JavaScript] 배열 reduce(), reduceRight() (0) | 2024.10.23 |
| [JavaScript] 배열 map() (0) | 2024.10.23 |
