[JS] 자바스크립트 Map / Set 자료구조

Map

---

Map은 항상 `map` 전용 메서드(`set`, `get` 등)를 사용한다. `map[key] = 2` 형태로 사용하면 `map`을 일반 객체로 취급하므로 많은 제약이 생긴다.

 

TL;DR

❶ key-value로 이루어진 순서가 있는 컬렉션(집합) ⭐️

 

❷ 삽입 순서 기억

 

❸ 중복 key 불가 — 이미 존재하는 key에 대한 value를 추가하면 해당 key의 value를 덮어씀

let map = new Map([['one', 1]]);
map.get('one'); // 1
map.set('one', 111);
map.get('one'); // 111

 

❹ Map 내장 메서드 forEach 지원(배열 forEach 메서드와 유사) / for of 순회 가능

map.forEach((value, key, map) => { /* ... */ });

 

❺ key와 value에 참조형 / 원시형 모두 사용 가능 — 객체는 string / symbol 타입만 key로 사용 가능

const john = { name: 'John' };
const visitsCountMap = new Map();
visitsCountMap.set(john, 888); // 객체를 key로 사용함
visitsCountMap.get(john); // 888

 

맵이 키를 비교할 땐 NaN NaN, -0 +0 0이 동일한 것으로 간주함(sameValueZero 알고리즘 사용)

let map = new Map();
map.set(NaN, 'Not a Number');
map.get(NaN); // 'Not a Number'

map.set(-0, 'Zero');
map.get(0); // 'Zero'

 

❻ Map 생성자는 각 요소가 [key, value] 쌍으로 된 배열을 인자로 받을 수 있음

let map = new Map([
  ['one', 1],
  ['two', 2],
]);
console.log(map); // Map(2) {'one' => 1, 'two' => 2}
console.log(Object.fromEntries(map)); // { one: 1, two: 2 }

 

❼ map → 객체로 바꿀 땐 Object.fromEntries() 사용

const map = new Map([
  ['name', 'Colorfilter'],
  ['age', 30],
]);

const obj = Object.fromEntries(map.entries()); // .entries() 생략 가능
console.log(obj); // { name: 'Colorfilter', age: 30 }

 

❽ 객체 → map으로 바꿀 땐 Object.entries() 사용

const obj = { name: 'ColorFilter', age: 30 };
let map = new Map(Object.entries(obj));

 

❾ map.set 을 호출할 때마다 맵 자신이 반환되는 점을 이용해 체이닝 가능

map.set('1', 'str1').set(1, 'num1').set(true, 'bool1');

 

Map과 Object 자료구조 차이점 ⭐️

객체(Object) 자료구조는 키가 있는 컬렉션을 저장한다.

 

	Map	Object
Key 자료형	원시형 / 참조형 모두 가능	String, Symbol
정렬	삽입 순서 기억	(ES6) String, Symbol 타입의 키 생성 순서만 기억
크기	size 메서드 사용	수동으로 크기 추적
성능	key-value 추가/제거 빈번할 때 좋은 성능	key-value 추가/제거가 빈번할 때 최적화 없음

 

Map 메서드

❶ new Map() — (생성자) 새로운 map 생성

각 요소가 [key, value] 쌍으로 된 배열을 생성자 인자로 넘겨서 초기값을 지정할 수도 있다.

const map1 = new Map();
map1.set('one', 1);
map1.set('two', 2);

const map2 = new Map([
  ['one', 1],
  ['two', 2],
]);

 

❷ map.set(key, value) — key를 이용해 value 저장한 후 map 자신 반환

일반 객체는 프로퍼티 키를 문자열 타입으로 강제 변환하지만 Map 객체의 키는 자료형에 제약이 없다.

const map = new Map();
map.set('1', 'str1'); // 문자형 키 | Map(1) {'1' => 'str1'}
map.set(1, 'num1'); // 숫자형 키 | Map(2) {'1' => 'str1', 1 => 'num1'}
map.set(true, 'bool1'); // 불린형 키 | Map(3) {'1' => 'str1', 1 => 'num1', true => 'bool1'}

 

`map.set()` 메서드는 기본적으로 한 번에 하나의 키-값 쌍만 추가할 수 있지만, 메서드 체이닝을 통해 여러개의 키-값 쌍을 연속으로 추가할 수 있다.

