중복되지 않는 값들의 집합
💡 배열과의 차이:
- 동일한 값을 여러 번 포함할 수 없음
- 값들의 순서가 무의미함
I. 기본 사용법
// Set 생성
const set1 = new Set();
// add 메서드 - 요소 추가
set1.add(1);
set1.add('A');
set1.add(true);
console.log(set1);
// 이미 포함된 요소는 추가하지 않음
set1.add(1);
set1.add(true);
console.log(set1);
// 배열을 인자 넣으면 생성 + 초기화
// 중복된 요소 제거
const set2 = new Set([1, 1, 1, 'A', true]);
console.log(set2);
// has 메서드 - 요소 포함여부 확인
console.log(
set2.has(1),
set2.has('A'),
set2.has(4)
);
// delete 메서드 - 요소 제거 & 성공 여부 반환
console.log(
set2.delete('A'),
set2.delete(true),
set2.delete(100)
);
console.log(set2);
// add 메서드는 결과 셋을 반환
const set3 = set2.add(2);
console.log(set3);
// 💡 메서드 체이닝을 할 수 있다는 의미
set2
.add(3)
.add(4)
.add(5)
// 참조형이므로 둘이 같은 Set을 가리킴
console.log(set2, set3);
// size 프로퍼티 - 요소의 개수
console.log(
set2.size
);
// keys, values, entries 메서드 - 값 / 값 / [값, 값] 반환
// key를 value와 같이 취급
console.log(
set2.keys(),
set2.values(),
set2.entries()
);
// clear 메서드 - 모든 요소들을 삭제
set2.clear();
console.log(set2, set3);
💡 참조형 데이터의 경우
const objSet1 = new Set()
.add({ x: 1, y: 2 })
.add({ x: 1, y: 2 })
.add([1, 2, 3])
.add([1, 2, 3]);
// 각기 다른 것으로 인식 (참조하는 주소가 다르므로)
console.log(objSet1);
const obj = { x: 1, y: 2 };
const arr = [1, 2, 3];
const objSet2 = new Set()
.add(obj)
.add(obj)
.add(arr)
.add(arr);
// 같은 것들로 인식
console.log(objSet2)
console.log(
objSet2
.add({ x: 1, y: 2 })
.add({ x: 1, y: 2 })
.add([1, 2, 3])
.add([1, 2, 3])
);
II. 이터러블로서의 Set
const arr = ['A', 'B', 'C', 'D', 'E'];
const set = new Set(arr);
1. for ... of 문
for (item of set) {
console.log(item);
}
2. 스프레드 문법
const newArr = [...set];
console.log(newArr);
// 활용 - 중복을 제거한 배열 반환
const arr1 = [1, 1, 1, 2, 2, 3, 4, 5];
const arr2 = [...new Set(arr1)];
console.log(arr2);
3. 디스트럭쳐링
const [x, y] = set;
console.log(x);
console.log(y);
const [a, b, ...rest] = set;
console.log(a);
console.log(b);
console.log(rest);
💡 이터러블과 별개 - forEach 메서드도 사용 가능
// ⚠️ 두 번째 인자가 인덱스가 아님!
// 배열과 달리 순서 개념이 없으므로...
// 형식을 맞추기 위한 인자일 뿐
set.forEach(console.log);
// 아래의 결과와 같음
// set.forEach((item, idx, set) => {
// console.log(item, idx, set)
// });
키와 값의 쌍으로 이루어진 컬렉션
💡 객체와의 차이:
- 이터러블의 일종 (이터러블의 기능 사용 가능)
- 메서드와 프로퍼티 등의 기능 차이
- 객체나 배열 등의 참조값을 키로 사용 가능
- ⭐️ 키와 값을 보다 자주 변경하는 경우 적합하도록 설계됨
I. 기본 사용법
// Map 생성
const map1 = new Map();
// set 메서드 - 키와 값의 쌍 추가
map1.set('x', 1);
map1.set(123, 'ABC');
map1.set(true, { a: 1, b: 2 });
console.log(map1);
// [[키 쌍]...] 배열로 생성 + 초기화
const map2 = new Map([
['x', 1],
[123, 'ABC'],
[true, { a: 1, b: 2 }],
]);
console.log(map2);
// 키의 중복 불허 - 해당 키 있을 시 덮어씀
map2.set('x', 2);
console.log(map2);
// has 메서드 - 요소 포함여부 확인
console.log (
map2.has('x'),
map2.has('y')
);
// get 메서드 - 값에 접근
console.log(
map2.get('x'),
map2.get(123),
map2.get(true),
// 없는 키로 접근시
map2.get('y')
);
// 💡 참조값도 키로 사용 가능
const objKey = { x: 1, y: 2 };
const arrKey = [1, 2, 3];
map2.set(objKey, 'OBJ_KEY');
map2.set(arrKey, 'ARR_KEY');
console.log(map2);
console.log (
map2.get(objKey),
map2.get(arrKey),
);
// ⚠️ [참조값]이 키임에 유의
// 💡 5-1강의 객체와 비교해 볼 것
console.log(
map2.get({ x: 1, y: 2 }),
map2.get([1, 2, 3])
);
// 때문에 이렇게 사용하면 안 됨
map2.set({x: 3, y: 4}, '못꺼냄');
console.log(map2);
console.log(
map2.get({x: 3, y: 4})
);
// delete 메서드 - 요소 제거 & 성공 여부 반환
console.log(
map2.delete('x'),
map2.delete(objKey),
map2.delete({x: 3, y: 4})
);
console.log(map2);
// add 메서드는 결과 맵을 반환
// 💡 메서드 체이닝을 할 수 있다는 의미
const map3 = map2
.set(1, 'X')
.set(2, 'Y')
.set(3, 'Z');
console.log(map2, map3);
// size 프로퍼티 - 요소의 개수
console.log(
map2.size
);
// keys, values, entries 메서드 - 키 / 값 / [키, 값] 반환
console.log(
map2.keys(),
map2.values(),
map2.entries()
);
// clear 메서드 - 모든 요소들을 삭제
map2.clear();
console.log(map2, map3);
II. 이터러블로서의 Map
const arr = [
['🐶', '강아지'],
['🐱', '고양이'],
['🐯', '호랑이'],
['🐵', '원숭이'],
['🐨', '코알라']
];
const map = new Map(arr);
1. for ... of 문
for ([key, value] of map) {
console.log(key, value);
}
2. 스프레드 문법
const newArr = [...map];
console.log(newArr);
3. 디스트럭쳐링
const [x, y] = map;
console.log(x);
console.log(y);
const [a, b, ...rest] = map;
console.log(a);
console.log(b);
console.log(rest);
💡 이터러블과 별개 - forEach 메서드도 사용 가능
map.forEach(console.log);
// 아래의 결과와 같음
// map.forEach((item, idx, set) => {
// console.log(item, idx, set)
// });