null を渡しても既定値は使われないのですか

使われません。既定値が適用されるのは引数が undefined のときだけです。API から返ってきた値が null という場面はよくあるので、null も既定値に寄せたいなら関数の中で `role ?? "準備中"` のように書きます。

既定値のある引数はどこに置けば良いですか

必須の引数を左、省略できる引数を右に並べます。既定値のある引数を前に置くと、省略したいときに undefined を明示的に渡す羽目になり、呼び出し側が読みにくくなります。

既定値に配列やオブジェクトを書いても大丈夫ですか

大丈夫です。既定値の式は省略された呼び出しのたびに評価されるため、毎回新しい配列やオブジェクトが作られます。他の言語で問題になる、既定値が使い回されて前回の内容が残るという事故は JavaScript では起きません。

デフォルト引数｜コードで実践

このレッスンで分かること

引数の後ろに = と値を書くと、省略されたときの既定値になります

既定値が使われるのは、引数が undefined のときだけです

渡し忘れると、画面に undefined と出る

スキル一覧に、習熟度を添えた 1 行を出す関数を用意したとします。

JavaScript

function skillLine(skill, level) {
  return skill + "（" + level + "）";
}

console.log(skillLine("CSS", "実務で使える"));
// => CSS（実務で使える）
console.log(skillLine("JavaScript"));
// => JavaScript（undefined）

渡されなかった引数は undefined になり、それがそのまま文字列に混ざりました。ユーザーから見れば意味不明な表示で、明らかなバグです。呼び出す側に「必ず 2 つ渡してください」と約束させることもできますが、関数の側で備えておくほうが確実です。

引数の後ろに = と値を書くだけで、省略されたときに使う値を決められます。

JavaScript

function skillLine(skill, level = "学習中") {
  return skill + "（" + level + "）";
}

console.log(skillLine("JavaScript"));
// => JavaScript（学習中）
console.log(skillLine("CSS", "実務で使える"));
// => CSS（実務で使える）

渡せばその値が使われ、渡さなければ既定値が使われます。よく使う値を既定値にしておけば、ほとんどの呼び出しは引数 1 つで済みます。アロー関数でもまったく同じ書き方ができます。

空文字列や null は、既定値に置き換わらない

ここがいちばんのつまずきどころです。既定値が使われるのは、引数が undefined のときだけです。

渡した値	使われる値
何も渡さない	既定値
`undefined`	既定値
`null`	`null`
`""` 空文字列	`""`
`0`	`0`

入力欄が空のまま送信されると、届くのは undefined ではなく空文字列です。API から返ってくる値は null のことがよくあります。どちらも既定値には倒れないので、そこまで面倒を見たいなら関数の中で level ?? "学習中" のように自分で書きます。第 3 章で学んだ ?? は null と undefined の両方に反応する、というのが違いです。

省略できる引数は、右に置く

既定値のある引数は、なるべく後ろに並べます。前に置くと、省略したいときに undefined をわざわざ書いて渡す羽目になります。

JavaScript

// 使いにくい
function bad(level = "学習中", skill) {
  return skill + "（" + level + "）";
}
console.log(bad(undefined, "JavaScript"));

// 使いやすい
function good(skill, level = "学習中") {
  return skill + "（" + level + "）";
}
console.log(good("JavaScript"));

必須の引数を左、省略できる引数を右。この並びを守るだけで、関数の使い心地が変わります。既定値には固定の値だけでなく式も書けますが、参照できるのは自分より前に並んでいる引数だけです。既定値は左から順に決まるためです。

よくある間違い

既定値を書いたから null 対策も済んだと思い込む — skillLine("JavaScript", null) は JavaScript（null） になります。既定値は undefined にしか反応しません
既定値のある引数を飛ばして呼ぶ — 引数は書いた順に前から詰められます。2 つめを省いて 3 つめだけ渡す、という呼び方はできません

このレッスンで分かること

引数の後ろに = と値を書くと、省略されたときの既定値になります

既定値が使われるのは、引数が undefined のときだけです

渡し忘れると、画面に undefined と出る

スキル一覧に、習熟度を添えた 1 行を出す関数を用意したとします。

JavaScript

function skillLine(skill, level) {
  return skill + "（" + level + "）";
}

console.log(skillLine("CSS", "実務で使える"));
// => CSS（実務で使える）
console.log(skillLine("JavaScript"));
// => JavaScript（undefined）

引数の後ろに = と値を書くだけで、省略されたときに使う値を決められます。

JavaScript

function skillLine(skill, level = "学習中") {
  return skill + "（" + level + "）";
}

console.log(skillLine("JavaScript"));
// => JavaScript（学習中）
console.log(skillLine("CSS", "実務で使える"));
// => CSS（実務で使える）

空文字列や null は、既定値に置き換わらない

ここがいちばんのつまずきどころです。既定値が使われるのは、引数が undefined のときだけです。

渡した値	使われる値
何も渡さない	既定値
`undefined`	既定値
`null`	`null`
`""` 空文字列	`""`
`0`	`0`

省略できる引数は、右に置く

既定値のある引数は、なるべく後ろに並べます。前に置くと、省略したいときに undefined をわざわざ書いて渡す羽目になります。

JavaScript

// 使いにくい
function bad(level = "学習中", skill) {
  return skill + "（" + level + "）";
}
console.log(bad(undefined, "JavaScript"));

// 使いやすい
function good(skill, level = "学習中") {
  return skill + "（" + level + "）";
}
console.log(good("JavaScript"));

よくある間違い

既定値を書いたから null 対策も済んだと思い込む — skillLine("JavaScript", null) は JavaScript（null） になります。既定値は undefined にしか反応しません
既定値のある引数を飛ばして呼ぶ — 引数は書いた順に前から詰められます。2 つめを省いて 3 つめだけ渡す、という呼び方はできません

デフォルト引数

渡し忘れると、画面に undefined と出る

空文字列や null は、既定値に置き換わらない

省略できる引数は、右に置く

よくある間違い

要件

入出力例

ヒント

メモ

デフォルト引数

渡し忘れると、画面に undefined と出る

空文字列や null は、既定値に置き換わらない

省略できる引数は、右に置く

よくある間違い

要件

入出力例

ヒント

メモ