ES2015에서 객체와 비슷한 Map과 배열과 비슷한 Set이라는 데이터 구조가 새롭게 등장했다.

이번 글에서는, 이 두 가지에 대해 설명해보고자 한다.

1. Map

Map은 이름이 있는 데이터를 저장한다는 점에서는 객체와 유사하다.

하지만, 할당 연산자를 통해 값을 추가하고 점 표기법이나 대괄호 표기법으로 접근하는 일반 객체와는 다르게, Map은 method를 통해 값을 추가하거나 접근할 수 있다.

new 키워드를 통해 Map을 만들 수 있고, 다음과 같은 method들을 통해 Map 안의 여러 값들을 다룰 수 있다.

• 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 객체는 method를 통해 값을 다루기 때문에 다양한 자료형을 프로퍼티 키로 활용할 수 있다는 장점이 있다.

2. Set

Set은 여러 개의 값을 순서대로 저장한다는 점에서 배열과 유사하다.

다만, 배열의 method는 활용이 불가능하고, Map과 비슷하게 Set 만의 method를 통해서 값을 다룰 수 있다.

Map과 마찬가지로 new 키워드로 Set을 만들 수 있으며, 다음과 같은 method를 통해 Set 안의 여러 값들을 다룰 수 있다.

• 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

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

하나 주의해야 할 부분은, 일반 객체는 프로퍼티 키로, Map은 get method로, 배열을 index로 개별 값에 접근이 가능하지만, Set은 개별 값이 접근하는 방법이 없다는 것이다.

그렇다면, Set은 언제 유용하게 사용할 수 있을까?

바로, 중복을 허용하지 않는 값을 모을 때이다.

Set은 중복되는 값을 허용하지 않는 독특한 특징이 있기 때문에, 최초에 추가된 순서를 유지하면서, 나중에 중복된 값을 추가하려고 하면 그 값은 무시된다.

이러한 특징을 잘 활용하면, 배열 내에서 중복을 제거한 값들의 묶음을 만들 때 Set이 유용하게 사용될 수 있다.

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}