【JavaScript】短絡評価について理解する

Posted at 2026-07-12

はじめに

こんにちは。

JavaScriptには、短絡評価というものがあります。
短絡評価とは、&& や || 、?? といった演算子が、左から順に評価し、結果が確定した時点で残りの評価をスキップする仕組みです。
この記事では、各演算子の短絡評価についてどのような挙動になるのかをまとめます。

短絡評価について学ぶ前に、前提知識として truthy と falsy を知っておく必要があります。
JavaScriptでは、値を条件式として評価したとき false とみなされる値を falsy（偽値） と呼びます。
falsy の値の一覧は次のとおりです。

これら以外の値は truthy（真値） です。
"hello"、1、[]、{} などは、条件式の中では true として扱われます。

&& （AND演算子）は、すべてのオペランドが truthy でなければ成立しません。
なので、左側の値を見た時点でそれが falsy であれば、右側を評価せずにそのまま左側の値を返します。

console.log(0 && "b"); // 0

0 は falsy なので、右側は評価されずそのまま 0 が返されます。
左側が truthy の場合は、右側まで評価が進み、最後のオペランドの値が返ります。

console.log("a" && "b"); // "b"

"a" は truthy なので右側へ進み、最後の "b" がそのまま返されます。

この仕組みを使うと、条件付きで処理を実行する書き方ができます。

const user = { name: "Alice" };

user && console.log(user.name); // "Alice"

if 文で書くと次のようになります。

if (user) {
  console.log(user.name);
}

短絡評価を使った && の書き方は、この if 文と同じ条件で右側が実行されます。

|| （OR演算子）は、オペランドが1つでも truthy であれば成立します。
なので、左側が truthy であれば、右側を評価せずに左側の値を返します。

const name = "Alice";
const displayName = name || "guest";

console.log(displayName); // "Alice"

"Alice" は truthy なので、右側の "guest" は評価されず、displayName には "Alice" が入ります。

左側が falsy の場合は、右側が評価されてその値が返ります。

const name = "";
const displayName = name || "guest";

console.log(displayName); // "guest"

空文字列 "" は falsy なので、右側の "guest" が返されます。

??（Null合体演算子）は、左側が null または undefined の場合だけ右側を返します。

|| では左側がfalsyな値であった場合にすべてデフォルト値を返すため、0 や ""が左辺に入った場合に予期しない挙動になってしまう可能性があります。
?? は 0 や "" はそのまま通すので、「値がないときだけ代わりを使う」という意図を正確に表現できます。

const input = "";

console.log(input || "default");  // "default"
console.log(input ?? "default");  // ""

お読みいただきありがとうございました。