Maps & Sets

📌 Maps & Sets

📖 개요

1. Arrays

   • Store (nested) data of any kind and length, 중첩된 데이터도 가질 수 있는데 종류, 길이 자료형 상관없다.
   • Iterable이고 많은 특별한 배열 메서드를 사용할 수 있다.
   • 요소의 순서가 보장된다. 중복도 허용하고 0에서부터 인덱스가 시작하여 요소에 접근이 가능하다.

2. Sets

   • Store (nested) data of any kind and length
   • Iterable이고 몇 개의 특별한 set 메서드를 사용 가능하다. 배열 메서드는 sets에서 지원하지 않는다.
   • 요소의 순서가 보장되지 않는다. 중복도 허용하지 않고 인덱스를 기반으로 접근하지 않는다.

3. Maps

   • Store key-value data of any kind and length, and key values are allowed.
   • Iterable이고 특별한 map 메서드를 사용한다.
   • 순서가 보장이 되고 중복된 키는 허용되지 않지만 Maps에서 값은 중복될 수 있다. 그리고 키를 이용해 값에 접근한다.

📖 Sets

Set은 데이터 구조로 고유한 값을 관리할 때 유용하다.

const ids = new Set([1, 2, 3]); // 어떤 Iterable도 가능. 배열, 또다른 Set, 노드리스트 등
console.log(ids.has(1));

for (const entry of ids.entries()) {
  console.log(entry);
  //(2) [1, 1]
  //(2) [2, 2]
  //(2) [3, 3]
}
// => ids의 값을 변경한 뒤 다시 확인해보자!
const ids = new Set(["Hi", "from", "set!"]);
for (const entry of ids.entries()) {
  console.log(entry[0]);
  //(2) ['Hi', 'Hi']
  //(2) ['from', 'from']
  //(2) ['set!', 'set!']
}

if (ids.has("Hi")) {
  ids.delete("Hi");
}
console.log(ids); //

• has() : 데이터 저장소로부터 어떤 값을 포함하고 있는지 아닌지를 알려줌 → true/false 반환
• entries() : Iterable을 반환. → for문에서 사용가능하다.
  • 리턴된 값을 보면, 값이 두 개씩 반환되었다. → entry 당 2개의 요소.
• delete() : Set에서 요소 삭제

Set 더 자세히 알아보기

📖 Maps

const person1 = { name: "Max" };
const person2 = { name: "Manuel" };

const personData = new Map([[person1, [{ date: "yesterday", price: 10 }]]]);
console.log(personData);
// Map(1) {{…} => Array(1)}
// [[Entries]]
// 0: {Object => Array(1)}
// key: {name: 'Max'}
// value: Array(1)
//     0: {date: 'yesterday', price: 10}
//     length: 1
//     [[Prototype]]: Array(0)
// size: 1

console.log(personData.get(person1));
//[{…}]
//0:
//    date: "yesterday"
//    price: 10
//    [[Prototype]]: Object
//length: 1
//[[Prototype]]: Array(0)

//========================== Map의 set() ==========================
personData.set(person2, [{ date: "two weeks ago", price: 100 }]);
console.log(personData);

//========================== Map의 entries() ==========================
for (const entry of personData.entries()) {
  console.log(entry);
}

//========================== Map의 배열구조 분해 이용 ==========================
for (const [key, value] of personData.entries()) {
  console.log(key, value);
}

for (const key of personData.keys()) {
  console.log(key);
}
// {name: 'Max'}
// {name: 'Manuel'}


for (const value of personData.values()) {
  console.log(value);
} // value값만 나옴.

console.log(personData.size) // 2 => Maps안에 키-쌍이 2개 있기 때문

Map 더 자세히 알아보기

📖 Maps vs. 객체

1. Maps

   • 어떤 값, 자료형이라도 키로 사용할 수 있다. 객체, 문자열, 숫자 등을 키로 사용 가능
   • 큰 데이터에서의 성능이 객체보다 좋다.
   • 데이터를 자주 추가하거나 삭제할 때 더 좋은 성능을 지닌다.

2. Objects

   • 문자열, 숫자, 심볼형만 키로 사용가능 → 유연성이 떨어짐
   • 작거나 중간 크기의 데이터에 적합
   • 일반적으로 더 쉽고 빠르게 만들 수 있다.

📖 WeakSet 이해하기

• WeakSet의 경우 정확히 객체 데이터를 저장해야 한다.
• WeakSet은 entries()가 보이지 않는데, 이는 WeakMap과 같이 내부적으로만 객체를 저장할 수 있으므로 실제로는 해당 객체를 지우는 것이다.
• ChatGPT
  • 한 참조(Weak References): WeakSet은 객체에 대한 약한 참조만을 유지합니다. 이는 객체가 WeakSet에 저장되어 있는 동안 다른 곳에서 해당 객체에 대한 참조가 없다면, 해당 객체는 가비지 컬렉션의 대상이 될 수 있습니다.
  • 반복 가능성(Iterable) 제한: WeakSet은 반복 가능한(iterable) 메서드를 제공하지 않습니다. 따라서 WeakSet 내부의 객체 목록에 직접적으로 접근하거나 반복할 수 없습니다. WeakSet은 단순히 객체의 존재 여부를 확인하거나 제거하는 데 사용됩니다.
  • 삭제 없음: WeakSet에는 요소를 직접적으로 제거하는 메서드가 없습니다. 객체가 가비지 컬렉션의 대상이 되면 자동으로 제거됩니다.

let person = { name: 'Max' };
const persons = new WeakSet();
persons.add(person);

console.log(persons)

• 왜 이런 기능을 쓰는가?
  • 데이터를 더이상 사용하지 않을 때에는 해당 데이터가 가비지 컬렉션으로 수거하도록 해야한다.
  • 만약 Set을 사용한다면, 어떤 객체를 Set에 포인터로 입력을 하게 되면 그 객체를 더이상 사용하지 않아도 메모리에서 지울 수 없다.
  • WeakSet을 사용하는데 해당 객체를 지정해 놓은 모든 위치를 리셋했다면 더이상 Set도 해당 객체를 저장하지 않고 삭제한다. → WeakSet은 가비지 컬렉션을 Set에 포함되어 있는 해당 항목을 직접 삭제해서 더 이상 코드의 일부로 남아있지 않게 한다.

WeakSet 더 자세히 알아보기

📖 WeakMap 이해하기

• 메모리를 좀 더 효과적으로 관리할 수 있는 방법이며 특정 시점에 삭제되어도 무방한 메모리가 있다고 판단한는 경우에 WeakMap, WeakSet을 사용하면 된다.

const personData = new WeakMap();
personData.set(person, 'Extra info')

person = null;
console.log(personData)

WeakMap 더 자세히 알아보기