変数

【JavaScript】undefinedの判定方法とよくある6つの比較パターン

更新日:2023/10/18

JavaScriptにはundefinedという値があります。
この値はプロパティが存在するか確認したいときなどに使用されます。

この記事ではundefinedとの比較方法や、JavaScript上級者を目指すなら知っておくべき情報をお伝えします。


2023/10 タイトルと内容を大幅に改定しました

 

undefinedの判定方法

JavaScriptで値がundefinedかどうかは、基本的に厳密等価演算子(===)で判定します。

厳密等価演算子で比較

if( value === undefined ){
  // valueがundefinedの時の処理
}

undefindeは値を上書きできるから心配という人は、以前ならtypeof演算子で判定する方法がおススメでした。

以前の判定方法

if(typeof value === "undefined") {
  // valueがundefinedの時の処理
}

typeofは型を比較しています。

次のページも参考にしてみてください。
【JavaScript】 typeof演算子は何を返しているのか?

今は、undefinedの参照先をフルで記述します。

現在の判定方法

if( value === globalThis.undefined ){
  // valueがundefinedの時の処理
}

長くてイヤという人は、適当な変数を作っておくといいですね。

const myUnDef = globalThis.undefined;
if( value === myUnDef  ){
  // valueがundefinedの時の処理
}

 

undefined比較の6つのパターン

undefinedかどうかの判定は、大きく分けて6つのパターンがあります。

変数に値がセットされていないときのundefined判定

変数に値がセットされていないときは、JavaScriptが「値がないよ」という意味でundefined値を返します。

値未設定変数の判定

let value1;
if( value1 === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}
const value2; //  SyntaxError: missing = in const declaration

constは定義時に=で初期化しないとエラーになります。
そのため、何らかの値が必ずセットされます。

変数にundefinedがセットされているときの判定

値がundefinedなら、その値が比較対象です。

let value1 = undefined;
if( value1 === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

const value2 = undefined;
if( value2 === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

値がセットされていないのか、値がundefinedなのかを確認する方法はありません。
使いわけたいときは、null値などをセットしましょう。

プロパティが存在しないときのundefined判定

オブジェクト内に存在しないプロパティを参照すると、JavaScriptが「プロパティがないよ」という意味でundefined値を返します。

const obj = {};

if( obj.value === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

プロパティが存在するかどうかの判定は、hasOwnProperty()でおこないます。

詳しくはこちらのページを読んでみてください。
【JavaScript】 オブジェクトやプロパティの存在をチェックする方法

プロパティ値がundefinedのときの判定

オブジェクトプロパティの値がundefined値なら、その値が比較対象です。

const obj = { value:undefined };

if( obj.value === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

関数が値を返さないときのundefined判定

関数が値を返さない時、undefinedが返ります。

function func(){ }

if( func() === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

実際には、戻り値が無い関数の結果を判定することはほとんどありませんね。

関数がundefinedを返すときの判定

関数がundefinedを返すなら、その値が比較対象です。

function func(){ return undefined; }

if( func() === undefined ){
  console.log( "undefinedです" ); // 結果: undefinedです
}

 

undefinedの参照先

ここまでのコードでは、undefined が比較対象になっています。

このundefinedは実データ(プリミティブ値)ではなくて、グローバルオブジェクトのプロパティです。
つまり、次のように記述と同じです。

if( value === globalThis.undefined ){
    // valueがundefinedの時の処理
}

数値リテラルや文字列リテラル、nullリテラルなどは、値と比較しています。

if( value === 1 ) {} // 数値リテラル
if( value === "abcde" ) {} // 文字列リテラル
if( value === null ) {} // nullリテラル

そのため、意味合いが少し異なります。
意味合い的には、変数との比較に近いですね。

const not_defined = undefined;
if( value === not_defined ){
    // valueがundefinedの時の処理
}

また、globalThis.undefinedは値を変更できません。

globalThis.undefined = 1;
console.log( globalThis.undefined ); // 結果: undefined

そのため、確実にundefined判定できます。

 

undefinedの問題点

undefinedは予約語ではないので、変数名として使用できます。
その結果、globalThis.undefinedを参照できない可能性があります。

const func1 = value=>value === undefined;

const func2 = value=>{
    const undefined = 1;
    return value === undefined;
}

let v;

console.log( func1(v) );
console.log( func2(v) );

上のコードのfunc1()は、引数value とglobalThis.undefinedを比較した結果を返しています。
func2()は、引数value と数値の1を比較した結果を返しています。

ミスとしては起こりにくいですが、仕様上可能だということを覚えておきましょう。

更新日:2023/10/18

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。