※自分の学習メモとしても残しております。
オブジェクトに属するメソッドにアクセスするには、ドット演算を利用するのが基本。
オプショナルチェイニング演算子（?.）がない場合にエラーとなる理由は、null や undefined に対してメソッドを呼び出そうとすると、JavaScriptはそのオブジェクトが存在しないため、エラーを投げるからです。
オプショナルチェイニングがない場合の動作
次のコードを例に考えてみます。
const str = null;
console.log(str.substring(3));
この場合、str は null であり、substring(3) メソッドは null には存在しないため、以下のようなエラーが発生します。
TypeError: Cannot read properties of null (reading 'substring')
エラーが発生する理由
-
null や undefined にはプロパティやメソッドがない
null と undefined は特別な値であり、これらにはメソッドやプロパティが存在しません。 -
メソッド呼び出しをしようとする
str.substring(3) は、str がオブジェクトであり、substring というメソッドが存在することを前提にしています。しかし、str が null の場合、substring メソッドは存在しないため、JavaScriptエンジンは「プロパティ 'substring' を 'null' から読み取ることができない」というエラー（TypeError）をスローします。
オプショナルチェイニング演算子（?.）を使用する場合の動作
一方で、オプショナルチェイニング演算子（?.）を使用すると、JavaScriptは str が null または undefined かどうかをまず確認します。もしそうであれば、メソッド呼び出しをスキップして undefined を返すので、エラーを防ぎます。
以下のコードを例にしてみましょう。
const str = null;
console.log(str?.substring(3)); // undefined
このコードでは、str が null であるため、str?.substring(3) は単に undefined を返し、エラーは発生しません。
substring メソッドについて
substring メソッドは、文字列の指定した開始位置から部分文字列を返します。
たとえば、以下のように書くと
const str = "Hello, World!";
console.log(str.substring(3)); // "lo, World!"
この場合、substring(3) はインデックス3から始まる部分文字列、つまり "lo, World!" を返します。インデックスは0から始まるため、3は4番目の文字を指します。
substring と slice の違い
似たメソッドに slice があります。これらのメソッドはほとんど同じ動作をしますが、次の違いがあります。
- substring は負の値を 0 として扱います
- slice は負の値を文字列の末尾からの相対位置として扱います
この違いも頭に入れておくと、状況に応じて適切に使い分けることができます。
まとめ
オプショナルチェイニング演算子を使うことで、null や undefined に対して安全にプロパティやメソッドアクセスを試みることができ、これによってプログラムの実行中に予期せぬエラーが発生するのを防ぎます。