Map・Set・WeakRef — コレクションの使いどころ

const m = new Map();
m.set('name', 'Alice');
m.set(42, 'the answer');
m.set(true, 'yes');
 
console.log(m.get('name')); // "Alice"
console.log(m.get(42)); // "the answer"
console.log(m.size); // 3

const config = new Map([
  ['theme', 'dark'],
  ['lang', 'ja'],
  ['fontSize', 16],
]);
 
console.log(config.get('lang')); // "ja"

const metadata = new Map();
 
const btn = document.querySelector('#submit');
metadata.set(btn, { clickCount: 0, lastClicked: null });
 
// ボタンがクリックされたら
metadata.get(btn).clickCount++;

const m = new Map();
m.set(NaN, 'not a number');
m.set(NaN, 'overwritten');
console.log(m.size); // 1 — NaN同士は同じキーとして扱われる
console.log(m.get(NaN)); // "overwritten"

const m = new Map();
m.set({ id: 1 }, 'Alice');
m.set({ id: 1 }, 'Bob');
console.log(m.size); // 2 — 別オブジェクトなので別キー

const key = { id: 1 };
const m = new Map();
m.set(key, 'Alice');
console.log(m.get(key)); // "Alice"

const m = new Map([['name', 'Alice'], ['age', 25]]);
 
m.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// "name: Alice"
// "age: 25"

const m = new Map().set('a', 1).set('b', 2).set('c', 3);

const m = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'Tokyo'],
]);
 
for (const [key, value] of m) {
  console.log(`${key}: ${value}`);
}
// "name: Alice"
// "age: 25"
// "city: Tokyo"

console.log([...m.keys()]); // ["name", "age", "city"]
console.log([...m.values()]); // ["Alice", 25, "Tokyo"]
console.log([...m.entries()]); // [["name", "Alice"], ["age", 25], ["city", "Tokyo"]]

const m = new Map([['a', 1], ['b', 2], ['c', 3]]);
 
// values() を配列に変換してから filter
const big = [...m.values()].filter(v => v > 1);
console.log(big); // [2, 3]
 
// entries() を配列に変換してから map
const labels = [...m.entries()].map(([k, v]) => `${k}=${v}`);
console.log(labels); // ["a=1", "b=2", "c=3"]

// Objectだとプロトタイプのプロパティと衝突する危険がある
const obj = {};
obj['toString'] = 'oops';
// obj.toString() → TypeError!（プロトタイプのメソッドを上書きしてしまった）
 
// Mapならキー空間が完全にクリーン
const m = new Map();
m.set('toString', 'safe'); // 何の問題もない

const obj = { a: 1, b: 2, c: 3 };
const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);
 
// サイズ取得
Object.keys(obj).length; // 3（毎回キー配列を生成）
map.size; // 3（プロパティアクセスだけ、O(1)）
 
// キーの存在確認
'a' in obj; // true（プロトタイプチェーンも見てしまう）
Object.hasOwn(obj, 'a'); // true（安全だが冗長）
map.has('a'); // true（シンプル）
 
// 削除
delete obj.b; // true だが、もとから無いキーでも true
map.delete('b'); // true（実際に削除できたときだけ true）

const data = { name: 'Alice', age: 25, city: 'Tokyo' };
 
// Object → Map
const m = new Map(Object.entries(data));
 
// Map → Object
const obj = Object.fromEntries(m);
console.log(obj); // { name: "Alice", age: 25, city: "Tokyo" }

const words = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'];
 
const counter = new Map();
for (const word of words) {
  counter.set(word, (counter.get(word) ?? 0) + 1);
}
 
console.log(counter);
// Map(3) { "apple" => 3, "banana" => 2, "cherry" => 1 }

const cache = new Map();
 
function expensiveCalc(input) {
  if (cache.has(input)) {
    return cache.get(input);
  }
  const result = /* 重い計算 */ input * input;
  cache.set(input, result);
  return result;
}

const s = new Set();
s.add(1);
s.add(2);
s.add(1); // すでに存在するので無視される（エラーにはならない）
 
console.log(s); // Set(2) { 1, 2 }
console.log(s.size); // 2

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

const arr = [...sample]; // [1, 2, 3]
const arr2 = Array.from(sample); // [1, 2, 3]

// === での比較
console.log(NaN === NaN); // false（！）
 
// Setでの比較
const s = new Set();
s.add(NaN);
s.add(NaN);
console.log(s.size); // 1 — NaN同士を「同じ値」とみなす

const s = new Set();
s.add({ id: 1 });
s.add({ id: 1 });
console.log(s.size); // 2 — 見た目が同じでも別オブジェクトなので重複扱いにならない

const s = new Set().add(1).add(2).add(3);

const ids = [1, 3, 5, 3, 1, 7];
const unique = [...new Set(ids)]; // [1, 3, 5, 7]

const s = new Set(['a', 'b', 'c']);
 
for (const v of s) {
  console.log(v); // "a", "b", "c"
}

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
 
a.union(b); // Set { 1, 2, 3, 4 } — 和集合
a.intersection(b); // Set { 2, 3 }       — 積集合（共通要素）
a.difference(b); // Set { 1 }          — 差集合（aにだけある要素）
a.symmetricDifference(b); // Set { 1, 4 } — 対称差（どちらか片方にだけある要素）
a.isSubsetOf(b); // false — aはbの部分集合か
a.isSupersetOf(b); // false — aはbの上位集合か
a.isDisjointFrom(b); // false — 共通要素がないか

const privateData = new WeakMap();
 
function createUser(name) {
  const user = { name };
  privateData.set(user, { loginCount: 0, lastLogin: null });
  return user;
}
 
let alice = createUser('Alice');
privateData.get(alice); // { loginCount: 0, lastLogin: null }
 
alice = null; // alice への参照がなくなる
// → WeakMap内のエントリもGC時に自動的に消える

// DOM要素にメタデータを紐づける
const elementData = new WeakMap();
 
function trackElement(el) {
  elementData.set(el, { created: Date.now(), clicks: 0 });
}
 
// el がDOMから削除され、他の参照もなくなれば
// WeakMap内のエントリも自動的にGC対象になる

const visited = new WeakSet();
 
function processOnce(obj) {
  if (visited.has(obj)) return; // 処理済み
  visited.add(obj);
  // 処理...
}

let target = { data: 'important' };
const ref = new WeakRef(target);
 
ref.deref(); // { data: 'important' } — まだ生きている
target = null;
// GC後
ref.deref(); // undefined — 回収された

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue} が回収されました`);
});
 
let obj = { name: 'temp' };
registry.register(obj, 'temp object');
obj = null;
// GC発生時に "temp object が回収されました" と出力される（タイミングは不定）