&& や || を使う条件分岐の理解と使用例。

論理演算子の && と || で条件分岐を書きたいときの書き方を、感覚的に理解するためのメモ。
【前提知識】truthyとfalsyについて。

#&&
意味: AND

xxx && /*処理*/ ;
// ↑↓
if ( xxx ) {
  /*処理*/
} else {
  return xxx ;
}

##解説

• 通常のif文の代用。
• ただし、elseの処理は自動的に return xxx ; になる
• 左方が truthy なら、右方の処理をする。

##実際に使ってみる。

xxx && ooo ;

xxx が truthy なら…
→ 戻り値は ooo の値になる。

xxx が falsy なら…
→ 戻り値は xxx の値になる。

##こういう時に使える！

• 左方がtrutyなら、右方の処理を実行したい時。
• 左方が定義済みだったら右方の値を代入したいっていうとき。

#||
意味: OR

xxx || /*処理*/ ;
// ↑↓
if ( !xxx ) {
  /*処理*/
} else {
  return xxx ;
}

##解説

• NOT( ! )を使用するif文の代用。
• ただし、elseの処理は自動的に return xxx ; になる
• 左方が falsyなら、右方の処理をする。

##実際に使ってみる。

xxx || ooo

xxx が truty なら…
→ 戻り値は xxx の値になる。

xxx が falsy なら…
→ 戻り値は ooo の値になる。

##こういう時に使える！

• 左方が定義されていなかったら、右方の価を参照してくれる。左方が定義済みだったら、左方の値を参照してくれる。
  • いわゆる「初期値」というやつ。
  • strictモードを使ってるとき、Reactを書いてるときなど、未定義の値を参照するとエラーがでてしまう状況で使える。

#まとめ

• if　↔　&&
• もし○○なら ( or ○○が 真 なら) 、●●する。
• else　↔　||
• もし○○じゃないなら ( or ○○が 偽 なら) 、■■する。
• if ... else　↔　三項演算子
• もし○○なら ( or ○○が 真 なら) ●●、違ったら ( or ○○が 偽 なら) ■■する。

（三項演算子については本記事では説明していませんが、ググればすぐに分かると思います。）