【JavaScript】boolean・undefined・null・typeofの挙動をコード付きで整理する

1. はじめに

JavaScriptのデータ型について、動画教材で9レッスン分まとめて学習しました。
boolean・undefined・null はなんとなく知っていたものの、「どう使い分けるのか」「if に渡したときにどう動くのか」があいまいだったので、コード例を交えながら整理します。

2. JavaScriptのデータ型

今回のレッスンで登場した主なデータ型を確認します。それぞれの型は役割が異なるので、まずは全体像を把握しておくと理解しやすいと感じました。

データ型	例	説明
string	"Hello"	文字列
number	42	数値
boolean	true / false	真偽値
undefined	undefined	値が未定義
null	null	値が存在しないことを明示
object	{} / []	オブジェクト・配列など

3. 真偽値（boolean）

boolean は true か false の2つしか値を持たないデータ型です。条件分岐やフラグ管理など、さまざまな場面で活用されます。

3.1 基本的な使い方

const isLoggedIn = true;
const hasError = false;

console.log(isLoggedIn); // true
console.log(hasError);   // false

出力結果

true
false

解説
変数名を is〜 や has〜 のようにすると、真偽値であることが伝わりやすい命名になるようです。

3.2 DOMと組み合わせた例

boolean は DOM 操作のフラグとしても使えます。クリックのたびに表示・非表示を切り替えるような処理に活用できます。

<p id="message">こんにちは</p>
<button id="btn">切り替え</button>

const message = document.getElementById("message");
const btn = document.getElementById("btn");

let isVisible = true;

btn.addEventListener("click", () => {
  isVisible = !isVisible;
  message.style.display = isVisible ? "block" : "none";
});

解説
ボタンをクリックするたびに isVisible が反転し、p 要素の表示・非表示が切り替わります。!isVisible で真偽値を反転させている点がポイントです。

4. ! で真偽値を反転させる

!（論理NOT演算子）を使うと、真偽値を反転できます。条件分岐と組み合わせると、読みやすいコードを書くのに役立つようです。

4.1 基本的な反転

console.log(!true);  // false
console.log(!false); // true

出力結果

false
true

4.2 条件分岐での活用

let isOpen = false;

if (!isOpen) {
  console.log("閉まっています");
}

出力結果

閉まっています

解説
isOpen が false なので、!isOpen は true となり、if ブロックが実行されます。

5. 早期リターン

早期リターン（アーリーリターン）とは、関数の中で条件を満たさない場合に return で早めに処理を抜けるパターンのことです。ネストが深くなるのを防いで、読みやすいコードになるとされています。

5.1 早期リターンを使わない例

function greet(name) {
  if (name) {
    console.log(`こんにちは、${name}さん`);
  } else {
    console.log("名前を入力してください");
  }
}

5.2 早期リターンを使った例

function greet(name) {
  if (!name) {
    console.log("名前を入力してください");
    return;
  }
  console.log(`こんにちは、${name}さん`);
}

greet("");      // "名前を入力してください"
greet("Taro");  // "こんにちは、Taroさん"

出力結果

名前を入力してください
こんにちは、Taroさん

解説
条件が合わない場合を先に return で弾くことで、メインの処理をフラットに書けるようになります。5.1 の書き方と見比べると、ネストが減って読みやすくなっていることがわかりました。

6. Truthy・Falsy（値を真偽値として使う）

JavaScriptでは、if の条件式に true / false 以外の値を渡すこともできます。false として扱われる値を Falsy、true として扱われる値を Truthy と呼ぶようです。

6.1 Falsyな値の一覧

以下の値は if の中で false として扱われます。

if (false)     { } // false
if (0)         { } // 数値の0
if ("")        { } // 空文字列
if (null)      { } // null
if (undefined) { } // undefined
if (NaN)       { } // NaN（Not a Number）

これら以外の値はすべて Truthy（true として扱われる）とのことです。

6.2 コード例で確認する

const name = "";

if (name) {
  console.log(`こんにちは、${name}さん`);
} else {
  console.log("名前がありません");
}

出力結果

名前がありません

解説
空文字列 "" は Falsy なので、else ブロックが実行されます。Falsy を活用すると条件式をシンプルに書けますが、null と undefined を区別したいときは === を使うのが安全なようです。

7. undefined

undefined は「値がまだ定義されていない」状態を表すデータ型です。意図せず発生することが多いので、どんなときに現れるか把握しておくと良さそうです。

7.1 undefined になるケース

let x;
console.log(x); // undefined（宣言だけして代入していない）

function greet() {
  // return がない
}
console.log(greet()); // undefined

出力結果

undefined
undefined

解説
変数を宣言しただけで値を代入しない場合や、return のない関数の戻り値が undefined になるようです。

7.2 undefined のチェック

let value;

if (value === undefined) {
  console.log("値がありません");
}

出力結果

値がありません

解説
undefined は Falsy でもあるので if (!value) でも検知できます。ただし、null と区別したい場面では === undefined で厳密に比較するほうが安全なようです。

8. null

null は「意図的に値が存在しないことを示す」データ型です。undefined と混同しやすいので、違いを整理しておきます。

8.1 undefined との違い

let a;          // undefinedは「値が未設定」
let b = null;   // nullは「意図的に空であることを明示」

console.log(a); // undefined
console.log(b); // null

出力結果

undefined
null

解説
使い分けの目安として、「まだ値が決まっていない」なら undefined、「値がないことを明示したい」なら null を使うと理解しました。

8.2 null のチェック

const value = null;

if (value === null) {
  console.log("nullです");
}

出力結果

nullです

解説
null は Falsy なので if (!value) でも検知できますが、undefined と区別したい場合は === null で厳密比較するのが安全なようです。

9. typeof でデータ型を調べる

typeof 演算子を使うと、値のデータ型を文字列で取得できます。デバッグ時などに型を確認したいときに便利ですが、注意点もあります。

9.1 基本的な使い方

console.log(typeof "Hello");    // "string"
console.log(typeof 42);         // "number"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof {});         // "object"

出力結果

string
number
boolean
undefined
object

9.2 配列に関する注意点

console.log(typeof []); // "object"

出力結果

object

解説
配列も typeof では "object" と返ります。配列かどうかを判定したい場合は Array.isArray() を使うのが正しいようです。

console.log(Array.isArray([]));  // true
console.log(Array.isArray({}));  // false

9.3 null に関する注意点

console.log(typeof null); // "object"

出力結果

object

解説
null は typeof で "object" と返りますが、これはJavaScriptの仕様上のバグとして知られているようです。null かどうかを判定する場合は === null で確認する必要があります。

const value = null;
console.log(value === null); // true

まとめ

今回学んだ内容を振り返ります。

項目	ポイント
boolean	true / false の2値。フラグ管理に便利
! 演算子	真偽値を反転する
早期リターン	条件を満たさない場合に早めに return して処理を抜ける
Falsy な値	false / 0 / "" / null / undefined / NaN
undefined	値が未定義の状態（意図しない空）
null	値がないことを意図的に示す
typeof	型を文字列で返す。null と配列は "object" になる点に注意

特に Falsy の一覧と typeof の注意点は実際のコードでハマりやすいポイントだと感じたので、しっかり覚えておきたいと思います。null と undefined の使い分けも「なんとなく」だった部分が整理できたので、今後は意識して使い分けていきたいです。