-
2-5 Map 소개 및 예시코드 연습JavaScript 문법 종합반 2023. 4. 8. 21:28
기존 객체, 배열을 활용해서 많고, 다양하고, 복잡한 프로그램을 만들어왔다.
그럼에도 현실세계를 반영하기엔 역부족
그리하여 Map, Set 이라는 추가적인 자료구조 등장
자료구조란
여러가지 자료 형태를 나타내는 것. Map과 Set도 자료구조에 해당한다.
Map, Set의 목적: 기존 방식(배열이나 객체)보다 데이터의 구성, 검색, 사용을 더 효율적으로 처리하기 위해
Map
key에 어떤 유형도 다 들어올 수 있다.
Map은 키가 정렬된 순서로 저장되기 때문.
Map의 기능
검색, 삭제, 제거, 여부 확인
Map 준비
const myMap = new Map();
Map에 요소추가
myMap.set('key', 'value');
Map 검색
myMap.get('key')
Map 반복을 위한 메서드(keys(), values(), entries())
우선 for of 구문을 사용하기 위해선 해당 객체가 iterator(반복자)속성을 가지고 있어야 함.
myMap.keys() / myMap.values() / myMap.entries()
는 반복자 속성을 가지고 있다.
키,밸류를 Map에 저장할 때 set('key','value')의 형태로 저장했었다.
그리고 해당 key들을 반복하려면
for (const of myMap.keys()) {
console.log(key)
}
해당 value들을 반복하려면
for (const of myMap.values()) {
console.log(value)
}
의 형태를 사용해야함을 알 수 있다.
Map준비
const myMap = new Map();
Map추가
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
myMap.keys()의 속성 확인
console.log(myMap.keys());
터미널 결과:
[Map Iterator] { 'one', 'two', 'three' }
Map의 키 반복
for (const key of myMap.keys ()) {
console.log(key);
}
터미널 결과:
one
two
three
myMap.values()의 속성 확인
console.log(myMap.values());
터미널 결과:
[Map Iterator] { 1, 2, 3 }
Map의 밸류 반복
for (const value of myMap.values ()) {
console.log(value);
}
터미널 결과:
1
2
3
myMap.entries()의 속성 확인
console.log(myMap.entries());
터미널 결과:
[Map Iterator] { ['one',1], ['two',2], ['three',3] }
Map의 엔트리(항목) 반복
for (const entry of myMap.entries ()) {
console.log(entry);
}
터미널 결과:
['one', 1]
['two',2]
['three',3]
Map의 크기 확인
console.log(myMap.size)
터미널 결과: 3
Map의 특정 키가 존재하는지 확인
console.log(myMap.has("two"));
터미널 결과: true배운점
Map은 객체나 배열처럼 자료구조의 한 종류
맵을 처음 만들 땐
const 맵이름 = new Map();
요소를 추가할 땐
맵이름.set( 'key', 'value' )
위와같이 나열하는 방식. 밸류에 어떤것이든 들어갈 수 있다.
Map 요소 반복 (for ~ of) 엔트리 예시
for (const entry of myMap.entries ()) {
console.log(entry);
}Map의 크기 확인
console.log(맵이름.size)Map의 특정 키가 존재하는지 확인
console.log(맵이름.has("키"));
터미널 결과: (있다면)true (없다면)false'JavaScript 문법 종합반' 카테고리의 다른 글
WIL Javascript문법종합반 1주 (0) 2023.04.09 2-6 Set 소개 및 예시코드 연습 (0) 2023.04.08 2-3 일급 객체로서의 함수 1 (0) 2023.04.08 2-2 ES6 문법 소개 및 실습 2 (0) 2023.04.08 2-1 ES6 문법 소개 및 실습 1 (0) 2023.04.08