[모딥다] 37장 Set과 Map

 

🍧 37.1 Set

 

Set 객체는 중복되지 않는 유일한 값들의 집합. 

Set 객체는 배열과 유사하지만 차이가 있다. 

 

<배열은 되지만 Set은 안되는 특징>

- 동일한 값을 중복하여 포함할 수 있다.

- 요소 순서에 의미가 있다.

- 인덱스로 요소에 접근할 수 있다.

 

set 은 수학적 집합을 구현하기 위한 자료구조다. 

set 을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

 

 

37.1.1 Set 객체의 생성

 

const set = new Set();

Set 생성자 함수로 생성. 

인수를 전달하지 않으면 빈 Set 객체가 생성됨.

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다.

이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않음.

const set1 = new Set([1, 2, 3, 4, 5, 5, 5, 6]);
console.log(set1) //Set(6) { 1, 2, 3, 4, 5, 6 }

 

배열의 중복 요소 제거 할 때 활용할 수 있다.

const uniq = [...new Set([1, 2, 3, 4, 5, 5, 5, 6])];
console.log(uniq);
//[ 1, 2, 3, 4, 5, 6 ]

 

 

37.1.2 요소 개수 확인 - Set.prototype.size()

 

const uniq = new Set([1, 2, 3, 4, 5, 5, 5, 6]);
console.log(uniq.size); //6

 

사이즈를 임의로 변경할 수 없다.

 

 

37.1.3 요소 추가 - Set.prototype.add()

 

const uniq = new Set([1, 2, 3, 3, 3]);
console.log(uniq.add(5));

set.add 를 사용함.

중복된 값은 무시하고 추가된다. (따로 에러가 나진 않음)

 

NaN 과 NaN 은 다르다고 평가하지만 Set 에서는 중복 추가가 되지 않는다. 

0과 -0은 같다고 평가해서 중복 추가 허용 안됨.

console.log(NaN === NaN); //false
console.log(0 === -0); //true

const set = new Set();
set.add(NaN).add(NaN);
set.add(0).add(-0);
console.log(set); //Set(2) { NaN, 0 }

 

 

Set 객체는 객체나 배열과 같이 JS 의 모든 값을 요소로 저장할 수 있다.

 

 

37.1.4 요소 존재 여부 확인 - Set.prototype.has()

 

const set = new Set([1, 2, 3]);

console.log(set.has(2)) //true
console.log(set.has(4)) //false

 

 

37.1.5 요소 삭제 - Set.prototype.delete()

 

const set = new Set([1, 2, 3]);

set.delete(2);
console.log(set); // Set(2) { 1, 3 }

존재하지 않는 요소를 삭제하려 하면 에러 없이 무시됨.

 

delete 메서드는 삭제 성공 여부를 boolean 으로 반환한다.

=> add().add() 이렇게 연속적으로 사용한 것처럼 delete().delete() 이렇게 사용할 수 ❌

 

 

37.1.6 요소 일괄 삭제 - Set.prototype.clear()

 

const set = new Set([1, 2, 3]);

set.clear();
console.log(set); //Set(0) {}

 

 

37.1.7 요소 순회

 

const set = new Set([1, 2, 3]);

set.forEach((v, v2, set) => console.log(v, v2, set))
//1 1 Set(3) { 1, 2, 3 }
//2 2 Set(3) { 1, 2, 3 }
//3 3 Set(3) { 1, 2, 3 }

 1, 2번 째 요소는 같은 값인데, forEach 메서드와 인터페이스를 통일하기 위함이며 다른 의미는 없다.

 

Set 객체는 이터러블 => for...of 문으로 순회 가능 & 스프레드 문법과 배열 디스트럭처링의 대상이 될 수도 있다.

 

 

37.1.8 집합 연산

교집합, 합집합 등 => array 로 바꿔서 원하는 값으로 걸러냄

 

 

 

 

 

🍧 37.2 Map

 

Map 은 객체의 키워 쌍으로 이루어진 컬렉션. 

객체와 유사하지만 차이점이 있다. 

 

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

 

 

 

37.2.1 Map 객체의 생성

 

Map 생성자 함수로 생성함.

인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야함.

 

const map = new Map();
console.log(map); //Map(0) {}

const map1 = new Map([['a', 'hello'], ['b', 'hi']])
console.log(map1); //Map(2) { 'a' => 'hello', 'b' => 'hi' }

 

중복된 키를 갖는 요소가 존재하면 값이 덮어써진다. 

 

 

