자바스크립트의 Map은 키와 값을 쌍으로 가진 key-value pair 구조를 가진다. json과 비슷한 구조를 가지는데 json은 문자열인 반면 Map 은 객체이다. Map 은 new 생성자를 사용하여 객체를 생성할 수 있으며, 객체 생성시 데이터를 직접 할당할 수도 있다. 그리고 반복가능하기 때문에 for of foreach와 같은 반복문의 사용이 가능하다.
자바스크립트 Map 사용하기
키와 값을 쌍으로 가진 데이터 타입
using javascript Map Data Object
자바스크립트의 자료구조 중 많이 사용되는 것이 Map이다.
Set과 함께 반복가능한 형태를 가지지만, 데이터만 존재하는 Set과는 다르게 데이터를 구분할 수 있는 key를 가지고 있다.
이것은 key-value pair 형식으로 키와 값을 쌍으로 가지고 있는 구조를 의미한다.
키와 쌍을 가진 데이터 구조는 대표적으로 json 형태가 있다.
키와 값을 쌍으로 가진 객체 Map
키와 값을 가진 Map 은 Set 과 같은 데이터 반복 객체이며, new 생성자를 사용하여 객체를 생성할 수 있다.
Map 객체를 생성할 때는 데이터를 동시에 추가할 수도 있고, 생성 후 추가할 수 있다.
Map 은 반복가능한 객체이기 때문에 for of 또는 foreach 와 같은 반복문 사용이 가능하다.
단순히 Map 의 크기를 보고 싶다면 size 속성을 사용할 수 있다.
아래는 Map 의 사용법을 간략히 보여주고 있다.
new Map([key, value], [key, value], [key, value], ~);
Map.size
for ( let lpEach of Map ) {
console.log(lpEach);
}
Map.forEach (function(value, key) {
console.log(key, value);
});샘플코드
위의 내용을 사용하여 Map 을 이용한 자바스크립트 예제를 만들어 본다.
Map 을 생성하면서 데이터를 할당한다.
단순히 Map의 크기를 알기 위해 size 속성을 사용하였으며, 이전에 사용했던 반복문인 for of , foreach 를 사용하여 데이터의 출력을 눈으로 확인해 본다.
<!DOCTYPE html>
<html>
<body>
<script>
const colMap = new Map([
["car", "기아자동차"],
["model", "k3"],
["displacement", "1600"],
["efficiency", "13"]
]);
console.log(colMap.size);
console.log(colMap);
console.log('----------');
for ( let lpEach of colMap ) {
console.log(lpEach);
}
console.log('----------');
colMap.forEach (function(value, key) {
console.log(key, value);
});
console.log('----------');
</script>
</body>
</html>Map 데이터 객체를 생성할 때는 new 생성자를 사용한다.
키와 값이 쌍으로 이루어진 key value pair 구조이기 때문에 키와 값은 기입해 주어야 한다.
반복문의 사용에 대한 차이도 조금 발생한다.
for of 의 경우 객체로써 개별값이 출력이 되지만, foreach 의 경우 키와 값을 별로도 출력할 수 있다.
결과화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 Map 요소 값 삭제하기 Removing value at Map (0) | 2022.06.26 |
|---|---|
| 자바스크립트 Map 값 추가하기 adding value at Map (0) | 2022.06.20 |
| 자바스크립트 Set 반복 가능 객체 확인 Checking javascript iterator Set Values method (0) | 2022.06.14 |
| 자바스크립트 Set 반복문 2가지 사용 방법 using javascript set for statement (0) | 2022.06.10 |
| 자바스크립트 Set 값 삭제하기 deleting javascript Set value (0) | 2022.06.07 |
댓글