?? による null 合体
null と undefined の場合にのみデフォルト値を指定します。
「?? による null 合体」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
デフォルト値の提供
値がない場合に備えて、代替値を用意したいことはよくあります。Null合体演算子を使うと、必要な場合にだけデフォルト値を設定できます。
const name = undefined;
console.log(name ?? "Guest"); // "Guest"?? 演算子
二重疑問符演算子は、左辺が null または undefined の場合にだけ右辺の値を返します。
console.log(null ?? "fallback"); // "fallback"
console.log(undefined ?? "fallback"); // "fallback"
console.log("hi" ?? "fallback"); // "hi"|| を使わない理由
論理 OR の || は、0、""、false など、あらゆる falsy な値を代替値に置き換えます。そのため、実際のデータでは不適切な場合がよくあります。
console.log(0 || 10); // 10 (probably unwanted)
console.log(0 ?? 10); // 0 (keeps the real value)空文字列の場合
|| を使うと意図的に設定した空文字列が置き換えられますが、?? では "" は nullish ではないため、そのまま保持されます。
const note = "";
console.log(note || "none"); // "none"
console.log(note ?? "none"); // ""false は保持される
実際の false 値は ?? では保持されますが、|| では置き換えられます。
const enabled = false;
console.log(enabled ?? true); // false
console.log(enabled || true); // true設定を安全に読み取る
?? は、0 や空の値がユーザーが意図的に選択できる有効な設定値である場合に適しています。
function getVolume(settings) {
return settings.volume ?? 50;
}
console.log(getVolume({ volume: 0 })); // 0変数にも使える
任意の式に使うことができ、nullish ではない最初のオペランドを返します。
let cached = null;
const value = cached ?? computeValue();
function computeValue() { return 99; }
console.log(value); // 99短絡評価
|| や && と同様に、?? も短絡評価を行います。左辺が nullish でなければ、右辺は評価されません。
function side() { console.log("called"); return 1; }
const x = "ready" ?? side(); // side() never runs
console.log(x);&& や || とは直接混在できない
曖昧さを避けるため、括弧なしで ?? を && や || と混在させると構文エラーになります。
const a = true, b = null;
// const c = a || b ?? 1; // SyntaxError
const c = (a || b) ?? 1;
console.log(c);デフォルト関数引数と ?? の違い
デフォルト引数が適用されるのは、引数が undefined の場合だけです。?? では、明示的に渡された null も処理できます。
function greet(name = "Guest") { return "Hi " + name; }
console.log(greet(null)); // "Hi null"
function greet2(name) { return "Hi " + (name ?? "Guest"); }
console.log(greet2(null)); // "Hi Guest"どちらを選ぶべきか
0、""、false を有効な値として保持する必要がある場合は ?? を使います。falsy な値をすべて代替値にしたい場合にだけ || を使います。
const retries = 0;
console.log(retries ?? 3); // 0 kept確認問題
演算子を比較してみましょう。
まとめ
?? 演算子は、左辺が null または undefined の場合にだけ右辺を返し、0、""、false は保持します。そのため、実際のデータにデフォルト値を設定する場合は || より安全です。短絡評価を行い、括弧なしで &&/|| と混在させることはできません。
よくある質問
「?? による null 合体」レッスンは無料ですか？
はい。「?? による null 合体」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「?? による null 合体」で何を学びますか？
null と undefined の場合にのみデフォルト値を指定します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「?? による null 合体」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ?. 演算子によるオプショナルチェーン
- ?? による null 合体
- ?. と ?? を組み合わせる
- オプショナルな呼び出しとインデックスアクセス