37.2.2 요소 개수 확인 - Map.prototype.size()

 

const map = new Map([['a', 'hello'], ['b', 'hi']])
console.log(map.size); //2

size 로 Map 객체 요소의 개수를 변경할 수 없다.

 

 

37.2.3 요소 추가 - Map.prototype.set()

 

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye')
console.log(map); //Map(3) { 'a' => 'hello', 'b' => 'hi', 'c' => 'bye' }

 

새로 추가된 Map 객체를 반환하기 때문에 set 메서드를 연속적으로 호출할 수 있다.

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye')
console.log(map.set("d", "lalalal")); 
//Map(4) { 'a' => 'hello', 'b' => 'hi', 'c' => 'bye', 'd' => 'lalalal' }

 

 

Set과 마찬가지로 NaN과 NaN, 0과 -0 은 중복 추가를 허용하지 않는다.

 

Map 객체는 키 타입에 제한이 없다. 

따라서 객체를 포함한 모든 값을 키로 사용할 수 있다.

(일반 객체와 가장 두드러지는 차이점이다) 

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye')
console.log(map.set({ A: "A!!" }, "lalalal"));
/**Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
} */

 

 

37.2.4 요소 취득 - Map.prototype.get()

인수로 키를 전달 -> 값을 반환

 

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye').set({ A: "A!!" }, "lalalal");
console.log(map.get("c")) //bye

 

 

37.2.5 요소 존재 여부 확인 - Map.prototype.has()

 

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye').set({ A: "A!!" }, "lalalal");
console.log(map.has("a")) //true

 

 

37.2.6 요소 삭제 - Map.prototype.delete()

키 값을 인수로 전달한다. 

const map = new Map([['a', 'hello'], ['b', 'hi']])
map.set("c", 'bye').set({ A: "A!!" }, "lalalal");
map.delete({ A: "A!!" });
console.log(map)

//
Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
}

 

객체가 key 인 경우, 객체 자체를 넣으면 전혀 삭제가 되지 않는다.

const map = new Map([['a', 'hello'], ['b', 'hi']])
const key1 = { A: "A!!" };
map.set("c", 'bye').set(key1, "lalalal");
map.delete(key1);
console.log(map);
//Map(3) { 'a' => 'hello', 'b' => 'hi', 'c' => 'bye' }

객체인 key 를 따로 변수로 할당해준 뒤, 

삭제 시 변수를 적어주면 삭제가 된다.

 

 

37.2.7 요소 일괄 삭제 - Map.prototype.clear()

 

언제나 undefined 를 반환한다.

const map = new Map([['a', 'hello'], ['b', 'hi']])
const key1 = { A: "A!!" };
map.set("c", 'bye').set(key1, "lalalal");
console.log(map.clear()); //undefined

 

 

37.2.7 요소 순회 

 

forEach 사용 가능. 

인자는 값, 키, Map 객체 순이다.

const map = new Map([['a', 'hello'], ['b', 'hi']])
const key1 = { A: "A!!" };
map.set("c", 'bye').set(key1, "lalalal");

map.forEach((value, key, map) => console.log(value, key, map));

//
hello a Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
}
hi b Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
}
bye c Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
}
lalalal { A: 'A!!' } Map(4) {
  'a' => 'hello',
  'b' => 'hi',
  'c' => 'bye',
  { A: 'A!!' } => 'lalalal'
}

 

이터러블이라 for... of 문으로도 순회할 수 있다.

 

const map = new Map([['a', 'hello'], ['b', 'hi']])
const key1 = { A: "A!!" };
map.set("c", 'bye').set(key1, "lalalal");

for (const item of map) {
    console.log(item)
}

//
[ 'a', 'hello' ]
[ 'b', 'hi' ]
[ 'c', 'bye' ]
[ { A: 'A!!' }, 'lalalal' ]

 

Map 객체는 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드를 제공함.

() 를 붙여줘야 정상 작동한다.

const map = new Map([['a', 'hello'], ['b', 'hi']])
const key1 = { A: "A!!" };
map.set("c", 'bye').set(key1, "lalalal");

console.log(map.keys());
console.log(map.values());
console.log(map.entries());

//
[Map Iterator] { 'a', 'b', 'c', { A: 'A!!' } }
[Map Iterator] { 'hello', 'hi', 'bye', 'lalalal' }
[Map Entries] {
  [ 'a', 'hello' ],
  [ 'b', 'hi' ],
  [ 'c', 'bye' ],
  [ { A: 'A!!' }, 'lalalal' ]
}