const map = new Map();
map.set('a', 10).set('b', 20); // Map(2) {'a' => 10, 'b' => 20}

 

❸ map.get(key) — key에 해당하는 value 반환. key가 존재하지 않으면 undefined 반환

const map = new Map();
map.set('one', 1);
map.get('one'); // 1
map.get('two'); // undefined

 

❹ map.has(key) — key가 존재하면 true, 존재하지 않으면 false 반환

const map = new Map();
map.set('one', 1);
map.has('one'); // true
map.has('two'); // false

 

❺ map.delete(key) — key 에 해당하는 value 삭제

삭제 작업에 성공하면 true 반환, Map 객체에 key가 없어서 삭제 작업을 하지 않았다면 false 반환

const map = new Map();
map.set('one', 1);
map.get('one'); // 1
map.delete('one'); // true
map.get('one'); // undefined
map.delete('one'); // false

 

❻ map.size — 요소 개수 반환

const map = new Map([
  ['one', 1],
  ['two', 2],
]);

map.size; // 2

 

❼ map.clear() — 맵의 모든 요소 제거

const map = new Map([
  ['one', 1],
  ['two', 2],
]);

map.size; // 2
map.clear();
map.size; // 0

 

Map 순회

맵은 삽입 순서를 기억하며, 삽입된 순서대로 순회한다.

 

❶ map.keys() — 각 요소의 key를 반복할 수 있는 이터레이터 객체 반환

const map = new Map([
  ['one', 1],
  ['two', 2],
  ['three', 3],
]);

map.keys(); // MapIterator {'one', 'two', 'three'}
[...map.keys()]; // ['one', 'two', 'three']

for (const key of map.keys()) {
  console.log(key); // one two three
}

 

❷ map.values() — 각 요소의 value를 반복할 수 있는 이터레이터 객체 반환

const map = new Map([
  ['one', 1],
  ['two', 2],
  ['three', 3],
]);

map.values(); // MapIterator {1, 2, 3}
[...map.values()]; // [1, 2, 3]

for (const value of map.values()) {
  console.log(value); // 1 2 3
}

 

❸ map.entries() — 각 요소의 [key, value]를 한 쌍으로 반복할 수 있는 이터레이터 객체 반환

const map = new Map([
  ['one', 1],
  ['two', 2],
  ['three', 3],
]);

map.entires(); // MapIterator {'one' => 1, 'two' => 2, 'three' => 3}
[...map.entries()]; // [Array(2), Array(2), Array(2)]

// for (const entry of map.entries()) 동일
for (const entry of map) {
  console.log(entry); // ['one', 1] ['two', 2] ['three', 3]
}

 

❹ map.forEach — map 내장 메서드 ⚡️

const map = new Map([
  ['one', 1],
  ['two', 2],
  ['three', 3],
]);

map.forEach((value, key, map) => {
  console.log(`${key}: ${value}`); // one: 1 two: 2 three: 3
});

 

❺ for of — 맵 순회

const obj = { one: 1, two: 2, three: 3 };
const map = new Map(Object.entries(obj));

// entry -> [key, value] 이렇게 구조분해 할 수도 있다
for (const entry of map) {
  console.log(entry); // ['one', 1], ['two', 2], ['three', 3]
}

 

Set

---

TL;DR

❶ 중복값을 허용하지 않는 value로 이루어진 컬렉션(집합) ⭐️

 

❷ 중복 value 불가 —Set에 이미 존재하는 value를 추가해도 아무일도 일어나지 않음

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

 

❸ for of 및 forEach 메서드로 set 값을 대상으로한 반복 작업 수행 가능

// Map의 forEach 콜백이 3개의 파라미터를 받으므로
// Map과의 호환성을 위해 값이 같은 1번째, 2번째 파라미터가 중복됨(value, valueAgain 동일)
set.forEach((value, valueAgain, set) => { /* ... */ });

// for of 문으로 바로 순회 가능
for (const value of set) { /* ... */ }

 

❹Array.from() 혹은 [...set] 전개문법으로 set → (새로운)배열 변환

const set = new Set([1, 2, 3, 4, 5]);
const arr1 = Array.from(set); //  [1, 2, 3, 4, 5]
const arr2 = [...set]; // [1, 2, 3, 4, 5]

arr1 === arr2; // false
arr1 === set; // false

 

