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

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

デフォルト引数は function fn(name = 'Guest') の形で、undefined が来たら使われます

null や 0 ではデフォルトは発動しません、undefined だけがトリガー

最小例は function doubleOr(n = 10) { return n * 2; }

デフォルト引数とは

引数を省略したときの初期値を = で指定する。本レッスンでは、デフォルト引数の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

デフォルト引数で省略を許す

関数を呼び出すとき、引数を 毎回必ず指定する のは少し面倒なことがあります。例えば「割引率を渡せば適用する、渡さなければ 10% 割引」のように、 指定がなければこの値 という挙動を作りたい場面はとても多いです。 JavaScript ではこれを デフォルト引数 で実現できます。

デフォルト引数とは、引数が undefined のときに自動で使われる初期値のことです。

古い JavaScript では n = n || 10 のように || を使う手法がよく使われていましたが、 ES2015 以降は文法で書けるようになりました。コードがすっきりして意図が伝わりやすくなる、 モダン JS の代表的な機能の 1 つです。

デフォルト引数の文法

デフォルト引数は、関数の仮引数に = で初期値を書くだけです。

JavaScript

function greet (name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet());           // Hello, Guest!
console.log(greet('Alice'));    // Hello, Alice!

アロー関数でも全く同じように書けます。 const greet = (name = 'Guest') => ... のような形です。複数の引数それぞれにデフォルトを付けることもできます。

JavaScript

const makeUrl = (host = 'localhost', port = 3000) => `http://${host}:${port}`;

console.log(makeUrl());                  // http://localhost:3000
console.log(makeUrl('example.com'));     // http://example.com:3000
console.log(makeUrl('example.com', 80)); // http://example.com:80

動きを追ってみる

引数を渡さなかったときに初期値が使われる様子を確認します。 default が動くのは引数が undefined のときだけで、 null や 0 、空文字を渡したときは default は使われません。

JavaScript

function add (a, b = 10) {
  return a + b;
}

console.log(add(5));         // 15 (b は 10)
console.log(add(5, 20));     // 25 (b は 20)
console.log(add(5, null));   // 5  (null は null のまま)
console.log(add(5, undefined)); // 15 (undefined は default に置き換わる)

渡した値	`b` の値	デフォルト発動
省略	`10`	する
`undefined`	`10`	する
`null`	`null`	しない
`0`	`0`	しない
`''`	`''`	しない
`false`	`false`	しない

undefined だけが default のトリガーになる、というのは試験でもよく問われるポイントです。 null は別の意味を持つ値なので置き換えられません。

diagram (will load when visible)

default を活かす設計

デフォルト引数を使うと、引数の意味がコードを読むだけで分かるようになります。

JavaScript

// Before — || でデフォルト処理
function welcome (name) {
  const n = name || 'Guest';
  return `Welcome, ${n}!`;
}

// After — デフォルト引数
function welcomeBetter (name = 'Guest') {
  return `Welcome, ${name}!`;
}

After のほうが signature を見るだけで挙動が分かるので、ドキュメント代わりにもなります。チームで使うときも、 name = 'Guest' という宣言は強い意思表示になります。

デフォルト値には固定値だけでなく、 関数の呼び出し結果 や 他の引数を使った式 も書けます。 (x, y = x * 2) のような書き方も可能です。

よくある間違い

以下のとおりです。

null を渡したときに default が効くと勘違いする (実際は undefined のときだけ)
引数の途中だけ default 化しているのに、その引数を省略しようとする (位置で渡すので途中だけ省略は不可)
配列やオブジェクトを default にすると毎回 新しい参照 が作られる (思った通りの挙動だが意識しておく)

JavaScript

// 引数の順番に注意
function wrong (a = 1, b) {
  return a + b;
}
// wrong(undefined, 5) のように書く必要がある

「絶対に必要な引数」と「省略してよい引数」を分けるなら、デフォルト値のある引数は末尾にまとめると呼び出し側がシンプルになります。

この章のポイント

ここまでの要点 デフォルト引数は name = 'Guest' の形、undefined のときだけ発動。null や 0 は素通り。デフォルト付き引数は末尾にまとめる、|| 方式より文法のほうが読みやすい。

やってみよう

引数 n を受け取り、 n の 2 倍を返す関数を書きましょう。手順は次のとおりです。

関数 doubleOr を定義する (function でもアロー関数でも可)
引数 n のデフォルト値を 10 に設定する
return n * 2; を書く
doubleOr() が 20、doubleOr(3) が 6 を返すか確認

ただし n を省略したら 10 を 2 倍した 20 を返すように、デフォルト引数を 10 に設定してください。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか？

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか？

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は 残余引数 ...args で、引数を省略したときの初期値を = で指定するを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

デフォルト引数の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. デフォルト引数とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

デフォルト引数

デフォルト引数で省略を許す

デフォルト引数の文法

動きを追ってみる

default を活かす設計

よくある間違い

やってみよう

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

Q. ES6 以降の新機能は使っても大丈夫ですか？

Q. TypeScript に進む価値はありますか？

次のレッスン

要件

入出力例

ヒント

メモ