JavaScript:キー付きコレクション 練習問題セット
(対象:Map / WeakMap / Set / WeakSet)
初級編:基本操作を理解しよう
Q1. Mapの基本
次のコードの出力を予想してください。
const fruits = new Map();
fruits.set("apple", 3);
fruits.set("banana", 5);
fruits.set("apple", 10);
console.log(fruits.get("apple"));
console.log(fruits.size);
JavaScript解答と解説:
(1) 10
(2) 2
JavaScriptMap のキーは一意なので、同じ "apple" に再代入すると上書きされます。
最終的に "apple" と "banana" の2件だけ。
Q2. Setの重複除去
次のコードの出力を予想してください。
const numbers = new Set([1, 2, 2, 3]);
numbers.add(3);
numbers.add(4);
console.log(numbers.size);
JavaScript解答と解説:
4
JavaScriptSet は重複を許さないため、2 と 3 は重複しても1回ずつしかカウントされません。
Q3. Mapの存在チェック
const prices = new Map();
prices.set("pen", 100);
prices.set("book", 300);
console.log(prices.has("book"));
console.log(prices.get("pencil"));
JavaScript解答と解説:
(1) true
(2) undefined
JavaScript存在しないキーを .get() すると undefined が返ります。
中級編:応用・使い分けを考えよう
Q4. ObjectとMapの違い
次の2つのコードの出力を比べてみよう。
// A: Object
const obj = {};
obj[5] = "five";
console.log(Object.keys(obj));
// B: Map
const map = new Map();
map.set(5, "five");
console.log([...map.keys()]);
JavaScript解答と解説:
A: ["5"]
B: [5]
JavaScriptObject のキーは自動的に文字列化されますが、Map はそのまま数値キーを保持します。
Q5. 配列 → Set → 配列で重複除去
次のコードの出力を予想してください。
const items = ["apple", "banana", "apple", "orange", "banana"];
const unique = [...new Set(items)];
console.log(unique);
JavaScript解答と解説:
["apple", "banana", "orange"]
JavaScriptSet に通すだけで重複を削除できます。[...set] で配列に戻せるのもポイント。
Q6. Mapの順序
const order = new Map();
order.set("first", 1);
order.set("second", 2);
order.set("third", 3);
for (const [k, v] of order) {
console.log(k);
}
JavaScript解答と解説:
first
second
third
JavaScriptMap はキーを挿入した順番を保持します。
上級編:WeakMap / WeakSet の理解を深める
Q7. WeakMapの用途
const privateData = new WeakMap();
function createUser(name, secret) {
const obj = { name };
privateData.set(obj, secret);
return obj;
}
const user = createUser("Alice", "🍰");
console.log(privateData.get(user));
JavaScript解答と解説:
🍰
JavaScriptWeakMap はオブジェクトをキーにしてデータを安全に保持できます。user がメモリから削除されれば、自動的にエントリも破棄されます。
Q8. WeakSet の特性
const ws = new WeakSet();
let obj = {};
ws.add(obj);
console.log(ws.has(obj));
obj = null;
console.log(ws.has(obj));
JavaScript解答と解説:
(1) true
(2) false(または存在しない)
JavaScriptWeakSet はオブジェクトが他で参照されなくなるとガベージコレクションで削除される可能性があります。
したがって、obj = null で参照を切ると WeakSet 内からも消える仕組みです。
Q9. SameValueZero
const s = new Set();
s.add(NaN);
console.log(s.has(NaN));
JavaScript解答と解説:
true
JavaScriptSet / Map の内部では NaN は「自分自身と等しい」とみなされます(SameValueZero)。
おまけ:チャレンジ問題
Q10. 複合キーでデータを管理する
ユーザーオブジェクトをキーにして「ログイン状態」を管理してください。
// ▼ここを完成させよう
const loginStatus = new Map();
const user1 = { id: 1, name: "Alice" };
const user2 = { id: 2, name: "Bob" };
// それぞれログイン済み状態を保存
// ...
console.log(loginStatus.get(user1)); // → true
console.log(loginStatus.get(user2)); // → false
JavaScript解答例:
loginStatus.set(user1, true);
loginStatus.set(user2, false);
JavaScriptMap を使えばオブジェクトをキーにできるため、id だけでなくオブジェクトそのものを識別子にできます。
まとめ:レベル別ポイント
| レベル | できるようになること |
|---|---|
| 初級 | Map / Set の基本操作を理解する |
| 中級 | Object との違いや配列変換をマスターする |
| 上級 | WeakMap / WeakSet のメモリ特性を理解する |
