[Javascript] Set, Map 사용해보기

Set, Map 

Set과 Map은 데이터를 저장하고 검색하는데 사용되는 자료 구조이다.

Set은 배열에 중복없이 값을 저장하는 객체이며 일반 배열과 달리 배열의 요소의 순서에 의미가 없고 인덱스를 사용하지 않기 때문에 인덱스로 접근이 불가능하다.

Map은 키-값 쌍으로 이루어져 있으며 키는 중복되지 않는다. 중복된 key가 입력될때 나중에 들어온 key의 value가 덮어 씌워진다.

 

Set 사용해보기

• add : 배열에 요소를 추가해주는 메소드

const s = new Set();
console.log(s);

// 요소를 추가하는 방법
s.add("one");
s.add("two");
s.add("three");
// 중복값은 허용하지 않음
s.add("one");
console.log(s);

"one" 이 2번 들어갔지만 1개만 출력됨

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
// 생성단계에서 생성자 함수에 배열 전달
const ss = new Set(arr);
console.log(ss);

1 ~ 5의 숫자가 2번씩 들어갔지만 1번만 출력됨

• has() : 배열에 찾는 값이 있으면 true를 반환, 찾는 값이 없으면 false를 반환

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

const ss = new Set(arr);

// has() : 값이 있으면 true 반환 없으면 false 반환
console.log(ss.has(2));
console.log(ss.has(9));

2는 있기 때문에 true, 9는 없기 때문에 false를 반환

• delete() : 배열의 요소를 제거 

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

const ss = new Set(arr);

// delete() : 요소를 제거하는 메소드
ss.delete(2);
console.log(ss);

배열의 2 요소 제거

• clear() : 배열의 모든 요소 제거 

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

const ss = new Set(arr);

// clear() : 값을 제거하는 메소드
ss.clear();
console.log(ss);

• entries() : SetIterator 객체로 변환하여 반환

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

const ss = new Set(arr);

// SetIterator 객체로 반환
// 이터러블에 이터레이터를 반환
const temp = ss.entries();
console.log(temp.next().value);
console.log(temp.next().value);
console.log(temp.next().value);
console.log(temp.next().value);
console.log(temp.next().value);

arr에 1,3,4,5 가 2개씩 들어가서 2개씩 출력되는게 아니다 arr에 1,3,4,5만 있어도 결과는 같음

 

Map 사용해보기

• Map은 값을 추가할 때 key와 value 값을 한쌍으로 추가
• set() : map에 key와 value를 저장

const m = new Map();

m.set("one", 2);
// key가 겹치면 나중에 입력된 key의 value가 저장
m.set("one", 1);
m.set("two", 2);
m.set("three", 3);
console.log(m);

"one" 키가 2개 입력됬지만 2번째 key의 value값이 저장

• get() : map에 있는 값을 호출

const m = new Map();


m.set("one", 1);
m.set("two", 2);
m.set("three", 3);

// get() 메소드를 사용하여 값을 호출
console.log(m.get("one"));
console.log(m.get("two"));

• delete() : 값을 삭제

const m = new Map();

m.set("one", 1);
m.set("two", 2);
m.set("three", 3);

// delete() 메소드를 사용하여 값을 삭제
m.delete("three");
console.log(m);

• size : map에 저장된 요소의 길이를 확인

const m = new Map();

m.set("one", 1);
m.set("two", 2);

// map에 저장된 요소의 size 확인
console.log(m.size);

• keys() : map의 key만 가져옴

const m = new Map();


m.set("one", 1);
m.set("two", 2);

// keys() : key만 반환
const keys = m.keys();
console.log(keys);

• value() : map의 value만 가져옴

const m = new Map();

m.set("one", 1);
m.set("two", 2);

// values() : value만 반환
const values = m.values();
console.log(values);

• entries() : map의 key와 value를 MapIterator 객체로 변환하여 반환

const m = new Map();

m.set("one", 1);
m.set("two", 2);

// entries() : [key, value] 형태의 정보들을 모아서 MapIterator 객체로 변환해서 반환
const iter = m.entries();
console.log(iter);