ショートサーキット(short-circuit)は、条件分岐において評価を早期に終わらせる技法です。主に論理演算子(&&、||)を利用したものです。評価する条件が成立しない場合、その後の評価を省略します。
左側の値が falsy であれば、右側の値を評価せずに結果を決定します。
逆に、左側が truthy であれば、右側の値を評価してその値を返します。
左側の値が truthy であれば、右側を評価せずに左側の値を返します。
逆に、左側が falsy であれば、右側の値を評価してその値を返します。
const isLoggedIn = false; // 右側の console.log は評価されない isLoggedIn && console.log("ユーザーはログインしています");
ここでは、isLoggedIn が false なので console.log() は実行されません。
const isLoggedIn = true; // 右側の console.log が評価される isLoggedIn && console.log("ユーザーはログインしています");
ここでは、isLoggedIn が true なので console.log() が実行されます。
const username = "Alice"; // 右側の "ゲスト" は評価されない const displayName = username || "ゲスト"; console.log(displayName); // "Alice"
ここでは、username が truthy(つまり空でない文字列)なので、"ゲスト" は評価されず、username がそのまま displayName に設定されます。
const username = ""; // 右側の "ゲスト" が評価される const displayName = username || "ゲスト"; console.log(displayName); // "ゲスト"
ここでは、username が falsy(空文字列)なので、"ゲスト" が評価されて displayName に設定されます。
コピペではなく実際に打ち込んで練習してみましょう。
const isActive = true; isActive && console.log("アクティブな状態です");
ここでは、isActive が true なので、console.log() が実行されます。
const name = ""; const displayName = name || "デフォルトの名前"; console.log(displayName); // "デフォルトの名前"
&& は左が truthy の場合に右側を実行・返す。falsy の場合は即座に左側を返す
|| は左が falsy の場合に右側を評価して返す。truthy の場合はそのまま左側を返す
条件分岐を省略でき、コードをシンプルに保てる
if 文の代わりとして副作用のある処理やデフォルト値の代入に便利