자바스크립트의 Map은 키와 값을 쌍으로 하는 데이터 구조로 set() 메서드를 이용하여 데이터를 추가할 수 있다. set() 메서드의 인자값으로 key와 value를 정확히 기입해야 하며 key는 중복될 수 없다. 만약 key값이 중복된다면 가장 마지막에 입력된 데이터로 대체된다.
자바스크립트 Map 값 추가하기 adding value at Map
자바스크립트의 Map은 Set과 다르게 키와 값을 쌍으로 가진 데이터 구조이다.
key-value pair 구조를 가진 데이터집합이기 때문에 json 문법과 비슷하기도 하다.
Map 또한 객체이며, Set 과 같이 임의로 데이터를 추가할 수 있다.
Map에 데이터를 추가할 때는 set() 메서드를 사용하는데, 당연히 key와 value를 정확히 작성해 주어야 한다.
만약, 중복값이 있다면 나중에 입력한 값으로 대체된다.
Map에 대한 기본적인 내용은 이전 내용을 참고해 본다.
값 추가 메서드 Set()
자바스크립트의 Map은 생성과 동시에 데이터를 할당할 수도 있고, 생성 후 set() 메서드를 이용하여 데이터를 할당 할 수 있다.
Map 데이터를 생성할 때는 new 키워드를 사용한다.
set() 메서드의 인자값으로 key와 value를 사용하며 이것은 key-value pair 구조를 가진다.
key값은 중복될 수 없으며 만약 set() 메서드를 사용하여 데이터 추가시 중복값이 있다면 마지막에 입력한 값으로 대체된다.
Map = new Map();
Map.set( key, value );
샘플코드
위의 방법으로 Map 객체를 생성하고 데이터를 추가해 보도록 한다.
Map은 키와 값을 쌍을 가진 데이터집합이며, Map 데이터 추가시 set() 메서드를 사용한다.
set() 메서드의 인자값으로 키와 값을 입력해 주면 되는데 key 는 중복이 될 수 없다.
set() 메서드 사용시 key 는 중복되어 입력되는 경우 가장 마지막에 입력한 값으로 대체된다.
<!DOCTYPE html>
<html>
<body>
<script>
const colMap = new Map();
colMap.set("car", "현대자동차");
colMap.set("model", "아반떼");
colMap.set("displacement", "1600");
colMap.set("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>
코드를 보면 알 수 있듯이 new 키워드를 사용하여 Map 객체를 생성하였다.
Map 객체 생성 후 set() 메서드를 사용하여 데이터를 추가하고 있는 것을 볼 수 있다.
결과 화면을 보자.
'programming > javascript' 카테고리의 다른 글
웹사이트 로딩바 만들기 로딩화면으로 기다림 방지 (0) | 2022.11.03 |
---|---|
자바스크립트 Map 요소 값 삭제하기 Removing value at Map (0) | 2022.06.26 |
자바스크립트 Map 사용하기 키와 값을 쌍으로 가진 데이터 타입 using javascript Map Data Object (0) | 2022.06.17 |
자바스크립트 Set 반복 가능 객체 확인 Checking javascript iterator Set Values method (0) | 2022.06.14 |
자바스크립트 Set 반복문 2가지 사용 방법 using javascript set for statement (0) | 2022.06.10 |
댓글