* 맵 (Map)
- [키, 값] 으로 이루어진 자료구조
- 순서가 없다.
- key는 유일한 키를 가지고 있어야 한다.
- key값만 다르다면 values는 중복가능
* 맵(Map)과 오브젝트(Object)와의 큰 차이점은??
- map에서는 다양한 함수를 사용 가능하다.
- object에서는 사용할 수 있는 함수가 적다.
- map은 key[value] 동적으로 접근이 불가능하며 map.get(key)이라는 함수를 사용해야 한다.
- object는 key[value] 동적으로 접근이 가능하다.
- 결론 : 사용할 수 있는 인터페이스가 살짝 다르다.
* 맵 (Map)예시코드
const map = new Map([
['key1', '사과'],
['key2', '바나나'],
]);
console.log(map);
// 사이즈 확인
console.log(map.size);
// 존재하는지 확인
console.log(map.has('key1'));
console.log(map.has('key6'));
// 순회
// value뿐만 아니라 key도 받아올 수 있다.
map.forEach((value, key) => console.log(key, value));
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
// 찾기
// 존재하지않는 값은 undefined
console.log(map.get('key1'));
console.log(map.get('key2'));
console.log(map.get('key4'));
// 추가
map.set('key3', '키위');
console.log(map);
// 삭제
map.delete('key3');
console.log(map);
// 전부삭제
map.clear();
console.log(map);
// 오브젝트와의 큰 차이점??
// map에서는 다양한 함수를 사용 가능하다.
// object에서는 사용할 수 있는 함수가 적다.
// map은 key[value] 동적으로 접근이 불가능한다. // get이라는 함수를 사용해야한다. get(key)
// object는 key[value] 동적으로 접근이 가능하다.
// 사용할 수 있는 인터페이스가 살짝 다르다.
const key = { name: 'milk', price: 10 };
const milk = { name: 'milk', price: 10, description: '맛있는우유' };
const obj = {
[key]: milk,
};
console.log(obj);
const map2 = new Map([[key, milk]]);
console.log(map2);
console.log(obj[key]);
console.log(map2[key]);
console.log(map2.get(key));
* Set
- 데이터의 집합체
- 인덱스 없음, 순서 없음, 중복불가
- 이미 있는 요소를 추가하면 해당 추가가 무시가 된다.
// Set
const set = new Set([1, 2, 3]);
console.log(set);
// 사이즈 확인
console.log(set.size);
// 존재하는지 확인
// true or false값을 return한다.
console.log(set.has(2));
console.log(set.has(6));
// 순회 (forEach)
set.forEach((item) => console.log(item));
// 순회 (for of)
for (const value of set.values()) {
console.log(value);
}
// 추가
set.add(6);
console.log(set);
// set은 중복이 안되는 성질을 가지고 있다.
// 이미 있는 요소를 추가하면 해당 추가가 무시가 된다.
set.add(6);
console.log(set);
// 삭제
set.delete(6);
console.log(set);
// 전부 삭제
set.clear();
console.log(set);
// 오브젝트 세트
const obj1 = { name: '사과', price: 8 };
const obj2 = { name: '바나나', price: 5 };
const objs = new Set([obj1, obj2]);
console.log(objs);
// 퀴즈
// price를 10으로 변경한뒤에 add를 하면 price는 10이라는 값으로 지정되어 있으므로
// add를 하면 add를 하는 price의 값이 무시가 된다. 따라서 price : 10으로 출력이 된다.
// 또한 shallow copy가 이루어져 있어서 objs안의 요소들도 값의 변경에 영향을 받는다.
obj1.price = 10;
objs.add(obj1);
console.log(obj1);
console.log(objs);
// 퀴즈
// obj2와 동일한 내용이여도 객체는 메모리주소를 참조 및 가르키고 있으므로
// 같은 요소의 값을 가지고 있어도 다른 주소를 가르키고 있어서 서로 다른값으로 인식된다.
// 따라서 obj3객체가 추가된다. obj2와 obj3는 객체의 요소는 동일하나 서로 다른 메모리 주소를 참조하고 있으므로
// 서로 다른 객체이다.
const obj3 = { name: '바나나', price: 5 };
objs.add(obj3);
console.log(objs);
obj3.price = 8;
console.log(objs);
* Set 활용 예시
// 주어진 배열에서 중복을 제거 하라
const fruits = ['바나나', '사과', '포도', '바나나', '사과', '복숭아'];
// output : ['바나나', '사과', '포도', '복숭아']
function removeDuplication(array) {
return [...new Set(array)];
}
console.log(removeDuplication(fruits));
// 주어진 두 세트의 공통된 아이템만 담고 있는 세트 만들어라
const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([1, 2, 3]);
function findIntersection(set1, set2) {
return new Set([...set1].filter((item) => set2.has(item)));
}
console.log(findIntersection(set1, set2));
'Study > JavaScript' 카테고리의 다른 글
[JavaScript_study] 논리연산자, 단축평가(short-circuit evaluation) (0) | 2022.04.12 |
---|---|
[JavaScript_study] 심볼(Symbol) (0) | 2022.04.12 |
[JavaScript_study] 구조 분해 할당(Destructuring assignment) (0) | 2022.04.12 |
[JavaScript_study] Spread operator (0) | 2022.04.12 |
[JavaScript_study] 제너레이터(generator) (0) | 2022.04.12 |