JavaScript (TypeScript) のいろんな条件の書き方まとめてみた

## 記事の概要
JavaScript（TypeScript）にはいろんな条件の書き方がありますが、初心者にとっては最初見た時どういう意味なのかよくわかりませんよね。自分も最近知った部分があるので、今更ですがまとめてみました。

## 説明する内容
* 三項演算子
* オプショナルチェーン演算子`?.`
* 論理演算子`&&`
* 論理演算子`||`
* Null 合体演算子

## 前提条件
こちらの説明は、`2024年5月`時点での仕様をもとにしています。今後のアップデートによって、ここに掲載している内容ではできなくなるかも知れません。

## 1. 三項演算子
```sample.js
条件式 ? 当てはまるとき(真)の処理 : 当てはまらないとき(偽)の処理
```
変数に、条件に応じて別の値を代入したい時に便利です。
例）
```
const drink = age >= 20 ? "お酒" : "ソフトドリンク";
```
この場合、`age`が20以上の時は"お酒"が、そうでない時は"ソフトドリンク"が、`drink`に格納されます。

参考）

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


## 2. オプショナルチェーン演算子`?.`
オプショナルチェーン演算子`?.`というものを使うと、参照したものが`null`または`undefined`だった場合に、`undefined`が返却されます。

例)
```sample.js
let price = products.drink?.coke
```
この場合、`products.drink.coke`を参照する前に、`products.drink`が`null`または`undefined`でないことを自動的に調べることができるようになります。  
もし当てはまった場合は`undefined`が`price`に格納されます。
これは、使用したい関数が存在するかどうかを調べることにも利用できます。

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

:::note info
ちなみに、TypeScriptの機能として、`非nullアサーション演算子`である`!`があります。直前のオブジェクトが、`null`または`undefined`ではないことをTypeScriptに主張することができます。ただし使用方法に注意があります。こちらが参考になりそうです（ https://qiita.com/Asaminnn/items/64f3143ebf980d3a58c8 ）
:::


## 3. 論理演算子`&&`
```sample.js
const result = {式1} && {式2}
```
この場合、式1と式2がいずれも真（`null`や`undefined`ではない）の場合、式2の値が格納されます。
一方、どちらかに偽（`null`や`undefined`）が含まれていた場合は、その値が返され、その後の式は評価（実行)されません。

例1）
```sample.js
const a = "hello!";
const b = "こんにちは";

const result = a && b;

```
この場合、`a`と`b`どちらも存在する（真）ので、`result`には**右側`b`の値**である"こんにちは"が格納されます。

例2)
```sample.js
const objA = {"name": "太郎"};
const result = objA && objA.age;
```

この場合、`objA`は存在しますが、`objA`に`age`は存在しないので、`result`には**右側`objA.age`の返り値**である`undefined`が格納されます。

例3)
```sample.js
const objA = {"name": "太郎"};
const result = objA.age && console.log(objA.age);
```

この場合、`objA.age`が存在しないので、この時点で`result`には**左側`objA.age`の返り値**である`undefined`が格納されます。後の、console.logの処理は実行されません。

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


## 4. 論理演算子`||`
```sample.js
const result = {式1} || {式2}
```
この場合、式1が`true`の場合は、式1の値が格納されます。それ以外の場合は、式2の値が格納されます。

例1）
```sample.js
const a = "hello!";
const b = "こんにちは";

const result = a && b;

```
この場合、`a`が真なので、この時点で`result`には**左側`a`の値**である"hello!"が格納されます。

例2)
```sample.js
const objA = {"name": "太郎"};
const result = objA.name || "存在しません";
```
この場合、`objA.name`は存在している（真）ので、この時点で`result`には**左側`objA.name`の値**である"太郎"が格納されます。

例3)
```sample.js
const objA = {"name": "太郎"};
const result = objA.age || "存在しません";
```
この場合、`objA.age`が存在しないので`undefined`となり、この時点で`result`には**右側の値**である"存在しません"が格納されます。

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

## 5. Null 合体演算子
`||`の特殊系です。
`??`という形で書きます。
```sample.js
const result = {式1} ?? {式2};
```
{式1}の値が、`null`または`undefined`の場合に、{式2}の値が、`result`に格納されます。  
{式1}の値`null`でも`undefined`でもない場合、すぐにその値が格納され、{式2}は評価（実行）されません。
`||`よりも、**条件を限定して判定しているのがミソ**です。

例1)
```sample.js
const x = "私は来世は東京生まれになりたい。";
const y = "私は田舎で生まれました。";
const result = x ?? y;
```
この場合、`x`が`null`でも`undefined`でもないので、この時点で`result`には**左側xの値**である"私は来世は東京生まれになりたい。"が格納されます。

例2)
```sample.js
const x = "null";
const y = "私は田舎で生まれました。";
const result = x ?? y;
```
この場合、`x`が`null`なので、この時点で`result`には**右側`y`の値**である"私は田舎で生まれました。"が格納されます。

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


https://zenn.dev/yuji6523/articles/js-nullish-coalescing-operator


## 終わりに
公式ドキュメントや知人、Chat GPTのお力も借りて自分も勉強しながら、JavaScript（TypeScript）の色々な条件の書き方をまとめてみました。皆さんの開発に少しでも役に立てれば嬉しいです。