❺ Set 생성자는 배열을 인자로 받을 수 있고, 해당 배열을 복사한 후 Set 객체의 요소로 저장(중복값 제거됨)

let set = new Set([1, 1, 3, 4, 4, 8, 8, 9]);
console.log(set); // Set(5) {1, 3, 4, 8, 9} 중복값 제거됨
console.log([...set]); // [1, 3, 4, 8, 9]

 

Set과 Array 자료구조 차이점 ⭐️

배열(Array) 자료구조는 순서가 있는 컬렉션을 저장한다.

 

	Set	Array
특정 값 존재 여부 확인	has 메서드 사용 (빠름)	indexOf 메서드 사용 (느림), NaN은 찾을 수 없음
값 삭제	delete 메서드 사용	splice, slice 메서드를 사용해 특정 부분을 잘라내야 함
중복값 확인	값의 유일성을 보장하므로 중복 확인 불필요	filter, indexOf 등의 메서드를 조합해 찾을 수 있지만, 요소 전체를 조회하므로 성능 안좋음

 

Set 메서드

---

❶ new Set(iterable) — (생성자) 새로운 set 생성

Set 생성자가 이터러블 객체(배열 등)를 받으면 중복값을 제거한 후 값을 복사하여 set 객체에 추가한다.

const set1 = new Set();
set1.add(1);
set1.add(2);
// ...

const set2 = new Set([1, 2, 1, 1, 8, 8, 9]); // set 생성자가 이터러블 객체를 받음
console.log(set2); // Set(4) {1, 2, 8, 9} } | 중복값이 모두 제거됐다

 

이터러블인 문자열을 전달하면 각 문자가 개별 요소로 추가된다.

new Set('aabbccee'); // Set(4) {'a', 'b', 'c', 'e'}

 

❷ set.add(value) — value를 추가한 후 set 자신 반환

Set 객체에 이미 존재하는 값을 추가한다면 set.add() 메서드를 호출해도 아무 작업도 하지 않는다.

const set = new Set();
set.add(1); // Set(1) {1}
set.add(2); // Set(2) {1, 2}
set.add(1); // value가 중복되므로 아무 작업도 하지 않음

 

`set.add()` 메서드는 기본적으로 한 번에 하나의 요소만 추가할 수 있지만, 메서드 체이닝으로 여러 요소를 연속적으로 추가할 수 있다.

const set = new Set();
set.add(1).add(2); // Set(2) {1, 2}

 

❸set.delete(value) — value 제거

삭제 작업에 성공하면 true 반환, set에 value가 없어서 삭제 작업을 하지 않았다면 false 반환

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

 

❹ set.has(value) — set에 value가 존재하면 true, 존재하지 않으면 false 반환

const set = new Set([1, 2, 3, 4, 5]);
set.has(2); // true
set.has(8); // false

 

❺ set.size — set의 value 개수 반환

const set = new Set([1, 2, 3, 4, 5]);
set.size; // 5

 

❻ set.clear() — set 안의 모든 요소 제거

const set = new Set([1, 2, 3, 4, 5]);
set.size; // 5
set.clear();
set.size; // 0

 

Set 순회

Set 역시 Map처럼 삽입 순서를 기억하기 때문에 삽입한 순서대로 순회한다.

 

❶ set.keys() set.values() — 각 요소의 key/value를 반복할 수 있는 이터레이터 객체 반환

set.values()는 map과 호환성을 위해 만들어진 메서드. set.keys()와 동일하다.

const fruitSet = new Set(['oranges', 'apples']);
fruitSet.keys(); // SetIterator {'oranges', 'apples'}
const fruitArr = [...fruitSet]; // ['oranges', 'apples']
fruitSet === FruitArr; // false

 

❷ set.entries() — 각 요소의 [value, value]를 한 쌍으로 반복할 수 있는 이터레이터 객체 반환

map과 호환성을 위해 만들어진 메서드. 

const fruitSet = new Set(['oranges', 'apples']);
fruitSet.entries(); // SetIterator {'oranges' => 'oranges', 'apples' => 'apples'}
[...fruitSet.entries()]; // [['oranges', 'oranges'], ['apples', 'apples']]

 

❸ for of — set 값을 대상으로 반복 작업 수행할 때 사용 ⚡️

const fruitSet = new Set(['oranges', 'apples']);

