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

JavaScriptのObject.defineProperty()で重要な「enumerable（列挙可能）」属性とは？

Object.defineProperty()メソッドとは

JavaScriptでは、オブジェクトのプロパティを定義する方法として、ドット記法（.）やブラケット記法（[]）が一般的に使われます。しかし、それ以外にもObject.defineProperty()メソッドを使ってプロパティを定義する方法があります。このメソッドは通常、3つの引数を受け取ります。オブジェクト名、プロパティ名、そしてプロパティディスクリプタ（プロパティ記述子）です。

構文

Object.defineProperty(オブジェクト名, プロパティ名, プロパティディスクリプタ)

enumerable属性を指定しない場合の挙動

次の例では、最初にオブジェクトには「one」というプロパティのみが定義されています。その後、Object.defineProperty()を使って「two」という別のプロパティを追加しました。しかし、すべてのプロパティを表示しようとしても、出力結果の通り、最初のプロパティしか表示されず、追加したプロパティは表示されません。

コード例

<html>
<body>
<script>
    var object = {one: 1};
    Object.defineProperty(
        object,
        'two', {
            value: 2
        }
    );
    document.write(JSON.stringify(object));
</script>
</body>
</html>

出力結果

{"one":1}

enumerable属性の役割

この挙動は「enumerable（列挙可能）」属性によるものです。オブジェクト内のプロパティが列挙されるためには、enumerable属性がtrueである必要があります。しかし、この属性を明示的に宣言しない場合、デフォルト値は「false」に設定されます。したがって、プロパティを列挙可能にするには、enumerableを宣言し、明示的に「true」を代入する必要があります。

enumerable: trueを指定した場合

次の例では、プロパティディスクリプタ内でenumerableを宣言し、trueを代入しています。その結果、出力の通りすべてのプロパティが正しく表示されます。

コード例

<html>
<body>
<script>
    var object = {one: 1};
    Object.defineProperty(
        object,
        'two', {
            value: 2,
            enumerable: true
        }
    );
    document.write(JSON.stringify(object));
</script>
</body>
</html>

出力結果

{"one":1,"two":2}

まとめ

Object.defineProperty()でプロパティを定義する際、enumerable属性はデフォルトでfalseになるため、JSON.stringify()やfor...inループなどの列挙処理でそのプロパティが表示されません。外部に見せたい通常のプロパティであれば、enumerable: trueを明示的に指定することが重要です。逆に、内部的なプロパティを隠したい場合には、このデフォルトの挙動を活用できます。

  1. JavaScriptのObject.assign()メソッドとは？使い方と注意点を解説

    Object.assign()メソッドは、1つ以上のソースオブジェクトからターゲットオブジェクトへ、列挙可能な独自プロパティの値をすべてコピーするためのメソッドです。戻り値として、コピー先となったターゲットオブジェクトが返されます。 基本的な使い方 const targetObj = { a: 1, b: 2 }; const sourceObj = { b: 4, c: 5 }; const returnedTarget = Object.assign(targetObj, sourceObj); console.log(targetObj); console.log(returnedTar

  2. JavaScriptの.stackプロパティとは？エラーのスタックトレース取得方法を解説

    JavaScriptのErrorオブジェクトが持つstackプロパティは、デバッグにおいて非常に有用な情報を提供します。このプロパティを参照することで、「どの関数が」「どのような順序で」「どのファイルの何行目から」「どのような引数で」呼び出されたのかというトレース情報（スタックトレース）を確認できます。 スタック文字列は、最も新しく呼び出された関数から順に、過去の呼び出しさかのぼる形式で記録されており、最終的にグローバルスコープでの最初の呼び出しまで遡ることができます。この仕組みは、Javaのスタックトレースとよく似ています。 エラー発生時にこのスタックトレースを出力しておけば、問題の原因とな