&& と || の短絡評価。「左がfalseなら右を見ない」のはどっち？

解説

正解は &&（論理AND）です。&& は左辺が falsy なら、右辺を評価せずにそのまま左辺の値を返します。「両方trueでないと成立しない」ので、左がfalseならもう右を見る意味がないからです。一方 || は逆で、左辺が falsy のときに右辺を評価します。「どちらか一方がtrueなら成立する」ので、左がfalseでもまだ右にチャンスがあるわけです。覚え方：「ANDは厳しい、ORは優しい」&& は両方trueを要求する厳しい門番です。左がfalseの時点で「はい不合格、次は見ません」と即打ち切ります。|| は片方trueでOKなので、左がfalseでも「右も見てあげよう」と進みます。この性格の違いで短絡の方向が決まります。実務でよく見るパターン&& の短絡評価は、Reactの条件付きレンダリングでおなじみです。{isLoggedIn && <UserMenu />}isLoggedIn が false なら <UserMenu /> は評価すらされません。一方 || はデフォルト値の設定で多用されます。const name = inputName || 'ゲスト';inputName が空文字や null のとき、右辺の 'ゲスト' が使われます。||= と ??= の登場で変わったことES2021で追加された論理代入演算子 ||= や ??= も短絡評価がベースです。a ||= b は a が falsy のときだけ b を代入します。また、|| が 0 や空文字も falsy と扱ってしまう問題を避けたい場合は、Null合体演算子 ?? を使うのが現在の定番です。?? は null と undefined のときだけ右辺を評価するので、0 や '' を有効な値として扱いたい場面で安全です。