new Map() 본문

code/Javascript

new Map()

남우p 2025. 6. 16. 12:57
 es2015에서 추가된 생성자 입니다.

 

Map 개체는 키-값으로 순서를 기억합니다.

 

1. 생성방법(키-값 추가)

const map1 = new Map();

map1.set("a", 1);
map1.set("b", 2);
map1.set("c", 3);

 

2. 불러오는 방법

map1.set("a", 97);

console.log(map1.get("a"));
// Expected output: 97

console.log(map1.size);
// Expected output: 3

map1.delete("b");

console.log(map1.size);
// Expected output: 2


console.log(map1.has("a"));
// Expected output: true

m.clear();
console.log(m.size);
// Expected output: 0

 

- map 객체는 .size로 length를 가져올 수 있다.

 

 

3. 키 값을 객체로 지정하는 방법

const obj = { a: "b" };
const map = new Map();
map.set(obj, 123);

console.log(map.get(obj));
// 123;

 

- 키 값을 객체로 지정할 경우, 변수가 아닌 객체일 때에는 .get()으로 불러올 수 없다.

   (같은 모양의 객체도 다른 객체로 인식되기 때문.)

- get()을 사용할 경우, 꼭 변수로 지정해서 불러야 한다.

 

4. Map객체를 이용한 반복문

const m = new Map();

for (const [key,value] of m) {
	console.log(key,value) 
}

m.forEach((value, key) => {
	console.log(key,value);
}) 
// for문과 반대되는 인자 순서(value, key 순)를 갖는다.

 

 

최근에, vue나 react 프로젝트를 자주 하다보니, 배열-객체를 많이 쓰고 있고, 익숙해지려고 하고 있다.

아무래도 객체는 length를 구하기 어려워서, 배열 안에 넣고 작업을 많이 하는데, 

map 객체는 이미 배열을 기반으로 length도 쉽게 구할 수 있고,

반복문 사용도 쉬워서 실무에서 사용해보고 싶은 문법이다.

'code > Javascript' 카테고리의 다른 글

배열에서 중복을 제거하는 방법(w/Set())  (0) 2025.06.16
fragment(createDocumentFragment)  (0) 2023.05.26
classList  (0) 2023.05.22
[ES6] new Set()  (0) 2023.02.28
try catch 구문  (0) 2023.01.26
Comments