javaScript - Set과 Map

Set과 Map은 ES6에 도입된 새로운 자료구조이다.

---

1. Set

Set객체는 중복을 허용하지 않는 자료구조이다. 배열과 유사하지만 중복이 안된다는 점, 요소의 순서가 의미 없다는 점, 인덱스로 요소에 접근할 수 없다는 점에서 차이가 존재한다.

1.1 Set 객체 생성

Set객체는 아래와 같이 생성자 함수로 생성한다.

const set = new Set();
console.log(set); // Set(0) {}

const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}

const set2 = new Set('hello');
console.log(set2); // Set(4) {"h", "e", "l", "o"}

이 때 만약 인수를 전달하지 않으면 빈 객체가 생성되며, 만약 인수를 넘겨줄거면 이터러블을 인수로 전달해주면 된다. 그리고 이 때 중복된 값이 제거된다.

1.2 요소 개수 확인

Set객체의 요소 개수를 확인할 때에는 Set.prototype.size 프로퍼티를 사용하면 된다. 배열의 length와 다르게 getter로만 동작하기 때문에 값을 지정해줄 수는 없다.

const { size } = new Set([1, 2, 3, 3]);
console.log(size); // 3

1.3 요소 추가

Set객체 요소 추가는 Set.prototype.add 메서드를 사용한다. 그리고 새로운 요소가 추가된 Set객체를 반환하기 때문에 체이닝이 가능하다. 요소로는 자바스크립트의 어떠한 값도 저장할 수 있다.

const set = new Set();

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

요소의 존재 여부는 Set.prototype.has 메서드로 알 수 있으며 존재 여부를 불리언 값으로 반환한다.

const set = new Set([1, 2, 3]);

console.log(set.has(2)); // true
console.log(set.has(4)); // false

set.clear();
console.log(set); // Set(0) {}

요소의 삭제는 Set.prototype.delete 메서드를 사용한다. 삭제 성공 여부를 불리언 값으로 반환한다. 만약 모든 요소를 삭제하고 싶다면 Set.prototype.clear 메서드를 사용하면 된다.

1.4 순회

Set객체는 이터러블이다. Set객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용하면 된다. 배열의 forEach와 유사하게 동작하며 인수로 요소 값, 요소 값, 객체 자체를 반환한다.

 

왜 요소 값을 두 번 전달하냐는 질문을 할 수 있는데, 이는 Set의 forEach가 배열의 forEach와 유사하게 동작하게하기 위해서도 있고, Set객체의 경우에는 순서가 없기 때문에 인덱스를 전달받지 않아서 요소 값을 두 번 넘겨받는 것이다.

const set = new Set([1, 2, 3]);

set.forEach((v, v2, set) => console.log(v, v2, set));
/*
1 1 Set(3) {1, 2, 3}
2 2 Set(3) {1, 2, 3}
3 3 Set(3) {1, 2, 3}
*/

2. Map

Map객체는 키와 값으로 쌍을 이루고 있는 자료구조이다. 일반적인 자바스크립트의 객체와 유사하지만, 키로써 객체를 포함한 어떠한 값이라도 사용할 수 있으며 이터러블하고, 요소의 개수를 Map.prototype.size 메서드로 확인한다는 점에서 차이가 있다.

2.1 Map 객체 생성

Map역시 Set과 동일하게 생성자 함수로 생성할 수 있는데, 인수를 전달받지 못한 경우에는 빈 Map객체가 생성이 된다.

Map 생성자 함수는 이터러블을 전달받아 객체를 생성하며, 이 때 전달되는 인수는 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}

const map2 = new Map([1, 2]); // TypeError: Iterator value 1 is not an entry object

만약 인수로 전달한 이터러블 중 같은(중복된) 키를 전달받는 경우에는 값이 덮어써지기 때문에 주의해야 한다. 즉, Map객체는 중복된 키를 갖는 요소가 존재하지 않는다.

2.2 요소 개수 확인 / 추가

요소의 개수는 Map 프로토타입의 size 메서드를 사용하며 Set의 size와 같이 getter만 존재하는 접근자 프로퍼티이기 때문에 값을 지정해줄 수 없다.

 

그리고 요소를 추가하는 경우에는 Map.prototype.set 메서드를 이용한다. 새로운 Map객체를 반환하기 때문에 연속적인 호출(체이닝)이 가능하다.

const map = new Map();

map
  .set('key1', 'value1')
  .set('key2', 'value2');

console.log(map); // Map(2) {"key1" => "value1", "key2" => "value2"}

참고로, 중복된 키를 가진 요소는 덮어써진다.

2.3 요소 취득

요소를 취득할 때에는 Map.prototype.get 메서드를 이용한다. get의 메서드의 인수로 키를 전달할 수 있고, 그렇게 되면 인수로 전달받은 키를 가지고 있는 요소를 반환한다.

 

만약 존재하지 않을 경우에는 undefined를 반환한다.

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map.get(lee)); // developer
console.log(map.get('key')); // undefined

2.4 요소 삭제

요소를 삭제하고 싶은 경우에는 Map.prototype.delete 메서드를 사용한다. 그리고 그 결과로 불리언 값을 반환한다.

 

이 때 존재하지 않는 키를 삭제하려고 한다면 그냥 무시된다.

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.delete(kim);
console.log(map); // Map(1) { {name: "Lee"} => "developer" }

2.5 요소 순회

Map 객체는 이터러블이다. 따라서 Map의 요소를 순회할 때는 Map.prototype.forEach를 사용한다. 배열과 유사하게 동작하며 인수로 요소 값, 요소 키, 객체 자체를 전달받는다.

 

요소 값과 요소 키의 순서에 주의해야 한다.

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.forEach((v, k, map) => console.log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "designer"
}
designer {name: "Kim"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "designer"
}
*/

2.6 Map.prototype.keys/values/entries

Map 객체는 이터러블 이터레이터를 반환하는 메서드를 제공한다.

 

Map.prototype.keys의 경우에는 요소 키를 값으로 가지는 이터레이터를,

Map.prototype.values는 요소 값을 값으로 가지는 이터레이터를,

Map.prototype.entries는 요소 키와 값을 쌍으로 가지는 이터레이를 반환한다.

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

for (const key of map.keys()) {
  console.log(key); // {name: "Lee"} {name: "Kim"}
}

for (const value of map.values()) {
  console.log(value); // developer designer
}

for (const entry of map.entries()) {
  console.log(entry); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]
}