Set
- 중복되지 않은 유일한 값들의 집합
- 배열과 유사함
- 요소의 순서에 의미 X
- 인덱스로 요소 접근 X
Set 객체 생성
- Set 생성자 함수 이용
- 이터러블을 인수로 전달 받음
const set = new Set();
console.log(set); // Set(0) {}
const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}- 배열에서 중복된 요소 쉽게 제거 가능
1. filter 함수 활용
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);
console.log(uniq([2, 1, 2, 3, 4, 3, 4]); // [2, 1, 3, 4]
2. Set 객체 활용
const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4]); // [2, 1, 3, 4]요소 추가
Set.prototype.add메서드 사용add메서드는 새로운 요소가 추가된 Set 객체 반환 -> 메서드 체이닝 가능- 중복된 요소의 추가는 무시됨
const set = new Set();
set.add(1).add(2);
console.log(set); // Set(2) {1, 2}- (NaN, NaN), (0, -0)을 같다고 평가
console.log(NaN === NaN); // false
console.log(0 === -0); // true
const set = new Set();
set.add(NaN).add(NaN).add(0).add(-0);
console.log(set); // Set(2) {NaN, 0}요소 존재 여부 확인
Set.prototype.has메서드 사용- 요소의 존재 여부를 나타내는 불리언 값 반환
요소 삭제
- 특정 요소 삭제:
Set.prototype.delete메서드 사용
- 삭제 성공 여부를 나타내는 불리언 값 반환 - 모든 요소 삭제:
Set.prototype.clear메서드 사용
- 언제나 undefined 반환
요소 순회
Set.prototype.forEach메서드 사용
-Array.prototype.forEach와 유사
- 첫 번째 인수/두 번째 인수: 현재 순회 중인 요소 값
->Array.prototype.forEach와 인터페이스 통일의 목적
- 세 번째 인수: 현재 순회 중인 Set 객체 자체for ... of문 사용 가능, 스프레드 문법, 배열 디스트럭처링 할당 가능
-> Set 객체가 이터러블이기에 가능- 원래 Set 객체는 요소의 순서에 의미가 없으나, 순회하는 순서는 요소가 추가된 순서
-> 다른 이터러블의 순회와 호환성을 유지하기 위해
Map
- 키와 값의 쌍으로 이루어진 컬렉션
- 객체와 유사함
- 객체를 포함한 모든 값을 키로 사용 가능(객체는 문자열 or 심벌 값만 가능)
Map 객체 생성
- Map 생성자 함수로 생성
- 이터러블을 인수로 전달 받음, 키와 값의 쌍으로 이루어진 요소여야 함
- 중복된 키를 갖는 요소가 존재하면, 마지막 값으로 덮어써진다.
const map = new Map();
console.log(map); // Map(0) {}
const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}요소 개수 확인
Map.prototype.size프로퍼티 사용- getter 함수만 존재하는 접근자 프로퍼티 -> 임의의 요소 개수 할당 X
요소 추가
Map.prototype.set메서드 사용- 새로운 요소가 추가된 Map 객체 반환 -> 메서드 체이닝 가능
const map = new Map();
map.set('key1', 'value1').set('key2', 'value2');
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}- (NaN, NaN), (0, -0)을 같다고 평가
- 객체를 포함한 모든 값을 키로 사용할 수 있다.
const map = new Map();
const lee = {name: 'Lee'};
map.set(lee, 'developer');
console.log(map); // Map(1) {name: "Lee"} => "developer" }요소 취득
Map.prototype.get메서드 사용- 인수로 키를 전달 -> 전달한 키를 갖는 값을 반환
const map = new Map();
const lee = {name: 'Lee'};
map.set(lee, 'developer');
console.log(map.get(lee)); // developer요소 존재 여부 확인
Map.prototype.has메서드 사용- 특정 요소의 존재 여부를 나타내는 불리언 값 반환
요소 삭제
- 특정 요소 삭제:
Map.prototype.delete메서드 사용
- 삭제 성공 여부를 나타내는 불리언 값 반환 - 모든 요소 삭제:
Map.prototype.clear메서드 사용
- 언제나 undefined 반환
요소 순회
-
Map.prototype.forEach메서드 사용
-Array.prototype.forEach와 유사
- 첫 번째 인수: 현재 순회 중인 요소 키
- 두 번째 인수: 현재 순회 중인 요소 값
- 세 번째 인수: 현재 순회 중인 Map 객체 자체 -
for ... of문 사용 가능, 스프레드 문법, 배열 디스트럭처링 할당 가능
-> Map 객체가 이터러블이기에 가능 -
원래 Map 객체는 요소의 순서에 의미가 없으나, 순회하는 순서는 요소가 추가된 순서
-> 다른 이터러블의 순회와 호환성을 유지하기 위해 -
이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드 제공
-Map.prototype.keys
-Map.prototype.values
-Map.prototype.entries
const lee = {name: 'Lee'};
const kim = {name: 'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
for(const key of map.keys()) {
console.log(key); // {name: "Lee"} {name: "Kim"}
}
for(const value of map.values()) {
console.log(value); // developer designer
}
for(const entry of map.entries()) {
console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}
junior backend-developer 👶💻