[JavaScript] Map, Set

Map 

Map 은 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하다. key - value pair.

그러나 할당연산자를 통해 값을 추가하고, 점 표기법이나 대괄호 표기법으로 접근하는 객체와 달리 Map 은 메소드를 통해 값을 추가하거나 접근할 수 있다.

new 키워드를 통해 Map을 만들 수 있으며 아래와 같은 메소드로 Map 안의 여러 값을 다룰 수 있음.

 

method	기능
map.set(key, value)	key를 이용해 value를 추가하는 메소드.
map.get(key)	key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
map.has(key)	key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
map.delete(key)	key에 해당하는 값을 삭제하는 메소드.
map.clear()	Map 안의 모든 요소를 제거하는 메소드.
map.size	요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

 

// Map 생성
const codeit = new Map();

// set 메소드
codeit.set('title', '문자열 key');
codeit.set(2017, '숫자형 key');
codeit.set(true, '불린형 key');

// get 메소드
console.log(codeit.get(2017)); // 숫자형 key
console.log(codeit.get(true)); // 불린형 key
console.log(codeit.get('title')); // 문자열 key

// has 메소드
console.log(codeit.has('title')); // true
console.log(codeit.has('name')); // false

// size 프로퍼티
console.log(codeit.size); // 3

// delete 메소드
codeit.delete(true);
console.log(codeit.get(true)); // undefined
console.log(codeit.size); // 2

// clear 메소드
codeit.clear();
console.log(codeit.get(2017)); // undefined
console.log(codeit.size); // 0

Map = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

// console.log(myMap.keys()); // 키에 접근 반복하여 콘솔출력
for (const key of myMap.keys()) {
  console.log(key);
}

// console.log(myMap.values()); // value 에 접근 반복하여 콘솔출력
for (const value of myMap.values()) {
  console.log(value);
}

// console.log(myMap.entries()); // Array, [key, value] 형태로 출력
for (const entry of myMap.entries()) {
  console.log(entry);
}

console.log(myMap.size); // map 의 사이즈(길이), 3
console.log(myMap.has("two")); // key 기반 검색, true

---

Set

Set은 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷하다. 하지만, 배열의 메소드는 활용할 수 없고 Map과 비슷하게 Set만의 메소드를 통해서 값을 다루는 특징이 있음.

 

method	기능
set.add(value)	값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
set.has(value)	Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
set.delete(value)	값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
set.clear()	Set 안의 모든 요소를 제거하는 메소드.
set.size	요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

한가지 특이한 점은 일반 객체는 프로퍼티 네임으로, Map은 get메소드로, 그리고 배열은 index를 통해서 개별 값에 접근할 수 있었다. 그러나 Set에는 개별 값에 바로 접근하는 방법이 없다.

 

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

for (const member of members) {
  console.log(member); // 영훈, 윤수, 동욱, 태호가 순서대로 한 줄 씩 콘솔에 출력됨.
}

위 코드처럼 반복으로 전체 요소를 한꺼번에 다룰 때, 그 순간에 개별적으로 접근할 수 있음.

 

Set 은 중복되는 값을 허용하지 않는 특징이 있다.

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('영훈'); // Set(2) {"영훈", "윤수"}
members.add('영훈'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('동욱'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

최초 순서를 유지하되, 중복값을 허용하지 않고 그 값을 무시함.

 

const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}

아규먼트에 배열을 넣으면 중복값이 정리되어 나온다 -> 코딩테스트 풀때 유리하게 썼음

 

// Set
// - 고유한 값을 가지는 자료구조
// - 값만 저장한다.
// - 키를 저장하지 않는다.
// - 값이 중복되지 않는 유일한 요소로만 구성된다.
// 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2"); // 중복값은 무시
mySet.add("value3");
mySet.add("value4");
mySet.add("value5");

console.log(mySet.size);
console.log(mySet.has("value1"));

// Intterator

for (const value of mySet.values()) {
  console.log(value);
}