| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- windowwidth
- 안짤렸다
- react-router
- 내배위의고양이
- 대표님물리기없기
- react
- 클래스 토글
- 퍼블리싱
- new set()
- classList add
- 냥빨이다가온다
- chart responsive
- 커스텀훅
- vue3 setup
- react-router-dom
- 포트폴리오
- chart.js
- 2020
- classList remove
- 방심은금물
- ROUTER 버전6
- classList
- nuxt.js
- 배열중복제거
- 간식금지다!
- 리엑트할수있는퍼블리셔라규
- nuxt layout
- classList toggle
- 언젠간가겠지
- 접근성
Archives
- Today
- Total
틈
new Map() 본문
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