MENU

JavaScript構文プロパティ

【JavaScript】 オブジェクトやプロパティの存在をチェックする方法

更新日:2021/07/15

 

JavaScriptでオブジェクトにプロパティが存在するかどうかをチェックするケースがあります。
その方法は幾つかあり、その時々で最適な方法を選択する必要があります。

 

ここでは、その方法についてお伝えします。

 

プロパティの存在チェック

 

オブジェクトのプロパティにアクセスすると、JavaScriptはプロパティを検索します。
そして、プロパティを見つけることができなかったら、undefinedを返します。

 

そのため、オブジェクトが特定のプロパティを持っているの確認は、undefinedと比較するのが手っ取り早いです。

 

undefinedでプロパティ確認

 


const obj = {
    prop1:1
};

console.log( `存在${obj.prop1 === undefined ? "しない" : "する"}`); // 存在する
console.log( `存在${obj.prop2 === undefined ? "しない" : "する"}`); // 存在しない

 

ただし、プロパティがundefined値を持っていると、次のように、存在しているのに『存在していない』と判断されてしまいます。

 

存在確認できていないケース

 


const obj = {
    prop1:undefined
};

console.log( `存在${obj.prop1 === undefined ? "しない" : "する"}`); // 存在しない

 

特定のプロパティが実際に存在しているか確認したいときは、hasOwnPropertyメソッドを使用します。

 

hasOwnPropertyメソッドは、プロパティ名の文字列を引数で受け取り、プロパティが存在するならtrueを返します。
プロパティの値がundefinedでも関係ありません。

 

hasOwnPropertyでの存在チェック

 


const obj = {
    prop1:undefined
};

console.log( `存在${!obj.hasOwnProperty("prop1") ? "しない" : "する"}`); // 存在する
console.log( `存在${!obj.hasOwnProperty("prop2") ? "しない" : "する"}`); // 存在しない

 

ただしhasOwnPropertyは、直接所持しているプロパティのみ確認できます。
プロパティーチェーン上のプロパティはチェックされません。

 

hasOwnPropertyは直接所持しているプロパティのみ

 


const obj = function(){
    this.prop1 = undefined; // 直接所持しているプロパティ
};
obj.prototype.prop3 = undefined; // プロパティーチェーン上のプロパティ

const objInstance = new obj();

console.log( `存在${!objInstance.hasOwnProperty("prop1") ? "しない" : "する"}`); // 存在する
console.log( `存在${!objInstance.hasOwnProperty("prop3") ? "しない" : "する"}`); // 存在しない

 

 

プロパティーチェーン上のプロパティも含めてはチェックするには、in演算子を使用します。

 

in演算子での存在確認

 


const obj = function(){
    this.prop1 = undefined; // 直接所持しているプロパティ
};
obj.prototype.prop3 = undefined; // プロパティーチェーン上のプロパティ

const objInstance = new obj();

console.log( `存在${ ! "prop1" in objInstance ? "しない" : "する"}`); // 存在する
console.log( `存在${ ! "prop3" in objInstance ? "しない" : "する"}`); // 存在する

 

なお、存在チェックでundefinedと比較していないコードもあります。
これは、undefinedがfalseとして判断されることを利用したコードですが、同様に0やnull値もfalseとして判断されます。

 

undefinedと比較しないケース

 


const obj = {
    prop1:1
    prop2:0
};

console.log( `存在${ !obj.prop1 ? "しない" : "する"}`); // 存在する
console.log( `存在${ !obj.prop2 ? "しない" : "する"}`); // 存在しない

 

正常にチェックされていませんね。
必ずundefineと比較しましょう。

 

undefineについては、次の記事で詳しく紹介しています。
【JavaScript】 undefinedの判定方法とその正体

組み込みオブジェクト・メソッドの存在チェック

 

近年のJavaScriptは毎年改版され、その都度新しいオブジェクトやメソッドが追加されています。
しかし古いブラウザを考慮する必要がある場合などは、新しい機能が使用できません。

 

そこで機能が実装されているかどうかの確認として、組み込みオブジェクトやメソッドの存在チェックをおこないます。

 

例えば、ECMAScript2021で定義されたreplaceAllが使用できるか確認して、使用できないときに代替のメソッドを組み込みます。

 

replaceAllの代替定義

 


if( String.prototype.replaceAll === undefined ){
        // replaceAllの代替定義
    String.prototype.replaceAll = function ( ...parm){
        parm[0] = parm[0] instanceof RegExp
                    ? parm[0] : new RegExp( parm[0] , "g");
        return this.replace( ...parm );
    };
}

 

変数の存在チェック

 

存在しない変数を参照すると、エラーがスローされます。
そのため、プロパティのようなundefinedと比較する手法を使用できません。

 

存在しない変数を参照すると、エラー


if( value === undefined ){ }
  // ReferenceError: value is not defined

 

この場合は、typeof演算子を使用します。

 

typeof演算子を使用


if( typeof value === "undefined" ){ }

 

typeof演算子については、こちらを見てください。
【JavaScript】 typeof演算子は何を返しているのか?

 

変数の存在チェックは、古くからあるvarでの変数定義を念頭に置いたものです。

 

例えば次のように、外部スクリプトで変数を定義しておき、他のスクリプトでその変数が存在するかチェックをおこないます。

 

var変数の存在確認

 


<script src="js1.js" type="text/javascript"></script>
// js1.js
//   var value = 123;
//

<script>

   if( typeof value === "undefined" ){ }

</script>

 

現在はvarでの定義は推奨されていません。

 

letやconstで変数を使用していて、変数の存在確認を行わなければいけない状況は、コード上の不具合の可能性があります。
プログラムの流れを整理してみてください。

 

変数定義については、こちらをご覧ください
【JavaScript】 適当に使ってた!変数宣言var/let/constの使い分け

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

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


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

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

    そんなときは、ご意見もらえたら嬉しいです。

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

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。