論理演算子で既定値（|| の注意） — const v = a || 'def'（'' や 0 も代替される）
JavaScript では 論理演算子 || を使って「左側が falsy（falseっぽい値）なら右側を使う」という書き方がよく使われます。
初心者は「左がダメなら右を使う」と覚えると理解しやすいです。
ただし ''（空文字）や 0 も falsy と判定されるため、意図せず右側が使われる点に注意が必要です。
基本のコード例
const a = "";
const v = a || "default";
console.log(v); // → "default" （空文字は falsy 扱い）
||の動作: 左側が falsy（false, 0, "", null, undefined, NaN）なら右側を返す。- 注意: 「値あり」と考えたい
0や""も falsy なので、右側が選ばれてしまう。
よく使うテンプレート集
簡単なデフォルト値設定
function greet(name) {
const userName = name || "ゲスト";
console.log(`こんにちは ${userName}`);
}
greet("Aki"); // → "こんにちは Aki"
greet(""); // → "こんにちは ゲスト" （空文字が代替される）
数値のデフォルト（注意点あり）
function setPage(page) {
const currentPage = page || 1;
console.log("page:", currentPage);
}
setPage(3); // → page: 3
setPage(0); // → page: 1 （0が代替されてしまう！）
例題: || と ?? の違い
const a = 0;
const v1 = a || 100;
console.log(v1); // → 100 （0は falsy 扱い）
const v2 = a ?? 100;
console.log(v2); // → 0 （null/undefined だけ代替）
||→ falsy（0, “”, false, null, undefined, NaN）なら右側。??→ null または undefined のときだけ右側。
実務でのコツ
- 文字列や数値の「空値」を許容したいなら
??を使う。 ||は「空文字や 0 も代替される」ので注意。- ユーザー入力や設定値のデフォルト:
- 「未指定ならデフォルト」→
?? - 「空文字や 0 もデフォルトにしたい」→
||
- 「未指定ならデフォルト」→
ありがちなハマりポイントと対策
0や""が勝手に置き換わる:- 対策:
??を使う。
- 対策:
falseが代替される:const flag = false || true; console.log(flag); // → true （falseが代替される）- 対策:
??を使うと false はそのまま残る。
- 対策:
練習問題（ページネーション設定）
function setupPagination({ page, perPage } = {}) {
const currentPage = page ?? 1; // null/undefined のときだけ 1
const itemsPerPage = perPage || 20; // 0 や "" も代替される
console.log(`page=${currentPage}, perPage=${itemsPerPage}`);
}
setupPagination(); // → page=1, perPage=20
setupPagination({ page: 0 }); // → page=0, perPage=20
setupPagination({ perPage: 0 }); // → page=1, perPage=20 （0が代替される）
直感的な指針
||= falsy なら右側（0, “”, false も含む）。??= null/undefined なら右側。- 「未指定ならデフォルト」には
??を使うのが安全。 - 「空文字や 0 もデフォルトにしたい」なら
||を使う。
これを覚えれば「デフォルト値の設定」を安全に書けるようになり、意図しない置き換えを防げます。