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

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

JavaScriptの短絡代入とは？

短絡代入（ショートサーキット代入）とは、論理演算子 || や && による式の評価が途中で確定した時点で、残りの式を評価せずに処理を終えるという性質を利用した代入テクニックです。

|| 演算子は左から順に評価を行い、最初に真値（truthy）となった値を返します。一方、&& 演算子は最初に偽値（falsy）となった値を返します。この動作を活かすことで、条件に応じた値の代入を簡潔に記述できます。

代表的な偽値（falsy）の値

  • false
  • 0（数値のゼロ）
  • ""（空文字列）
  • null
  • undefined
  • NaN

なお、JavaScriptでは数値の 0だけが偽値 として扱われ、それ以外の数値はすべて真値になる点に注意しましょう。

サンプルコード

以下は、JavaScriptで短絡代入を実装した例です。

<!DOCTYPE html>
<html lang="en">
<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,
   .sample {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Short-circuit assignment</h1>
<div class="sample">a=22 || 0 || 0<br />b=0 && 22 && 22</div>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>Click on the above button to see the values of variable a and b in the above expression</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   BtnEle.addEventListener("click", () => {
      let a, b;
      a = 22 || 0 || 0;
      b = 0 && 22 && 22;
      resEle.innerHTML = "a = " + a + "<br>";
      resEle.innerHTML += "b = " + b + "<br>";
   });
</script>
</body>
</html>

実行結果

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

「Click Here」ボタンをクリックすると、各式の評価結果が表示されます。

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

結果の解説

  • a = 22 || 0 || 0：左から順に評価され、最初の 22 が真値と判定された時点で評価が打ち切られます。そのため a には 22 が代入されます。
  • b = 0 && 22 && 22：&& 演算子では、最初の 0 が偽値と判定された時点で評価が終了します。そのため b には 0 が代入されます。

このように、短絡評価によって後続の式が一切実行されないことがポイントです。

応用：ES2021の論理代入演算子

ES2021以降のJavaScriptでは、短絡評価を組み込んだ専用の代入演算子が使えます。

  • x ||= value ： x が偽値のときだけ value を代入（x = x || value と同等）
  • x &&= value ： x が真値のときだけ value を代入（x = x && value と同等）
  • x ??= value ： x が null または undefined のときだけ value を代入

デフォルト値の設定などによく使われるパターンなので、あわせて覚えておくと便利です。

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

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

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

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