JavaScriptやTypeScriptにおいて、デフォルト引数はコードを簡潔にする強力なツールです。しかし、実務の現場では「なんとなく」使っていると、予期せぬバグや設計の負債を招くことがあります。単なる「値の初期化」を超えた、プロの視点での活用術を解説します。
undefinedとnullの挙動を区別する
多くのエンジニアが陥る罠が、nullを渡した時の挙動です。デフォルト引数は、実引数が「undefined」の時にのみ発動します。例えば、APIから返ってきたレスポンスが「null」である場合、デフォルト値は適用されず「null」のまま処理が進み、後続のメソッド呼び出しでクラッシュすることがあります。
実務では、引数がnullの可能性も考慮し、論理演算子（||）やnull合体演算子（??）を併用して値を補完するのが安全です。特にライブラリや共有関数を作成する際は、明示的にnullチェックを行う実装を推奨します。
オブジェクト引数でのデフォルト値の罠
設定オブジェクトを引数として受け取る際、以下のような実装をよく見かけます。
function setup(options = { theme: ‘light’ }) { … }
これには大きな欠点があります。もし呼び出し側が「{ fontSize: 16 }」とだけ渡すと、デフォルトの「theme」は上書きされ、消滅してしまいます。
この問題を解決するには、デフォルト引数とObject.assign、あるいはスプレッド構文を組み合わせるのが鉄則です。関数内部で「const { theme = ‘light’, …rest } = options ?? {};」のように分割代入を行うことで、柔軟かつ堅牢な設定管理が可能になります。
関数をデフォルト値にする際の注意点
コールバック関数などをデフォルト値として設定する場合、注意が必要です。
function track(event, callback = () => console.log(‘default’)) { … }
この書き方は一見便利ですが、関数が実行されるたびに新しい関数インスタンスが生成されます。もしこの関数がReactのuseEffectの依存配列に含まれていたり、memo化されたコンポーネントに渡される場合、不要な再レンダリングや無限ループの原因となります。
このようなケースでは、関数外で定数を定義し、それをデフォルト値として参照させることで、参照透過性を保つことができます。
まとめ
デフォルト引数は単なる「省略機能」ではありません。関数のインターフェースを定義する重要な設計要素です。
1. データの欠損（null）を許容するか厳密に判断する
2. オブジェクトのプロパティは分割代入でデフォルト値を当てる
3. 再レンダリングの影響を考慮して関数の参照を管理する
これら3点を意識するだけで、あなたの書くコードの信頼性は一段と向上するはずです。ぜひ、次回のコードレビューから意識してみてください。