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

JavaScript入門:ブール値の短絡評価(ショートサーキット評価)の仕組みと使い方

JavaScriptでは、論理演算子 &&(論理AND)や ||(論理OR)を使う際に、「短絡評価(ショートサーキット評価)」と呼ばれる特殊な動作が発生します。これは、左側のオペランドだけで式全体の結果が確定できる場合、右側のオペランドを評価せずにスキップする仕組みです。

短絡評価の基本ルール

  • &&(論理AND):左辺が false の場合、式全体が必ず false になるため、右辺は評価されません。
  • ||(論理OR):左辺が true の場合、式全体が必ず true になるため、右辺は評価されません。

この性質を利用すると、不要な関数呼び出しを避けたり、条件によって処理を分岐させたりすることができます。以下に、短絡評価の動作を実際に確認できるサンプルコードを示します。

サンプルコード

<!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>短絡評価(ショートサーキット)</h1>
<div class="result"></div>
<br />
<button class="Btn">&& による短絡評価</button>
<button class="Btn">|| による短絡評価</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 = "&& 評価<br>";
        retFalse() && retTrue();
    });
    BtnEle[1].addEventListener("click", () => {
        resEle.innerHTML = "|| 評価 <br>";
        retTrue() || retFalse();
    });
</script>
</body>
</html>

実行結果

JavaScript入門:ブール値の短絡評価(ショートサーキット評価)の仕組みと使い方

「&& による短絡評価」ボタンをクリックした場合:

JavaScript入門:ブール値の短絡評価(ショートサーキット評価)の仕組みと使い方

この場合、retFalse() が先に実行されて false を返すため、&& の右側にある retTrue() は呼び出されません。そのため、画面には「False」だけが表示されます。

「|| による短絡評価」ボタンをクリックした場合:

JavaScript入門:ブール値の短絡評価(ショートサーキット評価)の仕組みと使い方

こちらも同様に、retTrue() が先に実行されて true を返すため、|| の右側にある retFalse() は評価されません。結果として「True」だけが出力されます。

まとめ

短絡評価を理解しておくと、条件分岐の最適化やエラー回避(例:obj && obj.property のような安全なプロパティアクセス)など、実践的なテクニックに応用できます。ぜひ実際にコードを動かして挙動を確かめてみてください。

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

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

  2. JavaScriptの短絡評価(ショートサーキット評価)とは?&& と || の動作を解説

    短絡評価(ショートサーキット評価)は、主に論理演算子 &&(AND)と ||(OR)を使って行われます。式は左から右へ順番に評価され、結果が確定した時点で残りの式の評価はスキップされます。 && 演算子の場合 &&(AND)演算子による短絡評価では、最初の式が false と評価された時点で、式全体の結果も false に確定します。そのため、残りの式は一切評価されません。 || 演算子の場合 ||(OR)演算子による短絡評価では、最初の式が true と評価された時点で、式全体の結果も true に確定します。こちらも同様に、残りの式は評価され