Set 과 Map

moono·2023년 1월 22일
0

JavaScript

목록 보기
21/23

Set

배열과 같은 데이터 집합
중복에 대한 제한이 없는 배열과 다르게 중복을 허용하지 않는다.
⇒ 다루려는 데이터가 중복을 허용하지 않는 경우
배열은 일일이 체크하고 제거하는 처리가 필요하지만
셋을 사용하면 아예 중복된 값은 들어가지 않기 때문에 처리가 필요하지 않음

  • 순서가 보장되지 않고 중복을 허용하지 않는다.
  • Set은 배열과 다르게 index 개념이 없다.
  • Set은 키와 값이 같다.
  • 하지만 Set은 iterator를 사용해 length 가 아니라 size 로 나옴

⇒ 그래서 Set은 주로 중복을 제거하거나 값의 유무만을 판단해야 하는 경우 사용되며,
특정 요소에 접근해야 하는 경우나 인덱스가 필요한 상황에서는 배열이 사용

new Set()

새로운 Set을 생성
괄호 안에 초기값으로 배열과 같은(반복이 가능한iterable) 객체를 전달받으면
중복이 제거된 채로 값을 복사해 Set을 생성한다.

let arr = [1,2,3,3];
let arrSet = new Set(arr);

console.log(arrSet) // Set(3) {1,2,3}

괄호 안에 꼭 [] 이걸로 감싸서 넣어줘야 한다.

let arrSet = new Set([1,2,3,4,5])
console.log(arrSet) // Set(5) {1,2,3,4,5}

let arrSet1 = new Set(1) // error 노출
// Uncaught TypeError: number 1 is not iterable 
//(cannot read property Symbol(Symbol.iterator))
//at new Set (<anonymous>)

add()

Set 요소의 마지막에 주어진 값을 추가하는데,
만약 추가하려는 값이 이미 Set에 있는 경우 추가하지 않는다.

const set = new Set();

set.add(1); // {1}
set.add(2); // {1,2}
set.add(1); // {1,2}

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

괄호 안에 한개의 요소만 넣어야 가능하다.
, 로 여러개의 요소를 넣었더니 첫번째 요소만 들어감

let arrSet = new Set();

arrSet.add(1,2,3,4,5); // Set(1) {1}
arrSet.add(1,2,3) // Set(1) {1}
arrSet.add(2,3) // Set(2) {1,2}
arrSet.add(3) // Set(3) {1,2,3}

delete()

주어진 값을 셋에서 제거하는데,
값을 제거한 경우 true 반환 하고 값이 Set에 없는 경우 false 를 반환

let arr = [1,2,3,3];
let arrSet = new Set(arr);

console.log(arrSet) // Set(3) {1,2,3}

arrSet.delete(5) // false
arrSet.delete(1) // true

console.log(arrSet) // Set(2) {2,3}

has()

주어진 값이 Set에 존재하면 true, 없으면 false 반환

clear()

Set에 있는 요소들을 다 삭제하고 비어있는 상태로 만든다.

let arrSet = new Set([1,2,3]);

arrSet.clear();
console.log(arrSet) // Set(0) {size:0}

size

Set 의 저장된 요소의 개수를 확인하고 싶을땐
배열과 다르게 length 가 아닌 size 를 사용해야한다.

let arrSet = new Set([1,2,3]);

arrSet.length; // undefined
arrSet.size; // 3



Map

객체처럼 키와 값을 연결하는 방식의 데이터 집합
순서가 보장되지 않고, Key 중복은 허용하지 않지만 value 중복은 허용

객체Map
키값문자, 심벌타입모든 데이터 타입
정렬관여하지 않음삽입된 순서대로 정렬
순회키값을 통해 배열 얻어서 배열을 순회맵 자체로 순회 가능
크기키값 사용 등으로 직접 판별map.size로 크기 바로 알 수 있음

Map 과 객체의 차이점

  • Map은 모든 데이터 타입의 키를 허용
  • Map은 순서를 보장
  • Map은 반복이 가능한 객체
  • Map은 키를 문자열로 취급하지 않음
  • ⇒ 그래서 Map은 키의 순서가 보장되어야 할 때나
    객체의 키가 허용되지 않는 데이터 타입 인 경우에 사용되고
    그 외에는 객체를 사용한다.

new Map()

새로운 맵을 생성하는데 괄호 안에 반복이 가능하면서 키와 값 쌍인 객체를 받으면
해당 값이 추가된 맵을 생성한다.

const arr = [[1, 'a'],[2, 'b']];
const arrMap = new Map(arr);

console.log(arrMap) // Map(2) {1 => 'a', 2 => 'b'}

⇒ 배열(반복 가능하면서 쌍으로 이루어진)을 토대로 객체와 같은 형태를 만듬
일반 객체와 다른점은 키로 지정된 1, 2가 문자열로 변환된게 아니라 숫자 그대로 키가 됨

set()

set()은 주어진 키와 값을 맵에 추가

let arrMap = new Map();

arrMap.set(1, 'a');
arrMap.set(2, 'b');
console.log(arrMap) // Map(2) {1 => 'a', 2 => 'b'}

Map 과 객체 차이

get()

인자로 전달받은 키에 해당하는 값을 반환
전달받은 인자의 키가 존재하지 않으면 undefined 반환

const arr = [[1, 'a'],[2, 'b']];
const arrMap = new Map(arr);

arrMap.get(1); // 'a'
arrMap.get(3); // undefined

has()

인자로 전달받은 키의 존재 유무에 따라 true , false 반환

delete()

인자로 전달받은 키에 해당하는 값 삭제
삭제 여부를 true , false 로 반환

clear()

Map 안의 프로퍼티들 전부 삭제

size

Map에 저장된 요소의 갯수 반환

0개의 댓글