JavaScript・TypeScriptで見る ?.演算子と ??演算子、||演算子の意味と使い方まとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScript・TypeScriptで見る ?.演算子と ??演算子、||演算子の意味と使い方についてまとめて解説していきます。

1 ?.演算子と ??演算子、||演算子の意味と使い方まとめ
- 1.1 まとめ
2 関連記事
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 最近の投稿

?.演算子と ??演算子、||演算子の意味と使い方まとめ

JavaScriptでは、null や undefined のkeyを参照するとエラーが発生します。

?.演算子は、?. に「先行する変数」や「後に続くkey」が、null or undefined の時は、

そのkeyに対するAccessは実施されず(Error-回避されて) undefined が実行結果(Access結果)として返されます。

つまり、?.を使ってKeyにAccessすると「Access元のObjectと、そのObjectのkey が、null or undefined でもErrorが発生しない！」と言うことです。

??演算子は、左側のオペランドが、 null または undefined である場合に、右側のオペランドを返します。

つまり、左側の処理の結果が null or undefined なら、右側の処理結果を返すと言うことです。

||演算子は、左側のオペランドがfalsyな場合に、右側のオペランドを返します。

つまり、左側の処理の結果がfalse値なら、右側の処理結果を返すと言うことです。

上記の内容をJavaScriptのSampleCodeで確認していきます。

const robotama = {
  name: 'ロボ玉',
  from: 'グンマー帝国',
  hamFlag: true,
  power: 0,
  tama: null,
}

// 1. 存在しないkeyにアクセスする場合
console.log(robotama?.like); // undefined
console.log(robotama?.like ?? '??_Test_1'); // ??_Test_1
console.log(robotama?.like || '||_Test_1'); // ||_Test_1

// 2. 存在するが、nullなDataにアクセスする場合
console.log(robotama?.tama); // null
console.log(robotama?.tama ?? '??_Test_3'); // ??_Test_3
console.log(robotama?.tama || '||_Test_3'); // ||_Test_3

// 3. 存在するが、falsyな値にアクセスする場合
console.log(robotama?.power); // 0
console.log(robotama?.power ?? '??_Test_2'); // 0
console.log(robotama?.power || '||_Test_2'); // ||_Test_2

まとめ

?.演算子と ??演算子、||演算子の意味と使い方をまとめると次のとおりです。

?.演算子は、「先行する変数」(object)や「Access先のkey」(key) が null or undefined なら、undefined がAccess結果(参照結果)として返却される。
??演算子は、左側のオペランドが、 null または undefined である場合に、右側のオペランドを返します。
- null or undefined の場合に対応したいのなら、??演算子
||演算子は、左側のオペランドがfalsyな場合に、右側のオペランドを返します。
- false値の場合に対応したいのなら、、||演算子
- JavaScriptで、false判定な値 : false, 0, “”, null, undefined