reactのショートサーキット評価（&&や||）とは？

reactを書いてるときによく使用する「&&」や「||」について
よくわからず使っていたのでその仕組みをまとめる。

ショートサーキット評価とは？

ショートサーキット評価（短絡評価）は論理演算子が左から右に評価
される性質を利用して右辺の評価を左辺の評価にゆだねること基本のこと
reactでは条件付きレンダーでよく使用される。

実装サンプル

言葉だけだとちょっとよくわからないので
実装してみる

orの場合

orの論理演算子は左辺と右辺を比較時、左辺がfalseになった時だけ
右辺を見に行く。
下記でいうと

1. ""を評価する
2. falseなので右辺(null)を評価しにいく
3. nullを評価する
4. falseなので右辺("hoge")を評価しにいく
5. orに"hoge"が代入される。

つまり"hoge"がorに入るのは左辺が全てfalseの時だけになる

Copy
const or = "" || null || "hoge"

console.log(or)

// 実行結果
// hoge

andの場合

andの論理演算子は左辺と右辺を比較時、左辺がtrueになった時だけ
右辺を見に行く。
下記でいうと

1. trueを評価する
2. trueなので右辺(1)を評価しにいく
3. 1を評価する
4. tureなので右辺("fuga")を評価しにいく
5. andに"fuga"が代入される。

つまり"fuga"がandに入るのは左辺が全てtrueの時だけになる

Copy
const and = true && 1 && "fuge"

console.log(and)

// 実行結果
// fuge

reactでの使用サンプル

reacrの条件付レンダーでショートサーキット評価を使用してみる

Copy
import { useState } from "react";

export default function App() {
  const [flg,setFlg] = useState(true)

  return (
    <div>
     {flg && <h1>左辺がflgがtrueの時に表示</h1>}
     {flg || <h1>左辺がflgがfalseの時に表示</h1>}
     <button onClick={()=>setFlg((flg)=>!flg)}>flg変更</button>
    </div>
  );
}

まとめ

まとめると

• 左辺がtrueの時に値を入れたい　→ && を使う
• 左辺がfalseの時に値を入れたい　→ || を使う

参考

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】