Set, Map

Set 객체

특징

ES6에서 새로 도입한 자료구조이다

일반적인 배열과 비슷하게 원시 값, 객체 참조 모두 담을 수 있으며, 순회가 가능하다

다만 배열과 다른 점은, Set은 같은 값이 단 한 번만 나타날 수 있다 (중복 없음)

중복이 없는 유일한 값들의 집합이라고 생각하자

배열의 중복을 제거하고 싶을 때 잠깐 사용하거나, 처음부터 중복 없는 배열로 사용하고 싶을 때 쓰면 좋다

 

NaN과 undefined도 담을 수 있는데, Set에서 NaN은 여러 개 들어올 수 없다 (원래 NaN === NaN은 false이다)

Set 객체에서 +0과 -0은 같은 값 취급된다

생성하기

const set = new Set(); // 빈 Set 객체 생성
console.log(set); // Set(0) {}

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

const setFromString = new Set("chichoon");
console.log(setFromString); // Set(5) {"c", "h", "i", "o", "n"}

Set 생성자는 인자로 배열, 문자열 등 iterable 한 값을 넣을 수 있다

배열이나 문자열을 넣으면, 중복이 제거된 채로 저장된다

 

단순 숫자나 boolean과 같은 원시값, 객체는 순회할 수 없기 때문에 인자로 사용할 수 없다

내장 메서드 사용하기

Set.add()

const set = new Set([1, 2, 3]); // set(3) {1, 2, 3}
set.add(5); // set(4) {1, 2, 3, 5}
set.add(6).add(2).add(8); // set(6) {1, 2, 3, 5, 6, 8}

값을 추가할 수 있다

add() 메서드는 값이 추가된 set의 참조를 반환하기 때문에, 메서드 체이닝이 가능하다

인자로 이미 set에 존재하는 값 (예시에서는 2) 이 들어올 경우, 아무 것도 하지 않는다

Set.delete()

const set = new Set([1, 2, 3, 5, 6, 8]); // set(6) {1, 2, 3, 5, 6, 8}
set.delete(5); // true
set.delete(0); // false

값을 삭제할 수 있다

delete() 메서드는 삭제 여부를 반환한다

삭제가 잘 되었다면 (인자로 들어온 값이 set 객체 안에 존재했다면) true를 반환한다

삭제에 실패했을 경우 (인자로 들어온 값이 set 객체 안에 존재하지 않았다면) false를 반환한다

Set.forEach()

const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.forEach((v) => console.log(v + 5));

// 6
// 7
// 8
// 11
// 13

set 객체 내의 모든 값에 대해 콜백 함수를 실행시킬 수 있다

콜백 함수의 인자로는 set 객체의 값이 들어간다

array.forEach() 와 비슷한 양상을 띄는 대신 콜백 함수의 인자 2개가 set 객체의 값을 받는데, 그 이유는 set 객체에서 순서가 의미없기 때문이다

Set.has()

const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
console.log(set.has(3)); // true
console.log(set.has(5)); // false

set 객체 안에 해당 값이 존재하는지 여부를 boolean으로 반환한다

Set.keys(), Set.values()

const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
console.log(set.keys()); // SetIterator { 1, 2, 3, 6, 8 }
console.log(set.values()); // SetIterator { 1, 2, 3, 6, 8 }

여타 객체와 같이 keys, values 메서드를 사용할 수 있고, set 객체의 key와 value를 반환한다

단 set 객체 특성상 key와 value가 같으므로 두 메서드는 같은 값을 반환한다

keys(), values() 메서드의 반환값은 순회할 수 있다

Set.entries()

const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.entries(); // [Set Entries] { [1, 1], [2, 2], [3, 3], [6, 6], [8, 8] }

set 객체의 모든 값을 배열 형태로 반환한다

배열은 [value, value] 형태로 반환되며, 객체의 특성상 key-value 쌍으로 이루어져야겠지만 set 객체는 key와 value가 동일하므로 두 개가 같은 값으로 반환되는 것이다

Object.entries() 와 정확히 같은 기능을 한다 (set도 객체이므로 해당 메서드를 쓸 수 있다)

entries() 메서드의 반환값은 순회할 수 있다

Set.clear()

const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.clear();
console.log(set); // Set(0) {}

set 객체의 모든 값을 삭제하고 비운다

