자바스크립트 맵 객체 는 Set과 유사하지만, [Key, Value]의 쌍을 요소로 갖게 됩니다.
map에 사용되는 key는 고유한(unique) 형태이어야 합니다.
Object와 비교하여 Object의 경우 키는 String을 사용하지만, Map은 문자열 뿐만 아니라 다른 자료형 값으로도 키를 설정할 수 있습니다. 또, Map의 경우에는 크기를 가져오는 방법이 간단하고, 추가된 순서대로 차례대로 꺼내어 반복(Iteration) 하게 됩니다.
자바스크립트 맵 map 예제
기본적으로 map은 Key, Value 값을 파라메터로 하여 객체를 구성합니다.
<script>
const students = new Map();
students.set( "철수", 20 );
students.set( "영희", 40 );
students.set( "짱구", 30 );
students.set( "민정", 10 );
students.set( "수정", 15 );
console.log( students );
</script>
다음과 같이 map 객체에 key => value 의 형태로 입력값이 들어가게 됩니다.
만약 key를 기준으로 중복된 값을 입력하면 다음과 같이 무시됩니다.
<script>
const students = new Map();
students.set("철수", 20);
students.set("영희", 40);
students.set("짱구", 30);
students.set("민정", 10);
students.set("수정", 15);
students.set("철수", 15); //중복값 >> 제외됨
console.log( students );
</script>
위의 key, value 값은 중첩 배열을 활용해도 생성할 수 있습니다.
<script>
const nestedStudent = new Map([
["철수", 20],
["영희", 40],
["짱구", 30],
["민정", 10],
["수정", 15],
]);
// 중첩배열로 생성된 맵 객체의 키 들을 출력
console.log(nestedStudent.keys());
// 중첩 배열로 생성된 맵 객체의 Key, Value
console.log(nestedStudent.entries());
nestedStudent.forEach((value, key) => {
console.log(key, value);
});
</script>
Map 객체 추가 및 값 읽어오기
Map 객체에 키, 값을 추가하는 또 다른 방법은 .set()을 활용할 수 있으며, .get()을 통해 해당 키에 해당하는 값을 가져올 수 있습니다.
<script>
const dynStudent = new Map();
dynStudent.set("철수", 20);
dynStudent.set("영희", 40);
dynStudent.set("짱구", 30);
dynStudent.set("민정", 10);
dynStudent.set("수정", 15);
console.log(dynStudent.get("수정"));
</script>
실행하면 수정 키값에 해당하는 값 15만이 찍히게 됩니다.
자바스크립트 Map 객체에서 ForEach, for of
map의 경우 forEach, for of 등을 사용할 수 있습니다. forEach에서 주의할 점은 콜백함수에 value, key 순서로 파라메터가 들어온다는 점입니다.
<script>
const students = new Map();
students.set("철수", 20);
students.set("영희", 40);
students.set("짱구", 30);
students.set("민정", 10);
students.set("수정", 15);
// map에서의 forEach는 파라메터로 value, key를 받음
students.forEach((value, key) => {
console.log(key, value);
});
// map에서의 for of는 객체를 순환하며 반복함
for (let entry of students) {
console.log(entry);
}
// map에서의 for of 는 key, value를 순환하여 반복할 수 있음. 객체 디스트럭처링
for (const [key, value] of students) {
console.log(key, val);
}
</script>
배열의 foreach와는 다르게, map에서의 foreach 는 위와 같이, 콜백함수의 파라메터로 key, value를 받게 됩니다.
또, for … of 의 경우, 객체의 요소가 배열 형태로 반환되므로 위와 같이 [key, value]의 형태로 혹은 아래와 같이 배열이 인덱스 형태로 접근해야 합니다.
<script>
for (item of students) {
console.log(item[0]); // key
console.log(item[1]); // value
};
</script>
자바스크립트 맵 객체 삭제 – delete 메소드
Set과 마찬가지로 자바스크립트 맵 객체의 삭제는 delete 메소드를 통해 처리합니다.
<script>
const students = new Map();
students.set("철수", 20);
students.set("영희", 40);
students.set("짱구", 30);
students.set("민정", 10);
students.set("수정", 15);
console.log( students );
//Map에서는 delete에 key를 입력하여 요소 삭제
students.delete( "민정" );
console.log( students );
</script>
이상으로 자바스크립트 맵 객체에 대해서 알아보았습니다. MDN 모질라 문서 키 기반 컬렉션 문서에서 더 상세한 사항을 확인할 수 있습니다.
자바스크립트 SET 객체 메소드를 확인하고자 할 때에는 이 문서를 확인해 보시기 바랍니다.