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

JavaScriptで変数がundefinedの場合のif文で判定する方法を３パターンご紹介します。

Contents

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

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>

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>

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>

正確に比較するなら「typeofを使って文字列”undefined”と比較」だと思いますが、正直どのパターンを使っても良いと思います。