개발

js Map

explosion149 2024. 11. 5.
console.log(myMap.size); // 3 출력
avaScript의 Map 객체는 키-값 쌍을
저장하는 컬렉션으로 ES6에서 도입되었습니다. 
일반적인 객체와는 달리 Map은 키로서 객체를 포함하여 
다양한 데이터 타입을 사용할 수 있으며 삽입 순서를 유지합니다.

 

 

 

 

Map의 특징

키의 타입: Map의 키는 원시값(문자열, 숫자 등)뿐만 아니라 객체, 함수 등 모든 데이터 타입을 사용할 수 있습니다.
순서 유지: Map은 요소가 삽입된 순서를 유지합니다. 따라서 반복할 때, 삽입한 순서대로 요소를 얻을 수 있습니다.
크기 확인: Map은 .size 속성을 통해 요소의 개수를 쉽게 확인할 수 있습니다.

 

 

Map 생성

const myMap = new Map();

 

Map에 요소 추가

set(key, value) 메서드를 사용하여 Map에 키-값 쌍을 추가할 수 있습니다.

myMap.set('이름', '홍길동');
myMap.set('나이', 30);
myMap.set('직업', '개발자');

 

Map에서 요소 접근

console.log(myMap.get('이름')); // "홍길동" 출력
console.log(myMap.get('나이'));  // 30 출력

get(key) 메서드를 사용하여 특정 키에 해당하는 값을 얻을 수 있습니다.

 

Map의 크기 확인

.size 속성을 사용하여 Map에 있는 요소의 개수를 확인할 수 있습니다.

 

Map에서 요소 삭제

delete(key) 메서드를 사용하여 특정 키에 해당하는 요소를 삭제할 수 있습니다.

myMap.delete('직업');
console.log(myMap.size); // 2 출력

 

Map의 모든 요소 삭제

clear() 메서드를 사용하여 Map의 모든 요소를 삭제할 수 있습니다.

myMap.clear();
console.log(myMap.size); // 0 출력

 

Map의 요소 반복

Map 객체는 forEach() 메서드를 사용하여 각 요소를 반복할 수 있습니다. 

또한 for...of 문을 사용하여도 반복할 수 있습니다.

 

myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// 또는 for...of 문
for (const [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}

 

Map의 키와 값 가져오기

 

키 배열: keys() 메서드를 사용하여 모든 키를 가져올 수 있습니다.
값 배열: values() 메서드를 사용하여 모든 값을 가져올 수 있습니다.

 

const keys = myMap.keys();   // Map의 모든 키
const values = myMap.values(); // Map의 모든 값

console.log([...keys]);   // ["이름", "나이"]
console.log([...values]); // ["홍길동", 30]

 

 

Map과 객체 비교

키의 타입: 객체는 문자열과 심볼만 키로 사용할 수 있지만, Map은 모든 데이터 타입을 키로 사용할 수 있습니다.
순서 유지: Map은 요소가 삽입된 순서를 유지하지만, 객체는 순서를 보장하지 않습니다.
성능: Map은 요소의 삽입, 삭제, 조회 성능이 우수합니다.

 

 

'개발' 카테고리의 다른 글

js 데이터 타입 과 메모리 관리  (4) 2024.11.05
js Set  (0) 2024.11.05
js 일급 객체로서의 함수  (0) 2024.11.05
js ES6  (0) 2024.11.05
js break와 continue  (0) 2024.11.05

댓글

💲 추천 글