JavaScript：演算子と比較（=== の重要性）

出力 == 2

余りを求める記号は % （パーセント）。

console.log(17 % 5);

% は余りを返す演算子で、割合のパーセントとは無関係。偶数判定やグループ分けで頻繁に使う。

解答 == A

== は型を自動変換してから比べる。

A

文字列の "1" が数値に変換されてから比較されるので true になる。これが意図しない一致を生む原因で、だから === を使う。

出力 == false

=== はイコール3つ。型が違えば必ず false。

console.log(1 === "1");

型が違う時点で false。値が同じでも型が違えば別物と判定してくれるので、予期せぬ挙動を防げる。

let total = 100;
total ____ 50;
console.log(total);

出力 == 150

「足して代入する」複合代入演算子。

+=

total += 50 は total = total + 50 の省略形。-= *= /= も同じ形で使える。

解答 == B

&& は「かつ」。両方が true のときだけ true。

B

&&（かつ）は全部 trueで true、||（または）は1つでも trueなら true。

出力 == true

&& で2つの条件をつなぐ。isOpen は既にbooleanなので === true は不要。

const stock = 3;
const isOpen = true;
console.log(stock >= 1 && isOpen);

booleanの変数はそのまま条件に置くのがJavaScriptらしい書き方。isOpen === true は冗長。

const name = "";
console.log(name ____ "名無し");

出力 == 名無し

「または」を表す記号2つ。左が偽なら右が返る性質を使う。

||

|| は左が偽なら右を返すので既定値の指定に使える。ただし 0 も偽なので、0 を有効な値として扱いたい場合は ?? を使う。

解答 == C

中身があるかどうかではなく、値そのものを見る。

C

"0" は文字が1つ入った文字列なので真。空でない文字列はすべて真になる。0（数値）とは別物という点が引っかけ。

出力 == true

2で割った余りが0なら偶数。比較は === を使う。

const n = 14;
console.log(n % 2 === 0);

% と === の組み合わせは偶数判定の定番。3の倍数なら n % 3 === 0 と応用できる。

出力 == 合格

条件 ? 真のときの値 : 偽のときの値 の形で書く。

const score = 82;
console.log(score >= 60 ? "合格" : "不合格");

三項演算子は2択で値を決めるだけのときに使う。処理が複雑になるなら次章の if 文にしたほうが読みやすい。

出力4行が完全一致

テンプレートリテラルの中に比較式を書く。左辺の表示には引用符をそのまま文字として含める。

console.log(`1 == "1" → ${1 == "1"}`);
console.log(`1 === "1" → ${1 === "1"}`);
console.log(`0 == "" → ${0 == ""}`);
console.log(`0 === "" → ${0 === ""}`);

== は 0 と空文字まで同じと判定してしまう。これはフォームの未入力チェックで深刻なバグになる。=== なら型が違う時点で false なので安全。

出力2行が完全一致

一致判定は ===。文字数は .length で取れる。

const password = "abc12345";
const confirm = "abc12345";

console.log(`一致：${password === confirm}`);
console.log(`8文字以上：${password.length >= 8}`);

パスワード確認で == を使うと、型の違う値が一致と判定される危険がある。認証系は必ず ===。

出力3行が完全一致

&& を複数つなげられる。予算内は price <= budget。

const stock = 5;
const isOpen = true;
const price = 3000;
const budget = 2500;

console.log(`在庫あり かつ 営業中：${stock > 0 && isOpen}`);
console.log(`予算内：${price <= budget}`);
console.log(`購入可能：${stock > 0 && isOpen && price <= budget}`);

&& は何個でもつなげられる。1つでも false があれば全体が false になる。逆に「どれか1つでも満たせばよい」なら || を使う。

出力4行が完全一致

?? は「null か undefined のときだけ」右を返す。0 はそのまま残る。

const limit1 = 0;
const limit2 = null;

console.log(`limit1 || 100 → ${limit1 || 100}`);
console.log(`limit1 ?? 100 → ${limit1 ?? 100}`);
console.log(`limit2 || 100 → ${limit2 || 100}`);
console.log(`limit2 ?? 100 → ${limit2 ?? 100}`);

「上限0件」という設定が || では100に化ける——これは実際によくある事故。0 や "" を有効な値として扱いたいなら ?? を使うのが正解。

出力4行が完全一致

クーポンの有無は couponCode !== "" で判定できる。最終判定は || でつないで三項演算子に渡す。

const price = 4800;
const isMember = true;
const couponCode = "";

const hasCoupon = couponCode !== "";

console.log(`送料無料：${price >= 5000}`);
console.log(`会員割引：${isMember ? "あり" : "なし"}`);
console.log(`クーポン：${hasCoupon ? "あり" : "なし"}`);
console.log(`最終判定：${isMember || hasCoupon ? "割引のみ適用" : "割引なし"}`);

判定結果を hasCoupon という変数に切り出すのがポイント。条件式に名前を付けると、後半の複合条件が一気に読みやすくなる。実務では長い条件式ほど名前を付けて分解する。