JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptオブジェクトにキーが存在するかどうかを確認する方法

JavaScriptでオブジェクト内に特定のキー(プロパティ)が存在するかどうかを調べるには、主に2つの方法があります。それぞれ動作や特徴が異なるため、状況に応じて適切に使い分けることが重要です。

例として、次のような「employee」オブジェクトを用意します。

var employee = {
  name: "Ranjan",
  age: 25
}

このオブジェクトに「name」プロパティが存在するかどうかを確認してみましょう。

1) in演算子を使う方法

「in」演算子は、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンを通じて継承されたプロパティもチェック対象とします。オブジェクト自体に該当プロパティが見つからない場合、継承元のプロパティまで遡って検索する点が特徴です。

次の例では、「toString」が存在するかどうかを「in」演算子で確認しています。「toString」はemployeeオブジェクト自身には定義されていませんが、すべてのオブジェクトが継承するObject.prototypeの基本プロパティであるため、結果はtrueとなります。

コード例

<html>
<body>
<script>
    var employee = {
      name: "Ranjan",
      age: 25
   }
   document.write("name" in employee);
   document.write("</br>");
   document.write("salary" in employee);
   document.write("</br>");
   document.write("toString" in employee);
</script>
</body>
</html>

実行結果

true
false
true

このように、「name」は自身のプロパティとしてtrue、「salary」は存在しないためfalse、「toString」は継承プロパティとしてtrueが返されます。

2) hasOwnProperty()メソッドを使う方法

hasOwnProperty()メソッドは、オブジェクト自身が直接持つプロパティのみを対象とし、継承されたプロパティは無視します。プロパティが存在すればtrue、存在しなければfalseを返します。

次の例では、継承プロパティである「toString」についても確認しているため、たとえ基本プロパティであっても結果はfalseになります。

コード例

<html>
<body>
<script>
    var employee = {
      name: "Ranjan",
      age: 25
   }
   document.write(employee.hasOwnProperty('toString'));
   document.write("</br>");
   document.write(employee.hasOwnProperty('name'));
   document.write("</br>");
   document.write(employee.hasOwnProperty('salary'));
</script>
</body>
</html>

実行結果

false
true
false

補足：Object.hasOwn()とundefinedとの比較

ES2022以降では、hasOwnProperty()のより安全な代替としてObject.hasOwn()が利用できます。Object.create(null)で生成されたオブジェクトなどでも確実に動作するため、新規のコードではこちらが推奨されます。

console.log(Object.hasOwn(employee, "name")); // true

また、値そのものではなくキーの存在だけを簡易的に確認したい場合は、undefinedとの比較も使われます。ただし、プロパティの値が意図的にundefinedに設定されている場合には誤判定となるため注意が必要です。

if (employee.name !== undefined) {
  // キーが存在する場合の処理
}

まとめ

  • in演算子： 自身のプロパティに加えて、継承されたプロパティも判定対象になる
  • hasOwnProperty()： オブジェクト自身のプロパティのみを判定する
  • Object.hasOwn()： ES2022で追加された推奨メソッド(hasOwnProperty()の代替)
  • undefined比較： 手軽だが、値がundefinedの場合は誤判定の可能性がある

継承プロパティまで含めて確認したい場合は「in」演算子を、オブジェクト固有のプロパティだけを厳密に確認したい場合は「hasOwnProperty()」または「Object.hasOwn()」を選択するとよいでしょう。

  1. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1

  2. 【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

    JavaScriptでは、instanceof 演算子を使うことで、あるオブジェクトが特定のクラス（コンストラクタ関数）のインスタンスであるかどうかを簡単に判定できます。instanceof 演算子とは？instanceof 演算子は、左辺のオブジェクトが右辺に指定したコンストラクタ関数のプロトタイプチェーン上に存在するかどうかを評価し、その結果を真偽値（true / false）として返します。この仕組みを利用することで、オブジェクトがどのクラスから生成されたものなのかを実行時に動的にチェックできます。コード例以下は、ボタンをクリックしたときに student1 オブジェクトが Studen