【JavaScript】少し特殊な挙動をとるundefined値の判定

JavaScriptでは、初期化されていない変数にundefinedという値が入る。こいつがちょっと特殊な挙動をとるため、判定方法を備忘録としてまとめておく。

思いついたり調べたりした6パターン

1. a === undefined

jsでは、グローバル変数undefinedが用意されている(中身はもちろんundefined)ため、これで比較できる。ただし、undefinedは単なる変数。やろうと思えばこういうこともできる。

undefined = "hoge";
var a;

if (a === undefined) {
	// こっちにはこない
} else {
	// 条件式は、「undefined === "hoge"」となり、falseになる
	alert("aはundefinedじゃない???")
}

undefinedを上書きすることなんてないと信じたいが、バグの元になりそうなので、このやり方はやめたほうが良いかも。

まぁESとか使ってたら、変更するなと文句は言われる。
ES6ならこんなエラー。

Read-only global 'undefined' should not be modified 

2. typeof a === “undefied“

typeofを使うやり方。undefined値にtypeof演算子を使うと必ず"undefined"という文字列が返るため、それと比較する。

if (typeof a === "undefined") {
  alert("aはundefined");
}

ググるとこのやり方をしていることが多いように見えた。

3.そのままBooleanとして判定する

undefined値をそのままif文に打ち込むと、常にfalseを返す。これを利用する。

ただし、falseを返すのはundefined値だけではない点に注意。0とかnullとかもfalseを返す。

if (!a) { // !を使うとundefinedの時、trueを返す
  alert("aはfalseか0かnullかundefinedか…");
}

undefinedを判定したい」ってときには、あんまり使うことなさそう。

なんかよく分からんけど、想定外の値をまとめて判定したいってんなら使えるかも?

4. == nullで代用する

nullはundefinedと違って予約語。nullはいつでもnull。

3と同じく、完全な判定には使えないが、多少は厳密。実際、nullundefiedを区別する必要がある場合なんてほとんどないので、使えそう。

if (a == null) {
  alert("aはundefinedかnull");
}

===を使わず==を使っているのがポイントだが、個人的には、それが気持ち悪くてしょうがない。

5. void 0と比較する

voidはあらゆる値に作用し、常にundefinedを返す。そのため、別にvoid 100でもvoid ""でも何でもいいが、慣習的に0が使われることが多いよう。

if (a === void 0) {
  alert("aはundefined");
}

安全そうだが、個人的には可読性悪いように思える。JS独特の書き方だし、ちょっと気持ち悪い。

6. 自分でundefinedを定義してしまう

jQueryが採用している方式。undefinedが予約語でないのが全ての元凶なのだから、自分で定義すればええやんってやつ。

(function(undefined){
  //このブロック内では確実にundefinedはundefined値が入っている
  if (a === undefined) {
    alert("aはundefined");
  }

})();

これはこれで(私にとっては)気持ち悪いが、可読性は悪くないし、安全。あとは、好み。

まとめ

割と好みの問題かも。

チーム開発であればコーディング規約的に決めておいた方が良さそう。同じundefined値の比較をいろんな方法でやってるコードとか読みたくない。

参考

【JavaScript入門】undefined徹底解説!使い方や判定方法まとめ | 侍エンジニアブログ
この記事では「 【JavaScript入門】undefined徹底解説!使い方や判定方法まとめ 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでし...
タイトルとURLをコピーしました