JavaScript | データ型

JavaScript 型バグ練習帳（全10問）

各問題には：

• ❓ コード例（実行結果を考える）
• 🧩 ヒント（考え方の手がかり）
• ✅ 正解と解説（クリックで確認 or 下にスクロール）

第1問：NaNは自分と等しい？

const x = NaN;
console.log(x === NaN);

const x = NaN;
console.log(x === NaN);

🧩 ヒント：
「NaN」は「Not a Number（数ではない）」という特別な値。

✅ 答え：
false

📘 解説：
NaN はどんな値とも等しくありません。
判定には Number.isNaN(x) または Object.is(x, NaN) を使います。

第2問：typeof null の正体

console.log(typeof null);

console.log(typeof null);

🧩 ヒント：
これは JavaScript 初期の「歴史的バグ」と呼ばれています。

✅ 答え：
"object"

📘 解説：
null はプリミティブ値ですが、typeof null は "object" を返します。
これは修正できない過去の仕様ミスです。
nullチェックには x === null を使いましょう。

第3問：「==」のトラップ

console.log(0 == "0");
console.log(false == "0");
console.log("" == 0);

console.log(0 == "0");
console.log(false == "0");
console.log("" == 0);

🧩 ヒント：
== は「暗黙の型変換」をします。

✅ 答え：

true
true
true

📘 解説：
== は自動で型を変換して比較します。
安全に比較するには === を使いましょう。

第4問：undefined と null

let x;
console.log(x == null);
console.log(x === null);

let x;
console.log(x == null);
console.log(x === null);

🧩 ヒント：
== は「緩やかな比較」です。

✅ 答え：

true
false

📘 解説：
x は undefined ですが、== null は null と undefined の両方を true にします。
厳密に判定したいときは === null を使いましょう。

第5問：typeof [] の結果

console.log(typeof []);

console.log(typeof []);

🧩 ヒント：
配列はオブジェクトの一種？

✅ 答え：
"object"

📘 解説：
typeof [] は "object"。
配列かどうかを判定したい場合は Array.isArray([]) を使いましょう。

第6問：new Boolean(false) の罠

const b = new Boolean(false);
if (b) console.log("trueです");

const b = new Boolean(false);
if (b) console.log("trueです");

🧩 ヒント：
new を使うと何が返る？

✅ 答え：
"trueです" と出力される。

📘 解説：
new Boolean(false) は オブジェクト（truthy）になります。
プリミティブの false を使うべきです。

第7問：オブジェクトのコピー

const a = { value: 10 };
const b = a;
b.value = 20;
console.log(a.value);

const a = { value: 10 };
const b = a;
b.value = 20;
console.log(a.value);

🧩 ヒント：
オブジェクトは参照で渡される。

✅ 答え：
20

📘 解説：
b = a は同じオブジェクトを参照します。
コピーしたい場合は const b = { ...a }; とします。

第8問：0.1 + 0.2 === 0.3 ?

console.log(0.1 + 0.2 === 0.3);

console.log(0.1 + 0.2 === 0.3);

🧩 ヒント：
コンピュータの数値は「2進数で近似表現」。

✅ 答え：
false

📘 解説：
浮動小数点の誤差により、0.1 + 0.2 は実際には 0.30000000000000004 になります。
比較には Math.abs(a - b) < Number.EPSILON を使います。

第9問：BigIntとNumberの演算

console.log(10n + 5);

console.log(10n + 5);

🧩 ヒント：
BigInt（n付き）は別型。

✅ 答え：
TypeError 発生。

📘 解説：
BigInt と Number は混ぜて演算できません。
どちらかに統一して変換する必要があります。

第10問：JSON.stringify の落とし穴

console.log(JSON.stringify({ a: undefined, b: Symbol(), c: () => {} }));

console.log(JSON.stringify({ a: undefined, b: Symbol(), c: () => {} }));

🧩 ヒント：
JSONにできないものはどうなる？

✅ 答え：
"{}"

📘 解説：
undefined, Symbol, function はシリアライズ時に無視されます。
必要なら別フォーマットで保存しましょう。

総まとめクイズ