헷갈리는 것들만 따로 정리할 예정.
deep dive 책을 함께 공부함.
13. Set과 Map
지금까지는 객체와 배열 같은 복잡한 자료구조를 배워보았음.
- 객체 : 키가 있는 컬렉션을 저장함.
- 배열 : 순서가 있는 컬렉션을 저장함.
하지만 모든 걸 반영하기엔 이 두 자료구조 만으론 부족해서 Map과 Set이 등장하게 됨.
13-1. Set과 함수들
배열 - 인덱스(index)가 있고, 순서가 중요하고 중복이 가능함.
세트(Set) - 데이터의 집합체. 인덱스(index)가 없고, 순서도 없음. 그대신 중복이 불가능함.
set을 사용하는 것은 비교적 간단함. set을 사용할 수 있는 함수가 많지 않기 때문.
안에 이미 같은 값이 존재한다면 추가되지 않음.
[ ] 안에 값을 넣어주면 됨.
빈 set을 만들어도 되고
배열을 전달해서 기존의 배열의 아이템을 기존으로 해서 set을 만들어볼 수도 있음.
const set = new Set([1,2,3]);
console.log(set);
// Set(3) { 1, 2, 3 }
1) 사이즈 확인
console.log(set.size);
// 3
2) 아이템이 존재하는지 확인
console.log(set.has(2)); // true
console.log(set.has(6)); // false
3) 순회
set.forEach((item) => console.log(item));
// 1
// 2
// 3
for (const value of set.values()) {
console.log(value);
// 1
// 2
// 3
}
4) 추가
set.add(6);
console.log(set);
// Set(4) { 1, 2, 3, 6 }
set.add(6)
console.log(set);
// 있는 걸 추가하려고 하면 무시됨
5) 삭제
set.delete(6);
console.log(set);
// Set(3) { 1, 2, 3 }
6) 전부 삭제
set.clear();
console.log(set);
// Set(0) {}
Object Set(오브젝트 세트) -
const obj1 = { name: "🍓", price: 8 };
const obj2 = { name: "🥝", price: 5 };
const objs = new Set([obj1, obj2]);
console.log(objs);
// Set(2) { { name: "🍓", price: 8 }, { name: "🥝", price: 5 } };
오브젝트 세트를 이용한 Set Quiz 1 -
obj1.price = 10;
console.log(objs);
// Set(2) { { name: "🍓", price: 10 }, { name: "🥝", price: 5 } };
objs.add(obj1);
console.log(objs);
// 이미 objs에 obj1 참조값이 변경되어 들어가 있기 때문에 중복된 건 다시 들어가지 않음.
// Set(2) { { name: "🍓", price: 10 }, { name: "🥝", price: 5 } };
오브젝트 세트를 이용한 Set Quiz 2 -
const obj3 = { name: "🥝", price: 5 };
objs.add(obj3);
console.log(objs);
// 객체가 동일해 보이지만 세 개 다 다른 주소를 가지고 있음.
// 새롭게 object 리터럴을 이용해서 만들면 새로운 object임.
// Set(3) { { name: '🍓', price: 10 }, { name: '🥝', price: 5 }, { name: '🥝', price: 5 } };
obj3.price = 12;
console.log(objs);
// Set(3) { { name: '🍓', price: 10 }, { name: '🥝', price: 5 }, { name: '🥝', price: 12 } };
13-2. Map과 함수들
맵(Map) - 순서가 중요하지 않음.
key가 가리키고 있는 object를 대상으로 자료 구조를 찾고 가지고 오고 하기 때문에 순서가 거꾸로 들어 있어도 중요하지 않음.
map에서 key는 유일한 key를 가지고 있어야 함. values는 중복되어도 됨.
javascript에서는 map이 키가 있는 데이터를 저장한다는 점에서 object와 유사함.
하지만, map은 key에 다양한 자료형은 허용한다는 점에서 차이가 있음.
map을 object처럼 사용할 수 있음.
Map() => 새 Map 개체를 만듦.
const map = new Map([
["key1", "🍓"],
["key2", "🍉"],
]);
console.log(map);
// Map(2) { "key1" => "🍓", "key2" => "🍉" };
1) 사이즈 확인
console.log(map.size);
// 2
2) 아이템이 존재하는지 확인 => key로 확인해야 함
console.log(map.has("key1"));
// true
console.log(map.has("key6"));
// false
3) 순회
map.forEach((value, key) => {
return console.log(map.keys());
// [Map Iterator] { "key1", "key2" }
// console.log(value, key);
// 🍓 key1;
// 🍉 key2;
}
console.log(map.values());
// [Map Iterator] { "🍓", "🍉" }
console.log(map.entries());
// [Map Entries] { [ "key1", "🍓" ], [ "key2", "🍉" ] }
4) 찾기
console.log(map.get("key1")); // 🍓
console.log(map.get("key2")); // 🍉
console.log(map.get("key6")); // undefined
5) 추가
map.set("key3" , "🍔");
console.log(map);
// Map(3) { 'key1' => '🍓', 'key2' => '🍉', 'key3' => '🍔' }
6) 삭제
map.delete("key3");
console.log(map);
// Map(2) { 'key1' => '🍓', 'key2' => '🍉' }
7) 전부 삭제
map.clear();
console.log(map);
// Map(0) {}
Map은 무조건 key를 이용하여 추가하고 삭제하고, 찾고 할 수 있음.
=> key가 유일한 고유 아이디이기 때문.
- Map과 object의 큰 차이점? :
Map과 object는 상당히 유사함.
큰 차이점은 구조상으로는 찾아볼 수 없지만, 사용할 수 있는 함수애 대해서는 조금 다름.
object에서는 map에서 사용 가능한 함수들을 사용할 수 없음. => 사용할 수 있는 함수가 서로 다름.
const key = { name : "milk", price : 10 );
const milk = { name : "milk", price : 10, description : "맛있는 우유" };
const obj = {
[key] : milk,
}
console.log(obj);
// { '[object Object]': { name: 'milk', price: 10, description: '맛있는 우유' } }
// key는 object, 값은 milk가 됨
const map2 = new Map([[key, milk]]);
console.log(map2);
// Map(1) { { name: 'milk', price: 10 } => { name: 'milk', price: 10, description: '맛있는 우유' } }
console.log(obj[key]);
// object에서는 key에 바로 동적으로 접근할 수 있음.
// { name : "milk", price : 10, description : "맛있는 우유" }
console.log(map2[key]);
// Map에서는 key에 바로 동적으로 접근할 수 없음.
// undefined
console.log(map2.get(key));
// Map에서는 반드시 get이라는 함수를 이용하여 key를 전달해야만 함.
// { name : "milk", price : 10, description : "맛있는 우유" }
'(심층)자바스크립트' 카테고리의 다른 글
다시 시작하는 자바스크립트 - Symbol (0) | 2023.04.22 |
---|---|
다시 시작하는 자바스크립트 - Set를 이용한 Quiz (0) | 2023.04.22 |
다시 시작하는 자바스크립트 - 구조 분해 할당 (0) | 2023.04.21 |
다시 시작하는 자바스크립트 - spread 연산자 (0) | 2023.04.19 |
다시 시작하는 자바스크립트 - 이터러블, 제너레이터 (0) | 2023.04.19 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!