본문 바로가기
Front-End/JavaScript

37장 Set과 Map (모던 자바스크립트 Deep Dive)

by kk님 2023. 5. 15.

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780


Set: 중복 요소가 없음

Map: 중복 키를 갖는 요소가 없음

 

Set과 Map의 size는 접근자 프로퍼티. (그렇기에 숫자를 할당해서 값을 바꿀 수 없다)

set.size = 10 // 불가능. '접근자' 프로퍼티 

forEach 요소가 두개인 이유? Array의 forEach와 인터페이스를 맞췄는데, set은 인덱스가 없음

set 객체는 인덱스가 없지만, 순회하는 순서는 요소가 추가된 순서를 따름

 

Map과 객체의 결정적인 차이 ! 이터러블!

 

Map과 Set 모두 for ... of 로 순회가 가능

 

Map.prototype.keys

Map.prototype.values

Map.prototype.entries


 

37.1 Set

수학적 집합을 구현하기 위한 자료구조

교집합, 합집합, 차집합, 여집합

 

37.1.1 Set 객체의 생성

const set = new Set( 이터러블 );

이터러블= [1, 2, 3,] 혹은 'hello'

 

const uniq = array => [... new Set(array)];

37.1.2 요소 개수 확인

Set.prototype.size 접근자 프로퍼티 활용

 

37.1.3 요소 추가

● set.add(1).add(2)

객체를 반환하기 때문에, 연달아 호출 가능

 중복 요소 삽입시 무시됨

 자료형을 구분하지 않음

 

37.1.4 요소 존재 여부 확인

Set.prototype.has()

 

37.1.5 요소 삭제

Set.prototype.delete()

 

● 존재하지 않는 요소 삭제시 무시됨

● 불리언 값 반환

 

37.1.6 요소 일괄 삭제

Set.prototype.clear()

 

37.1.7 요소 순회

Set.prototype.forEach()

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

set.forEach((value1, value2, self) => console.log(value1, value2, self));

forEach 요소가 두개인 이유? Array.prototype.forEach 메서드와 인터페이스를 통일하기 위함(Array의 forEach의 두번째 인수는 index)

 

for ... of 사용 가능 => 이터러블

for (const value of set )

디스트럭처링 할당의 대상 가능

const [a, ...rest ] = set;

37.1.8 집합 연산

교집합, 합집합, 차집합, 상위 집합과 하위 집합

 

37.2. Map

키-값 쌍

Map 객체는 일반 객체와 달리 키로 사용 가능한 값이 객체를 포함한 모든 값

요소 개수를 확인하는 프로퍼티: Map.prototype.size

 

37.2.1 Map 객체의 생성

이터러블을 인수로 전달받아 Map 객체 생성

이터러블: [키, 값] 쌍으로 이루어진 요소

const map = new Map([['key1', 'value1'],['key2', 'value2']]

 

37.2.2 요소 개수 확인

Map.prototype.size

 

37.2.3 요소 추가

Map.prototype.set()

map.set('key1','value1')

새로운 Map 객체를 반환하기 때문에, set 메서드를 연달아 호출 가능하다.

 

37.2.4 요소 취득

Map.prototype.get()

 

37.2.8 요소 순회

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

for ... of 가능

 

Map.prototype.keys

Map.prototype.values

Map.prototype.entries