알고리즘 문제가 뒤로 갈수록 단순 배열, 객체로는 풀리지 않는다
객체와 유사하게 생긴 Map과 Set에 대해 알아보자!
📌 기존 활용 자료구조
- 객체 : 키가 있는 컬렉션 저장
- 배열 : 순서가 있는 컬렉션 저장
📌 Map
📝 Map이란?
Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다.
다만, Map은 키에 다양한 자료형을 허용한다.
📝 주요 method, property
✏️ new Map()
맵을 만든다
✏️ map.set(key, value)
key를 이용해 value를 저장한다.
기존에 저장한 key에 set을 하여 새로운 value를 저장할 경우, 기존 key의 value를 덮어씌운다.
map.set을 호출할 때마다 맵 자신이 반환되므로, map.set을 체이닝할 수 있다.
map.set("1", "str1")
.set(1, "num1")
.set(true, "bool1")✏️ map.get(key)
key에 해당하는 값을 반환한다.
key가 존재하지 않을 경우 undefined를 반환한다.
map[key]는 Map을 쓰는 바른 방법이 아니다.
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 하지만, 이 방법은 Map을 일반 객체처럼 취급하게 된다.
Map을 사용할 땐 <ap전용 메서드 set, get 등을 사용해야만 한다.
✏️ map.has(key)
key가 존재하면 true, key가 존재하지 않으면 false를 반환한다.
✏️ map.delete(key)
key에 해당하는 값을 삭제한다.
✏️ map.clear()
맵 안의 모든 요소를 제거한다.
✏️ map.size
요소의 개수를 반환한다.
📝 예시
let map = new Map();
map.set('1', 'str1'); // 문자형 키
map.set(1, 'num1'); // 숫자형 키
map.set(true, 'bool1'); // 불린형 키
console.log(map.get(1)); // 'num1'
console.log(map.get('1')); // 'str1'
console.log(map.size); // 3📝 Map 반복문
✏️ map.keys()
각 요소의 키를 모은 반복 가능한 객체를 반환한다.
✏️ map.values()
각 요소의 값을 모은 반복 가능한 객체를 반환한다.
✏️ map.entries()
요소의 [키, 값]을 한 쌍으로 하는 반복 가능한 객체를 반환한다.
✏️ map.forEach()
Map은 배열과 유사하게 forEach도 지원한다.
let recipeMap = new Map([
["cucumber", 500],
["tomatoes", 350],
["onion", 50]
]);
for (let vegetable of recipeMap.keys()) {
console.log(vegetable); // cucumber, tomatoes, onion
}
for (let amount of recipeMap.values()) {
console.log(amount); // 500, 350, 50
}
for (let entry of recipeMap) { // recipeMap.entries()와 동일하다.
console.log(entry); // cucumber,500 ...
}
recipeMap.forEach( (value, key, map) => {
console.log(`${key}: ${value}`); // cucumber: 500 ...
});Map은 값이 삽입된 순서대로 순회를 실시한다.
단순 객체가 property 순서를 기억하지 못하는 것과 비교된다.
📝 객체를 Map으로 바꾸기 (Object.entries(obj))
let obj = {
name: "John",
age: 30
};
let map = new Map(Object.entries(obj));
console.log( map.get('name') ); // John📝 Map을 객체로 바꾸기 (Object.fromEntries)
let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);
let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)
// 맵이 객체가 되었다!
// obj = { banana: 1, orange: 2, meat: 4 }
console.log(obj.orange); // 2📌 Set
📝 Set이란?
Set은 중복을 허용하지 않는 값을 모아놓은 컬렉션이다.
Set에는 키가 없는 값이 저장된다.
📝 주요 method
✏️ new Set(iterable)
셋을 만든다.
iterable 객체 (주로 배열)를 전달받으면 그 안의 값을 복사해 셋에 넣어준다.
✏️ set.add(value)
값을 추가하고 셋 자신을 반환한다.
✏️ set.delete(value)
값을 제거한다.
호출 시점에 Set 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환한다.
✏️ set.has(value)
Set 내에 값이 존재하면 true, 아니면 false를 반환한다.
✏️ set.clear()
Set을 비운다.
✏️ set.size
Set에 몇 개의 값이 있는지 세준다.
let set = new Set();
let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);
// 셋에는 유일무이한 값만 저장된다.
console.log( set.size ); // 3
for (let user of set) {
alert(user.name); // // John, Pete, Mary 순으로 출력된다.
}📝 Set 반복문
for...of 나 forEach를 사용하여 반복문을 수행할 수 있다.
let set = new Set(["oranges", "apples", "bananas"]);
for (let value of set) console.log(value);
// forEach를 사용해도 동일하게 동작한다.
set.forEach((value, valueAgain, set) => {
console.log(value);
});단, Set에서 forEach에 쓰이는 콜백 함수의 인수는 첫 번째는 값, 두 번째도 같은 값인 valueAgain을 받으며, 세 번째는 목표하는 Set을 받는다.
동일한 값이 인수에 두 번 등장하는 이유는 Map과의 호환성 때문이다.
< 참조 :
https://ko.javascript.info/map-set >
