Zenn
👀

JavaScriptの「??」 と 「?.」 ってなんだ？

2021/01/26に公開
JavaScript
TypeScript
tech

最近のモダンなJavaScriptを書いていて??とかxx?.yyみたいな記法にでくわしたので調べたことをメモ。

「??」と「?.」←これの名前

  • ??
    • Nullish coalescing operator
  • ?.
    • Optional chaining

?? の使い方

どういうときに使うのか？

  • 左辺がnullかundefinedのときだけ右辺を評価したい

// fugaがnullかundefinedだったら、デフォルト値をいれたい
let fuga;
const hoge = fuga ?? 'default value';
console.log(hoge); // default value

||との違い

||によるショートサーキット評価でも同じことができるが、??のほうがより厳格になる

  • ||は、左辺がfalsyな値だと右辺を評価する。null,unidefinedに加えて以下の場合も含まれる
    • false
    • 0
    • 0n
    • NaN
    • ""（空文字）
  • ??は、左辺がnull,unidefinedのときだけ右辺を評価する
// ||によるショートサーキット。piyoが0だとfooに1が代入される
const piyo = 0;
const foo = piyo || 1;
console.log(foo) // 1

// ??だと代入されない
const hoge = piyo ?? 1;
console.log(hoge); // 0

?. の使い方

どういうときに使うのか?

  • オブジェクトの2階層以上のプロパティアクセス時に、プロパティが存在しなかったらエラーではなくundefinedを返してほしい
  • プロパティの存在チェックを楽にしたいとき
const goods = {
   name:'book',
   description:{
      title:'description title',
      content:'description'
   }
};

const hoge = goods.brand?.nonExistsValue;
console.log(hoge); // undefined

const fuga = goods.nonExistsMethod?.();
console.log(fuga); // undefined

// Cannot read property
const bar = goods.brand.nonExistsValue
console.log(bar);

参考

Discussion