JavaScript/?.ブラケット参照演算子

?.[] は、ECMAScript のオプショナルチェイニング（Optional Chaining）演算子の一部で、オブジェクトのプロパティに安全にアクセスするためのブラケット記法（[]）を使用する構文です。この構文は、オブジェクトが null または undefined の場合にエラーを発生させずにプロパティにアクセスするために使用されます。

構文

MemberExpression[?Yield, ?Await] ?. [ Expression[+In, ?Yield, ?Await] ]

• MemberExpression[?Yield, ?Await]: オブジェクトを評価する式。Yield と Await は、ジェネレーター関数や非同期関数内での使用を制御するためのオプションのパラメータです。
• Expression[+In, ?Yield, ?Await]: プロパティ名を評価する式。+In は、in 演算子のコンテキストで使用されることを示し、Yield と Await は、ジェネレーター関数や非同期関数内での使用を制御するためのオプションのパラメータです。

この構文は、オブジェクトが null または undefined でない場合にのみプロパティにアクセスし、それ以外の場合は undefined を返します。

例

基本的な使用法

以下のプログラムは、?. [ Expression ] の基本的な使用法を示しています。

// 基本的な使用法
const obj = {
  prop1: "value1",
  prop2: "value2"
};

// オプショナルチェイニングを使用してプロパティにアクセス
console.log(obj?.["prop1"]); // "value1"
console.log(obj?.["prop2"]); // "value2"

このプログラムでは、obj オブジェクトの prop1 と prop2 プロパティにオプショナルチェイニングを使用してアクセスしています。

ネストされたオブジェクトでの使用

以下のプログラムは、ネストされたオブジェクトでの ?. [ Expression ] の使用例を示しています。

// ネストされたオブジェクトでの使用
const obj = {
  nested: {
    prop1: "nestedValue1",
    prop2: "nestedValue2"
  }
};

// オプショナルチェイニングを使用してネストされたオブジェクトのプロパティにアクセス
console.log(obj?.nested?.["prop1"]); // "nestedValue1"
console.log(obj?.nested?.["prop2"]); // "nestedValue2"

このプログラムでは、ネストされたオブジェクトのプロパティにオプショナルチェイニングを使用してアクセスしています。

動的なプロパティ名での使用

以下のプログラムは、動的なプロパティ名での ?. [ Expression ] の使用例を示しています。

// 動的なプロパティ名での使用
const obj = {
  prop1: "value1",
  prop2: "value2"
};

const propName = "prop1";

// オプショナルチェイニングを使用して動的なプロパティ名にアクセス
console.log(obj?.[propName]); // "value1"

このプログラムでは、動的なプロパティ名 propName を使用して、obj オブジェクトのプロパティにオプショナルチェイニングを使用してアクセスしています。

存在しないプロパティでの使用

以下のプログラムは、存在しないプロパティでの ?. [ Expression ] の使用例を示しています。

// 存在しないプロパティでの使用
const obj = {
  prop1: "value1",
  prop2: "value2"
};

// オプショナルチェイニングを使用して存在しないプロパティにアクセス
console.log(obj?.["prop3"]); // undefined

このプログラムでは、存在しないプロパティ prop3 にオプショナルチェイニングを使用してアクセスしています。この場合、undefined が返されます。

関数呼び出しでの使用

以下のプログラムは、関数呼び出しでの ?. [ Expression ] の使用例を示しています。

// 関数呼び出しでの使用
const obj = {
  method: function() {
    return "method called";
  }
};

// オプショナルチェイニングを使用してメソッドを呼び出す
console.log(obj?.["method"]?.()); // "method called"

このプログラムでは、obj オブジェクトの method メソッドをオプショナルチェイニングを使用して呼び出しています。

注意点

• プロパティ名の制約: ブラケット記法を使用する場合、プロパティ名は文字列またはシンボルでなければなりません。例えば、obj?.[123] は obj?.["123"] として扱われます。
• 動的なプロパティ名: ブラケット記法は動的なプロパティ名を扱うのに適していますが、パフォーマンスの観点からはドット記法の方が効率的です。
• プロパティの存在チェック: 存在しないプロパティにアクセスすると、undefined が返されます。プロパティの存在を確認するには、in 演算子や hasOwnProperty メソッドを使用します。

外部リンク

• ECMA-262::Optional Chaining