JavaScript | 第11章「キー付きコレクション」

javascrpit JavaScript
スポンサーリンク

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
JavaScript

Map のキーは一意なので、同じ "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
JavaScript

Set は重複を許さないため、23 は重複しても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]
JavaScript

Object のキーは自動的に文字列化されますが、Map はそのまま数値キーを保持します。

Q5. 配列 → Set → 配列で重複除去

次のコードの出力を予想してください。

const items = ["apple", "banana", "apple", "orange", "banana"];
const unique = [...new Set(items)];
console.log(unique);
JavaScript

解答と解説:

["apple", "banana", "orange"]
JavaScript

Set に通すだけで重複を削除できます。
[...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
JavaScript

Map はキーを挿入した順番を保持します。

上級編: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

解答と解説:

🍰
JavaScript

WeakMap はオブジェクトをキーにしてデータを安全に保持できます。
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(または存在しない)
JavaScript

WeakSet はオブジェクトが他で参照されなくなるとガベージコレクションで削除される可能性があります。
したがって、obj = null で参照を切ると WeakSet 内からも消える仕組みです。

Q9. SameValueZero

const s = new Set();
s.add(NaN);
console.log(s.has(NaN));
JavaScript

解答と解説:

true
JavaScript

Set / 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);
JavaScript

Map を使えばオブジェクトをキーにできるため、id だけでなくオブジェクトそのものを識別子にできます。

まとめ:レベル別ポイント

レベルできるようになること
初級Map / Set の基本操作を理解する
中級Object との違いや配列変換をマスターする
上級WeakMap / WeakSet のメモリ特性を理解する

タイトルとURLをコピーしました