JavaScript の Optional chaining を使ってみよう

この機能はまだブラウザー間相互運用の安定性に達していないため、試験的に使用することを推奨します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

オブジェクトのプロパティにアクセスする際に、そのプロパティが存在するかをチェックしないとエラーになります。

例えば、以下のようなケースです。

const user = {
  name: 'tamibouz',
  parent: {
    name: 'syugyoso'
  }
};

const favoriteFood = user.food.name; //Uncaught TypeError: Cannot read property 'name' of undefined

user には、food というプロパティがありませんが、user.food.name という風に存在しないプロパティにアクセスしようとしているのでエラーになります。

通常は、以下のようにfoodの存在チェックをして true なら food.name にアクセスするように記述します。

const user = {
  name: 'tamibouz',
  parent: {
    name: 'syugyoso'
  }
};

const favoriteFood = user.food && user.food.name; //undefined

Optional chaining では、従来のチェックをしなくても、直接アクセスできるようになります。

以下のように ? を記述します。

const user = {
  name: 'tamibouz',
  parent: {
    name: 'syugyoso'
  }
};

const favoriteFood = user.food?.name; // undefined

このコードはエラーにならず、undefined となります。

関数を実行する場合は、?.() と記述します。

function User(name){
	this.name = name;
}

User.prototype.say = function(){
	console.log(this.name)
}

const user = new User('tami');
user.hello?.(); //エラーにはならない