for (const value of fruitSet) {
  console.log(value); // "oranges" "apples"
}

 

❹ forEach — set 값을 대상으로 반복 작업을 수행할 때 사용 ⚡️

set.forEach 의 첫번째 인자 value와 두번째 인자 valueAgain은 동일한 값이다. map.forEach 메서드가 value key map 3개의 인자를 받기 때문에 set.forEach 역시 3개의 인자를 받게끔 하여 호환성을 갖추게 한 것.

const fruitSet = new Set(['oranges', 'apples']);

fruitSet.forEach((value, valueAgain, set) => {
  console.log(value); // oranges apples
  console.log(valueAgain); // oranges apples
  console.log(set); // Set(2) {'oranges', 'apples'}...
});

 

Map / Set 사용 예제

---

문제 출처 JavaScript Info

 

중복값 제거

배열 요소의 중복값을 제거해주는 unique(arr) 함수 작성. 배열 요소는 다른 자료형이 될 수 있음.

function unique(arr) {
  // TODO
}

let values = [
  'Hare',
  'Krishna',
  'Hare',
  'Krishna',
  'Krishna',
  'Krishna',
  'Hare',
  'Hare',
  ':-O',
];

console.log(unique(values)); // `Hare, Krishna, :-O`만 출력되어야 함

function unique(arr) {
  return [...new Set(arr)]; // 혹은 return Array.from(new Set(arr))
}

let values = [
  'Hare',
  'Krishna',
  'Hare',
  'Krishna',
  'Krishna',
  'Krishna',
  'Hare',
  'Hare',
  ':-O',
];
console.log(unique(values));

 

애너그램 필터

애너그램은 단어나 문장을 구성하는 문자의 순서를 바꿔 다른 단어나 문장으로 만드는 놀이

nap — pan
ear — are — era
cheaters — hectares — teachers

 

에너그램으로 만든 단어를 걸러내는 aclean(arr) 함수 작성. 에너그램 그룹에서 한 단어는 남아있어야 함

function aclean(arr) {
  // TODO
}

let arr = ['nap', 'teachers', 'cheaters', 'PAN', 'ear', 'era', 'hectares'];
console.log(aclean(arr)); // "nap,teachers,ear"나 "PAN,cheaters,era"이 출력되어야 함

map은 동일한 key를 만나면 해당 `key`의 `value`를 덮어 쓴다. `sorted` 변수엔 현재 순회하는 `word`를 소문자로 바꾸고, 단어별로 쪼개고, 오름차순으로 정렬하고, 다시 문자열로 합친다. 

 

1. `nap` 문자열은 정렬 후 `anp`가 된다. `map`엔 `anp`(key), `nap`(value) 값을 저장한다.

2. `PAN` 문자열은 정렬 후 `anp`가 된다. 기존 저장했던 동일한 키 `anp`이므로, `anp`의 `value`를 덮어쓴다. 

3. 반복...

const sorted = word // PAN
  .toLowerCase() // pan
  .split('') // ['p','a','n']
  .sort() // ['a','n','p']
  .join(''); // anp

 

참고로 `sort()` 메서드는 아스키코드를 기준으로 정렬한다. 알파벳 `N`과 `n`을 비교하면 오름차순 정렬(작은 것 부터)일 때 `N`이 더 작다고 판단한다. `N`의 아스키코드는 `78`(10진수), `n`은 `110`(10진수)이기 때문.

function aclean(arr) {
  const map = new Map();

  for (const word of arr) {
    const sorted = word.toLowerCase().split('').sort().join('');
    map.set(sorted, word);
  }

  return [...map.values()];
}

let arr = ['nap', 'teachers', 'cheaters', 'PAN', 'ear', 'era', 'hectares'];
console.log(aclean(arr)); // [ 'PAN', 'hectares', 'era' ]

 

반복 가능한 객체 키

keys.push()가 작동되도록 수정

let map = new Map();
map.set('name', 'John');

let keys = map.keys();

// Error: keys.push is not a function
keys.push('more');

let map = new Map();
map.set('name', 'John');

let keys = [...map.keys()]; // 혹은 let keys = Array.from(map.keys())
keys.push('more'); // 2

 

레퍼런스

---

• https://ko.javascript.info/map-set
• 키기반의 컬렉션 - JavaScript | MDN
• [Javascript] Map and Set

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요