JavaScript | 変数の値が未定義値（undefined）か判定する

では、JavaScriptで undefinedを活用した簡単プログラム例 を作ってみましょう。
初心者向けに「値が入っているかどうかで動作を変える」例です。

例：名前が入力されているか確認するプログラム

// ユーザーの名前を格納する変数
let userName;

// 名前が入力されているか確認
if (typeof userName === 'undefined') {
  console.log('名前がまだ入力されていません。');
} else {
  console.log('こんにちは、' + userName + 'さん！');
}

// 名前を設定して再度確認
userName = 'たろう';

if (typeof userName === 'undefined') {
  console.log('名前がまだ入力されていません。');
} else {
  console.log('こんにちは、' + userName + 'さん！');
}

// ユーザーの名前を格納する変数
let userName;

// 名前が入力されているか確認
if (typeof userName === 'undefined') {
  console.log('名前がまだ入力されていません。');
} else {
  console.log('こんにちは、' + userName + 'さん！');
}

// 名前を設定して再度確認
userName = 'たろう';

if (typeof userName === 'undefined') {
  console.log('名前がまだ入力されていません。');
} else {
  console.log('こんにちは、' + userName + 'さん！');
}

実行結果

名前がまだ入力されていません。
こんにちは、たろうさん！

ポイント解説

1. 変数 userName は最初に値が入っていないので undefined です。
2. typeof userName === 'undefined' で値の有無をチェックできます。
3. 名前を代入すると、undefined ではなくなるので「こんにちは、○○さん！」と表示されます。

💡 イメージ

「箱（変数）が空っぽ → 名前未入力」
「箱にものが入った → 名前あり」

例題で練習

1. let score; の状態で、値が入っているか確認するプログラムを書いてみよう。
2. score に数値を代入したあと、もう一度チェックして、値が入っていることを確認してみよう。