JavaScriptで変数がundefinedの場合のif文で判定する方法｜DAD UNION

JavaScript初心者の方に向けて、変数がundefinedかどうかを確認する方法を3つの具体例でご紹介します。
それぞれの方法のメリットや注意点も解説しますので、ご自身のケースに合ったものを選んで活用してください。

Contents

if文で判定結果を出力するCSSの記述
変数がundefinedの場合のif文で判定するJavaScriptの記述
JavaScriptで変数がundefinedの場合、if文で判定するデモページ
まとめ

if文で判定結果を出力するCSSの記述

まず、if文の判定結果を表示するために以下のCSSを使用します。出力結果に色を付けて視覚的に確認しやすくしています。
if文の判定結果を出力する3パターン（.txt1、.txt2、.txt3）を用意しました。

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1,h2{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
h2{
  font-size: 20px;
  padding-bottom: 30px;
}
div{
  padding-bottom: 20px;
}
.txt1{
  color: #007FFF;
}
.txt2{
  color: #FF4D4D;
}
.txt3{
  color: #FF9326;
}
</style>

変数がundefinedの場合のif文で判定するJavaScriptの記述

undefinedとなる変数「test1」を用意しました。

グローバル変数「undefined」と比較

※グローバル変数「undefined」と変数「test1」をif文で比較する。変数「test1」がundefinedの場合、ローバル変数「undefined」と比較すると一致します。ただし、グローバル変数「undefined」は変数なので書き換え可能なのであまりお勧めしません。

<script type="text/javascript">
var test1;

if (test1 === undefined) {
  document.write('<div class="txt1">変数 test1 は '+test1+' です。 ｜ グローバル変数 undefined と比較 ｜ if (test1 === undefined) {～ </div>');
}
</script>

【この方法のメリット】

記述がシンプルで分かりやすい
直感的に使える

【この方法のデメリット】

undefinedが書き換えられている場合、意図しない結果になる可能性がある

typeofを使って文字列”undefined”と比較

※typeof演算子を使って変数の型を文字列として出力させます。変数「test1」がundefinedの場合「typeof test1」の出力結果は”undefined”という文字列が出力されます。それを利用します。

<script type="text/javascript">
var test1;

if (typeof test1 === "undefined") {
  document.write('<div class="txt2">変数 test1 は '+test1+' です。 ｜ 文字列 "undefined" と比較 ｜ if (typeof test1 === "undefined") {～ </div>');
}
</script>

【この方法のメリット】

安全で信頼性が高い
undefinedが書き換えられていても問題ない

【この方法のデメリット】

記述がやや長くなる

nullと比較

※undefinedの変数「test1」の場合、if文でnullと比較すると一致します。ただし、変数「test1」がnullの場合も一致します。

<script type="text/javascript">
var test1;

if (test1 == null) {
  document.write('<div class="txt3">変数 test1 は '+test1+' です。 ｜ null と比較 ｜ if (test1 == null) {～ </div>');
}
</script>