JavaScript - Map , Set

이번 포스팅에서는 자바스크립트에서 제공하는 자료구조 중 하나인 Map(맵)과 Set(셋)에 대해 살펴보도록 하자.

 

 

< 목차 >

1. Map
2. Set

 

 

1. Map 

Map(맵) 객체는 키(key)와 값(value)의 쌍으로 이루어진 컬렉션이다. 키(key)가 있는 데이터를 저장한다는 점에서 객체(Object)와 유사하지만 기존 객체와 달리 키로 어떤 자료형이든 사용할 수 있다는 점에서 차이가 있다.

👉 Map 객체의 생성 

• Map 객체는 Map 생성자 함수로 생성한다.
• Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다.
• Map 생성자 함수는 이터러블(iterable)을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

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

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

참고로 Map 생성자 함수의 인수로 전달한 이터러블에 중복된 키를 갖는 요소가 존재하면 값이 덮어써진다. 따라서 Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없다.

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

👉 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  :  요소의 개수 반환

const map = new Map();

map.set("1", "str1"); // 문자형 키
map.set(1, "num1"); // 숫자형 키
map.set(true, "bool1"); // 불리언 키

// 맵은 키의 타입을 변환시키지 않고 그대로 유지한다.
console.log(map.get(1)); // 'num1'
console.log(map.get("1")); // 'str1'

console.log(map.size); // 3

Map은 객체와 달리 키를 문자형으로 변환하지 않는다. 또한 키에 자료형 제약이 없기 때문에 객체(Object)를 키(key)로 사용할 수 있다. 객체를 키로 사용할 수 있다는 것은 Map의 중요한 기능 중 하나이다.

const bitkunstBlog = { url: "https://bitkunst.tistory.com" };
const hitsMap = new Map();

hitsMap.set(bitkunstBlog, 100000);
console.log(hitsMap); // Map(1) { { url: 'https://bitkunst.tistory.com' } => 100000 }

👉 Map의 요소 순회 

• map.keys()  :  Map 객체에서 요소의 키를 값으로 갖는 이터러블이면서 이터레이터인 객체 반환
• map.values()  :  Map 객체에서 요소의 값을 값으로 갖는 이터러블이면서 이터레이터인 객체 반환
• map.entries()  :  Map 객체에서 요소의 [키, 값]을 한 쌍으로 갖는 이터러블이면서 이터레이터인 객체 반환
• map.forEach()  :  Map은 배열과 유사하게 내장 메소드 forEach()를 지원

const lee = { name: "lee" };
const jang = { name: "jang" };
const map = new Map();

map.set(lee, "FE");
map.set(jang, "BE");

for (const item of map) {
    console.log(item); // [ { name: 'lee' }, 'FE' ], [ { name: 'jang' }, 'BE' ]
}

// 키를 대상으로 순회
for (const key of map.keys()) {
    console.log(key); // { name: 'lee' }, { name: 'jang' }
}
console.log(map.keys()); // [Map Iterator] { { name: 'lee' }, { name: 'jang' } }

// 값을 대상으로 순회
for (const value of map.values()) {
    console.log(value); // FE, BE
}
console.log(map.values()); // [Map Iterator] { 'FE', 'BE' }

// [키, 값] 쌍을 대상으로 순회
for (const entry of map.entries()) {
    console.log(entry); // [ { name: 'lee' }, 'FE' ], [ { name: 'jang' }, 'BE' ]
}
console.log(map.entries()); // [Map Entries] { [ { name: 'lee' }, 'FE' ], [ { name: 'jang' }, 'BE' ] }

👉 Map ↔ 객체 

• Object.entries()를 활용해 객체를 Map으로 바꿀 수 있다
• Object.fromEntries()를 활용해 Map을 객체로 바꿀 수 있다

Object.entries() 메소드는 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환한다. Object.entries()를 활용하면 일반적인 객체를 가지고 Map을 만들 수 있다.

const obj = {
    name: "bitkunst",
    job: "developer",
};

const map = new Map(Object.entries(obj));
console.log(map); // Map(2) { 'name' => 'bitkunst', 'job' => 'developer' }
console.log(map.get("name")); // bitkunst

반대로 Map을 객체로 바꾸기 위해서는 Object.fromEntries() 메소드를 활용하면 된다. Object.fromEntries() 메소드는 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔주기 때문이다. Map에 저장되어 있는 자료를 객체 형태로 전달해야할 필요가 있을 때 다음과 같이 Map을 일반 객체로 변환할 수 있다.

const map = new Map();
map.set("sushi", 1);
map.set("pasta", 2);
map.set("steak", 3);

const obj = Object.fromEntries(map.entries());
console.log(obj); // { sushi: 1, pasta: 2, steak: 3 }

 

 

 

2. Set 

Set(셋)은 중복을 허용하지 않는 값을 모아놓은 컬렉션이다. 수학에서의 집합(set)과 그 특성이 일치한다고 봐도 무방하다. 즉, Set 객체는 중복되지 않는 유일한 값들의 집합이며 수학적 집합을 구현하기 위한 자료구조이다.

👉 Set 객체의 생성 

• Set 객체는 Set 생성자 함수로 생성한다.
• Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.
• Set 생성자 함수는 이터러블(iterable)을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.

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

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

👉 Set의 주요 메소드 및 프로퍼티 

• set.add(value)  :  값을 추가하고 set 자신을 반환
• set.delete(value)  :  값을 삭제, 호출 시점에 set 내에 값이 있어서 삭제에 성공하면 true, 아니면 false 반환
• set.has(value)  :  set 내에 값이 존재하면 true, 존재하지 않으면 false 반환
• set.clear()  :  set 안의 모든 값 제거
• set.size  :  set 안에 존재하는 값의 개수 반환

const set = new Set();

const lee = { name: "lee" };
const jang = { name: "jang" };
const kim = { name: "kim" };

set.add(lee);
set.add(jang);
set.add(kim);
set.add(lee);
set.add(jang);

// set에는 중복된 값이 들어가지 않는다.
console.log(set.size); // 3
console.log(set); // Set(3) { { name: 'lee' }, { name: 'jang' }, { name: 'kim' } }

👉 Set의 값 순회 

• set.keys()  :  Set 내의 모든 값을 포함하는 이터러블이면서 이터레이터인 객체 반환
• set.values()  :  set.keys() 와 동일한 기능, Map과의 호환성을 위해 만들어진 메소드
• set.entries()  :  Set 내의 각 값을 이용해 만든 [값, 값]을 한 쌍으로 갖는 이터러블이면서 이터레이터인 객체 반환, Map과의 호환성을 위해 만들어진 메소드
• set.forEach()  :  Set은 배열과 유사하게 내장 메소드 forEach()를 지원

const set = new Set(["sushi", "pasta", "steak", "sushi"]);

for (const item of set) {
    console.log(item); // sushi, pasta, steak
}

for (const key of set.keys()) {
    console.log(key); // sushi, pasta, steak
}
console.log(set.keys()); // [Set Iterator] { 'sushi', 'pasta', 'steak' }

for (const value of set.values()) {
    console.log(value); // sushi, pasta, steak
}
console.log(set.values()); // [Set Iterator] { 'sushi', 'pasta', 'steak' }

for (const entry of set.entries()) {
    console.log(entry); // [ 'sushi', 'sushi' ], [ 'pasta', 'pasta' ], [ 'steak', 'steak' ]
}
console.log(set.entries()); // [Set Entries] { [ 'sushi', 'sushi' ], [ 'pasta', 'pasta' ], [ 'steak', 'steak' ] }