37.1 set
set 객체는 중복되지 않는 유일한 값들의 집합
| 구분 |
배열 |
set 객체 |
| 동일한 값을 중복하여 포함할수 있다 |
o |
x |
| 요소 순서에 의미가있다 |
o |
x |
| 인덱스로 요소에 접근할수 있다 |
o |
x |
### 37.1.1 set 객체의 생성
set 객체는 생성자 함수로 생성한다.
```javascript
const uniq = (array) => [...new Set(array)];
console.log(uniq([2, 1, 3, 4, 5, 6, 2, 3])); //[2,1,3,4,5,6]
```
### 37.1.2 요소 개수 확인
```javascript
const uniq = new Set([1, 2, 3]);
console.log(uniq.size); //3
```
### 37.1.3 요소 추가
add 로 추가 set 객체 반환
```javascript
const uniq = new Set([1, 2, 3]);
console.log(uniq.size); //3
uniq.add(4);
console.log(uniq); //{1,2,3,4}
```
Set 객체는 객체나 배열과 같이 js 모든 값을 요소로 저장할수 있다.
### 37.1.4 요소 존재 여부 확인
Set.prototype.has 메서드 사용 존재 여부를 불리언 값으로 반환
```javascript
const uniq = new Set([1, 2, 3]);
console.log(uniq.size); //3
uniq.add(4);
console.log(uniq); //{1,2,3,4}
console.log(uniq.has(1)); //true
```
### 37.1.5 요소 삭제
Set.protoype.delete 메서드 사용 삭제 성공 여부를 불리언 값으로 반환
```javascript
const uniq = new Set([1, 2, 3]);
console.log(uniq.size); //3
uniq.add(4);
console.log(uniq); //{1,2,3,4}
console.log(uniq.has(1)); //true
console.log(uniq.delete(1)); //true
```
boolean 값을 반환 하므로 add 와 같이 연속적으로 호출할수 없다.
### 37.1.6 요소 일괄 삭제
Set.prototype.clear 언제나 undefined를 반환
```javascript
const uniq = new Set([1, 2, 3]);
console.log(uniq.size); //3
uniq.add(4);
console.log(uniq); //{1,2,3,4}
console.log(uniq.has(1)); //true
console.log(uniq.delete(1)); //set(0)
```
### 37.1.7 요소 순회
Set.prototype.forEach 사용
```javascript
const set = new Set([1, 2, 3]);
set.forEach((v1, v2, set) => console.log(v1, v2, set));
/*
1 1 Set(3) { 1, 2, 3 }
2 2 Set(3) { 1, 2, 3 }
3 3 Set(3) { 1, 2, 3 }
*/
```
### 37.1.8 집합 연산
Set 객체를 통해 교집합 합집합 차집합 등을 구현할수 있다.
**교집합**
```javascript
Set.prototype.intersection = function (set) {
const result = new Set();
for (const value of set) {
if (this.has(value)) result.add(value);
}
return result;
};
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([2, 4]);
console.log(setA.intersection(setB));
console.log(setB.intersection(setA));
```
```javascript
Set.prototype.intersection = function (set) {
return new Set([...this].filter((v) => set.has(v)));
};
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([2, 4]);
console.log(setA.intersection(setB));
console.log(setB.intersection(setA));
```
합집합
```javascript
Set.prototype.union = function (set) {
const result = new Set(this);
for (const value of set) {
result.add(value);
}
return result;
};
//스프레트
Set.prototype.union = function (set) {
return new Set([...this, ...set]);
};
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([2, 4]);
console.log(setA.union(setB));
```
차집합
```javascript
Set.prototype.difference = function (set) {
const result = new Set(this);
for (const value of set) {
result.delete(value);
}
return result;
};
Set.prototype.difference = function (set) {
return new Set([...this].filter((v) => !set.has(v)));
};
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([1, 2, 3]);
console.log(setA.difference(setB)); //{4,5}
```
37.2 Map
map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 차이가 있다.
| 구분 |
객체 |
map객체 |
| 키로 사용할 수 있는값 |
문자열 또는 Symbol |
객체를 포함한 모든 값 |
| 이터러블 |
x |
o |
| 요소 개수확인 |
Object.keys.length |
map.size |
### 37.2.1 Map 객체의 생성
map생성자 함수로 생성
map 생성자 함수는 이터러블을 인수로 전달받아 map 객체를 생성한다.
인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야한다.
중복된 키를 갖는 요소가 존재할수 없다.
```javascript
const map1 = new Map([
["key1", "value1"],
["key2", "value2"],
]);
console.log(map1);
//Map(2) { 'key1' => 'value1', 'key2' => 'value2' }
```
### 37.2.2 요소 개수확인
Map.prototype.size
size 프로퍼티는 getter 함수만 존재하는 접근자 프로퍼티이기에 숫자를 할당하여 요소 개루를 변경할수 없다.
```javascript
const map1 = new Map([
["key1", "value1"],
["key2", "value2"],
]);
console.log(map1);
//Map(2) { 'key1' => 'value1', 'key2' => 'value2' }
console.log(map1.size); //2
```
### 37.2.3 요소 추가
Map.prototype.set
```javascript
const map = new Map();
console.log(map); //Map(0) {}
map.set("key1", "value1");
console.log(map); //Map(1) { 'key1' => 'value1' }
```
객체는 문자열 또는 심벌값만 키로 사용할수 있다.
Map객체는 키 타입에 제한이 없다.
객체를 포함한 모든 값을 키로 사용할수 있다.
### 37.2.4 요소 취득
Map.prototype.get
```javascript
const map = new Map();
console.log(map); //Map(0) {}
map.set("key1", "value1");
console.log(map); //Map(1) { 'key1' => 'value1' }
console.log(map.get("key1")); //value1
```
### 37.2.5 요소 존재 여부 확인
Map.prototype.has
```javascript
const lee = { name: "Lee" };
const suha = { name: "Suha" };
const map = new Map([
[lee, "developer"],
[suha, "designer"],
]);
console.log(map.has(lee)); //true
console.log(map.has("Suha")); //false
```
### 37.2.6 요소 삭제
Map.prototype.delete
```javascript
const lee = { name: "Lee" };
const suha = { name: "Suha" };
const map = new Map([
[lee, "developer"],
[suha, "designer"],
]);
console.log(map);
/*
Map(2) {
{ name: 'Lee' } => 'developer',
{ name: 'Suha' } => 'designer'
}
*/
map.delete(suha);
console.log(map); //Map(1) { { name: 'Lee' } => 'developer' }
```
### 37.2.7 요소 일괄 삭제
Map.prototype.clear
clear 메서드는 언제나 undefined 를 반환
```javascript
const lee = { name: "Lee" };
const suha = { name: "Suha" };
const map = new Map([
[lee, "developer"],
[suha, "designer"],
]);
console.log(map);
/*
Map(2) {
{ name: 'Lee' } => 'developer',
{ name: 'Suha' } => 'designer'
}
*/
map.clear();
console.log(map); //Map(0) {}
```
### 37.2.8 요소 순회
Map 객체는 이터러블이면서 동시에 이터레인션 객체를 반환하는 메서드를 제공한다.
| Map 메서드 | 설명 |
| --------------------- | ------------------------------------------------------- |
| Map.prototype.keys | Map 객체에서 요소키를 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다. |
| Map.prototype.values | Map 객체에서 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다 |
| Map.prototype.entries | Map 객체에서 요소키와 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다. |
```javascript
const su = { name: "su" };
const ha = { name: "ha" };
const map = new Map([
[su, "developer"],
[ha, "designer"],
]);
for (const key of map.keys()) {
console.log(key);
}
/*
{ name: 'su' }
{ name: 'ha' }
*/
for (const value of map.values()) {
console.log(value);
}
/*developer
designer
*/
for (const entry of map.entries()) {
console.log(entry);
}
/*[ { name: 'su' }, 'developer' ]
[ { name: 'ha' }, 'designer' ]
*/
```
