【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") ? "しない" : "する"}`); // 存在しない
プロトタイプについては、こちらをご覧ください。
■【JavaScript】 プロトタイプとは？prototypeプロパティはプロトタイプではない件について
プロパティーチェーン上のプロパティも含めてはチェックするには、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の使い分け
更新日：2021/07/15
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
