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?.(); //エラーにはならない
最近のコメント