2023. 1. 30. 07:15ㆍjs
Set
Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set은 배열과 유사하지만 차이가 존재한다.
구분 배열 Set
동일값을 중복하여 포함할 수 있다. O X
요소 순서에 의미가 존재한다 O X
(인덱스 의 의미가 존재함)
인덱스로 요소에 접근할 수 있다. O X
와 같은 차이가 존재한다. 여기서 Set은 수학적 집합구현을 위한 자료형이라고 볼 수 있다.
Set객체의 생성. New Set()을 호출하여 생성하는데 인수를 전달 하지 않는다면
빈객체로 생성된다.
Set생성자 함수는 이터러블을 인수로 전달받아 Set객체를 생성한다. 이때 이터러블의 중복된 값은 Set객체에 요소로 저장되지 않는다 그렇다면 구조안에 있는 동일 자료도 저장되지 않을까?
앞장에서 나왔던 내용들을 기억하게 된다면, 저장이 된다는것을 알 수 있지만.
한번더 테스트 해보도록 하자. 당연하게
객체의 따로 저장이 되는것을 확인 할 수 있다.
37.1.2 요소의 개수 확인
set안에 들어있는 요소 개수를 확인 하기 위해서는
Set.prototype.size프로퍼티를 이용해서 확인 할 수 있다.
size프로퍼티는 setter함수 없이 getter만 존재하는 접근자 프로퍼티 임으로
임의의 수정이 불가능하다.


37.1.3 요소 추가
새로운 요소를 추가할때 set.prototype.add를 사용하면 된다.
Const test = new Set();
test.add(1);
주의해야할점은 NaN === NaN은 false를 나타내지만,
Set에서는 중복으로 저장되지 않는다는것을 명심하자.
37.1.4 요소의 존재 여부 확인
set.has(value)
37.1.5 요소 삭제
Set.prototype.delete메서드를 이용해서 제거하는 방식으로
리턴으로 불리언값을 전달하도록 한다.
37.1.6 요소 일괄 삭제
set.prototype.clear메서드를 이용한다.
set.clear()를 호출하면 내부 존재하는 데이터가 지워지게 된다.
37.1.7 요소 순회
Set의 경우 이터러블 한 타입임으로, for … in 을 사용할 수 있고
forEach로도 사용 가능하다는것을 알 수 있다.
37.1.7 집합 연산
위의 요소순회를 이용해서 간단하게 구현 할 수 있다.
37.2 Map
Map객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map객체는 객체와 유사하지만
차이가 존재한다.
구분 객체 Map
키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값
이터러블 X O
요소 개수 확인 Object.keys.length map.size
37.2.1 Map객체의 생성.
Map객체는 Map생성자 함수로 생성한다.
map에는 공통 키를 가지게 되면 이전값을 덮어씌우는 작업을 하게 되는데
배쉬와 같은 쉘에서 존재하는 export 를 덮어씌우는것과 같은 행위라고 생각한다.
37.2.2 요소 개수 확인
위에서 언급한 Map.size를 통해서 확인한다
37.2.3 요소 추가
Map 객체에 요소를 추가할 때에는 map.prototype.set을 이용해서 추가한다.
37.2.4 요소 취득
map객체에서 요소를 가져올때 map.get(“Key”)의형태로 가져온다.
존재하지 않으면 undefined 를 반환한다.
37.2.5 요소 존재 확인
map.has로 판단.
37.2.6 요소 삭제
map.prototype.delete 메서드를 이용한다.
37.2.7 요소 일괄 삭제
map.prototype.clear 메서드를 이용한다.
37.2.8 요소 순회
For of를 통해서 순회 할 수 있다.
Map.prototype.keys 를 통해서 맵의 키들을 받아올수 있고,
Map.prototype.values 를 통해서 값을 받아오며,
Map.prototype.entries 를 통해서 전체 객체를 받아올 수 있다.
이장을 공부하면서 느낀점은.Map 과 Set이 크게 다른점이 없다는것을 느낄 수 있다.
약간의 타입을 주기위해서 존재하는것으로 보이는데
이장에서 중요시 여겨야하는 없는것을 삭제한다거나 해도 에러를 발생하지 않는다는 점,
일반객체와는 다르게 for …in 메서드를 통해서 접근하거나, for …of 를 통해서 접근 할 수 있다는것을
확인 할 수 있는 장이였다.
'js' 카테고리의 다른 글
브라우저 렌더링2 (0) | 2023.02.01 |
---|---|
브라우저 렌더링 과정 (2) | 2023.01.31 |
디스트럭처링 할당. (0) | 2023.01.17 |
35 스프레드 문법 (0) | 2023.01.15 |
34 이터러블 (2) | 2023.01.15 |