Set.size

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

set의 길이 프롭퍼티이다

Set 객체로 배열 중복 제거하기

const arr = [1, 2, 3, 3, 3, 4, 5, 6, 5, 5, 5, 1, 1, 2];
const newArr = [...new Set(arr)]
console.log(newArr); // [1, 2, 3, 4, 5, 6]

set 객체도 전개 연산자를 사용할 수 있으므로, 이를 이용하여 중복 제거된 내용물을 전개해 새로운 배열로 만들 수 있다

이렇게 생성한 배열은 다시 중복값을 가질 수 있으므로, 일시적으로 중복을 제거하는 역할만을 한다

Map 객체

특징

마찬가지로 ES6에서 새로 도입한 자료구조이다

일반 객체 (Object) 와 유사하지만, 일반 객체는 key 값에 문자열, Symbol, 정수밖에 올 수 없지만 Map 객체는 어떤 것이든 key가 될 수 있으며, key의 타입을 보존한다

따라서 key로 ‘1’ 이 들어올 때 (문자열) 와 1이 들어올 때 (숫자) 는 다르다

Map은 데이터의 순서를 보존한다

생성하기

const map = new Map(); 
console.log(map); // Map(0) {size: 0}

const map = new Map([['key', 'value'], ['foo', 'bar'], ...]);
console.log(map); 
// Map(2) {'key' => 'value', 'foo' => 'bar', ...}

내장 메서드 사용하기

Map.set()

const map = new Map(); 
map.set('key', 'value');
map.set(1, 'aaa');
map.set('1', 'bbb');
console.log(map);
// Map(3) {'key' => 'value', 1 => 'aaa', '1' => 'bbb'}

set() 메서드를 사용하여 값을 추가할 수 있다

첫 번째 인자는 key, 두 번째 인자는 value이다

key의 자료형을 구분하므로, 1과 ‘1’ 이 다르게 들어가는 것을 볼 수 있다

Map.get()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.get(1));
// 'aaa'
console.log(map.get('12345');
// undefined

key를 인자로 받아 그에 대응하는 value를 반환한다

값이 존재하지 않을 경우, undefined를 반환한다

Map.delete()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
map.delete('1'); // true
map.delete(5); // false

값을 삭제할 수 있다

set 객체의 delete와 마찬가지로, delete() 메서드는 삭제 여부를 반환한다

삭제가 잘 되었다면 (인자로 들어온 key가 map 객체 안에 존재했다면) true를 반환한다

삭제에 실패했을 경우 (인자로 들어온 key가 map 객체 안에 존재하지 않았다면) false를 반환한다

Map.forEach()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
map.forEach((value, key) => console.log(`${value} is ${key}'s value`));

// value is key's value
// aaa is 1's value
// bbb is 1's value

map 객체 내의 모든 값에 대해 콜백 함수를 실행시킬 수 있다

콜백 함수의 인자로는 map 객체의 value, key가 들어간다

Map.has()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.has(1));
// true
console.log(map.has('12345');
// false

key를 인자로 받아 map 객체에 존재하는지 여부를 boolean으로 반환한다

Map.keys()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.keys()); // MapIterator {'key', '1', 1}

map 객체 내의 모든 key를 반환한다

keys() 메서드의 반환값은 순회할 수 있다

Object.keys() 와 유사하다

Map.values()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.values()); // MapIterator {'value', 'aaa', 'bbb'}

map 객체의 value를 반환한다

values() 메서드의 반환값은 순회할 수 있다

Object.values() 와 유사하다

Map.entries()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.entries()); // Map Entries {['key', 'value'], [1, 'aaa'], ['1', 'bbb']}

map 객체의 모든 값을 배열 형태로 반환한다

배열은 [key, value] 형태로 반환되며, 순회할 수 있다

Object.entries() 와 같은 기능을 한다 (map도 객체이므로 해당 메서드를 쓸 수 있다)

entries() 메서드의 반환값은 순회할 수 있다

Map.clear()

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
map.clear();
console.log(map); // Map(0) {size: 0}

map 객체의 모든 값을 삭제하고 비운다

Map.size

const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]); 
console.log(map.size); // 3

map의 길이 프롭퍼티이다

---

참고자료

Set.prototype.entries() - JavaScript | MDN