Code Fix

上級

デフォルト引数はnullには適用されない(undefinedのときだけ)

関数のデフォルト引数は、渡された値が厳密にundefinedのときだけ使われます。nullを渡すと「値が無い」という意図があっても、nullがそのまま使われてデフォルト値は適用されません。

なぜエラーが出ないのか

出力: Hi null
(エラーなし)
JavaScriptは何も報告しません。文法として正しいためです
出力: Hi null
実際の挙動 — 期待した結果と食い違っている箇所
見つけ方
エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

パターン1

 1  function greet(name = "Guest") {
 2    return "Hi " + name;
 3  }
 4  console.log(greet(null     ));
                          ^
出力: Hi null期待: Hi Guest (エラーにはなりません)

デフォルト引数はundefinedのときだけ使われます。nullは値として扱われるため、そのまま"Hi null"になってしまいます。

直し方: null を undefined にします。

この問題を解いてみる →

広告
広告スロット(未設定)

パターン2

 1  function createUser(role = "guest") {
 2    return role;
 3  }
 4  console.log(createUser(null     ));
                               ^
出力: null期待: guest (エラーにはなりません)

「値が無い」ことを表すつもりでnullを渡しても、デフォルト引数の判定はundefinedとの厳密比較なので適用されません。

直し方: null を undefined にします。

この問題を解いてみる →

パターン3

 1  function connect(timeout = 3000) {
 2    return timeout;
 3  }
 4  console.log(connect(null     ));
                            ^
出力: null期待: 3000 (エラーにはなりません)

timeoutにnullを渡すとそのままnullが使われ、意図した既定値3000は適用されません。

直し方: null を undefined にします。

この問題を解いてみる →

パターン4

 1  function fetchData(limit = 10) {
 2    return limit;
 3  }
 4  console.log(fetchData(null     ));
                              ^
出力: null期待: 10 (エラーにはなりません)

nullは値として扱われるため、既定値10は使われずそのままnullになります。

直し方: null を undefined にします。

この問題を解いてみる →

パターン5

 1  function makeLabel(text = "untitled") {
 2    return text;
 3  }
 4  console.log(makeLabel(null     ));
                              ^
出力: null期待: untitled (エラーにはなりません)

デフォルト引数はundefinedのときだけ適用されます。nullを渡すとそのままnullになります。

直し方: null を undefined にします。

この問題を解いてみる →

よくある誤解

「nullもundefinedも空っぽを表すから同じように扱われるはず」という思い込みは誤りです。デフォルト引数の判定はundefinedとの厳密な比較で行われるため、nullは「値が渡された」とみなされます。

実務での勘所

デフォルト引数がnullに反応しないのは仕様のバグではなく、undefinedと明示的なnullを区別するためです。undefinedは「そもそも渡されなかった」ことを、nullは「渡されたが意図的に空である」ことを表すのが一般的な使い分けです。両方とも「値が無い」として同じデフォルト値にフォールバックさせたい場合は、関数の中でparam ?? デフォルト値のようにNullish coalescing演算子(??)を使います。??はnullとundefinedの両方だけをデフォルト値に置き換え、0や空文字列のような正当な値はそのまま通す点で||ともデフォルト引数とも違う、3つ目の選択肢です。

演習をはじめる

関連するエラー

広告
広告スロット(未設定)