JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

短絡評価（ショートサーキット評価）は、主に論理演算子 &&（AND）と ||（OR）を使って行われます。式は左から右へ順番に評価され、結果が確定した時点で残りの式の評価はスキップされます。

&& 演算子の場合

&&（AND）演算子による短絡評価では、最初の式が false と評価された時点で、式全体の結果も false に確定します。そのため、残りの式は一切評価されません。

|| 演算子の場合

||（OR）演算子による短絡評価では、最初の式が true と評価された時点で、式全体の結果も true に確定します。こちらも同様に、残りの式は評価されません。

この仕組みを利用すると、不要な処理を省略できるため、パフォーマンス向上やエラー防止に役立ちます。

JavaScriptでの短絡評価のコード例

以下は、JavaScriptで短絡評価の動作を確認できるコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Short-circuit evaluation</h1>
<div class="result"></div>
<br />
<button class="Btn">&& short circuit evaluation</button>
<button class="Btn">|| short circuit evaluation</button>
<h3>上のボタンをクリックすると短絡評価の動作を確認できます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelectorAll(".Btn");
    function retTrue() {
        resEle.innerHTML += "True <br>";
        return true;
    }
    function retFalse() {
        resEle.innerHTML += "False <br>";
        return false;
    }
    BtnEle[0].addEventListener("click", () => {
        resEle.innerHTML = "&& evaluation<br>";
        retFalse() && retTrue();
    });
    BtnEle[1].addEventListener("click", () => {
        resEle.innerHTML = "|| evaluation <br>";
        retTrue() || retFalse();
    });
</script>
</body>
</html>

実行結果

JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

「&& short circuit evaluation」ボタンをクリックすると、retFalse() が先に評価されて false を返すため、retTrue() は実行されず「False」のみ表示されます。

JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

「|| short circuit evaluation」ボタンをクリックすると、retTrue() が先に評価されて true を返すため、retFalse() は実行されず「True」のみ表示されます。

JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

このように、画面出力を見ると、短絡評価によって2つ目の関数が呼び出されていないことが確認できます。
短絡評価は、条件分岐の最適化だけでなく、null や undefined チェックの簡潔な記述など、実務でも頻繁に活用される重要なテクニックです。

  1. JavaScript入門：ブール値の短絡評価（ショートサーキット評価）の仕組みと使い方

    JavaScriptでは、論理演算子 &&（論理AND）や ||（論理OR）を使う際に、「短絡評価（ショートサーキット評価）」と呼ばれる特殊な動作が発生します。これは、左側のオペランドだけで式全体の結果が確定できる場合、右側のオペランドを評価せずにスキップする仕組みです。 短絡評価の基本ルール &&（論理AND）：左辺が false の場合、式全体が必ず false になるため、右辺は評価されません。 ||（論理OR）：左辺が true の場合、式全体が必ず true になるため、右辺は評価されません。 この性質を利用すると、不要な関数呼び出しを避けたり、条

  2. JavaScriptの短絡代入（ショートサーキット代入）の仕組みと使い方を解説

    JavaScriptの短絡代入とは？ 短絡代入（ショートサーキット代入）とは、論理演算子 || や && による式の評価が途中で確定した時点で、残りの式を評価せずに処理を終えるという性質を利用した代入テクニックです。 || 演算子は左から順に評価を行い、最初に真値（truthy）となった値を返します。一方、&& 演算子は最初に偽値（falsy）となった値を返します。この動作を活かすことで、条件に応じた値の代入を簡潔に記述できます。 代表的な偽値（falsy）の値 false 0（数値のゼロ） （空文字列） null undefined NaN なお、Jav