プロパティアクセサー

オブジェクトのプロパティの設定、変更、アクセスには、ドット表記と角かっこ表記の 2 つの方法があります。

ドット表記

前述の例で見たように、ドット表記ではピリオド（.）をアクセス対象のプロパティキーを指定します。

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

ドット表記を使用すると、代入演算子:

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

ドット表記を使用してプロパティキーを連結すると、そのプロパティ自体がオブジェクトのプロパティになります。

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

ただし、チェーンで指定されたキーがキーにない場合にこの構文を使用すると、エラーが発生する可能性があります。次の例では、myMissingProp はが myObj オブジェクトのプロパティであるため、myObj.myMissingProp にアクセスしようとすると、結果は undefined になります。次に undefined のプロパティにアクセスを試行します。例オブジェクトであったため、次のエラーが発生します。

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

この問題に対処するために、ES2020 では「オプションのチェーン演算子」が導入されました。(?.) オブジェクトのネストされたプロパティに安全にアクセスできます。

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

ドット表記を使用してアクセスされるキーが文字列のように引用符で囲まれない使用します。つまり、ドット表記を使用してプロパティキーにのみアクセスできます有効な識別子である:

const myObj = {
    "1": true,
    "key with spaces": true
};

myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

そのため、ID に関するルールに準拠することをおすすめします。必ずプロパティキーを指定するようにしてください。これが不可能な場合は 角かっこ表記のもう 1 つの構文を使用すると、識別子ルールに従っていない文字列ベースのオブジェクトキーです。

角かっこ表記

角かっこ表記では、次の値を含む角かっこ（[]）を使用します。イベントを表す文字列（またはSymbol）プロパティキーを使用します。

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

この構文はかなり制限が緩やかで、場合によっては十分な制限が混乱を招くことがあります。これは、かっこ内の値は文字列リテラルとして評価されるためです。常に同じです。たとえば、ブール値 false と数値 10 は、文字列に関連付けられたプロパティへのアクセスに使用されます。リテラルキー "false" と "10" :

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

この構文の強みは柔軟性にあります。プロパティにアクセスする必要があります。次の例ではオブジェクトの 3 つのプロパティのいずれかを選択します。

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

ドット表記と同様に、角かっこ表記を使用して、代入演算子を使用します。

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }

プロパティ アクセサー

ドット表記

角かっこ表記

プロパティアクセサー