【JavaScript】関数の引数に初期値（デフォルト値）を設定する実装テクニック

2026年1月23日

概要

関数を設計する際、特定の引数を「省略可能（オプション）」にしたい場合があります。 ES6以降のJavaScriptでは、引数定義の中で「初期値」を指定することで、呼び出し元が値を渡さなかった場合に自動的に適用される値を設定できます。これにより、必須パラメータと任意パラメータをスマートに管理でき、未定義エラー（undefined）を防ぐことができます。

仕様（入出力）

入力:
1. 購入金額（必須）
2. ポイント付与倍率（任意・省略時は通常倍率1倍を適用）
出力: 計算された獲得ポイント数のコンソール出力

基本の使い方

関数の引数リストにおいて 引数名 = 初期値 と記述します。この初期値は、引数が省略された場合、または明示的に undefined が渡された場合にのみ発動します。

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Parameters Demo</title>
    <script src="point-calc.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>ポイント計算の結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (point-calc.js)

ショッピングサイトのポイント計算を例に、倍率指定がない場合は自動的に「1倍」として処理するロジックです。

/**
 * 獲得ポイントを計算する関数
 * @param {number} purchaseAmount - 購入金額（必須）
 * @param {number} pointRate - ポイント倍率（省略時は1.0倍）
 * @returns {number} 獲得ポイント
 */
const calculatePoints = (purchaseAmount, pointRate = 1.0) => {
    // pointRateが省略された場合、自動的に 1.0 が使われます
    const points = purchaseAmount * pointRate;
    return points;
};

// パターン1: 倍率を省略（初期値 1.0 が適用される）
// 通常会員の計算などを想定
const standardPoints = calculatePoints(5000);
console.log(`引数省略時 (通常): ${standardPoints} pt`); // 5000 pt


// パターン2: 倍率を指定（指定した 3.0 が適用される）
// キャンペーン期間中やプレミアム会員などを想定
const campaignPoints = calculatePoints(5000, 3.0);
console.log(`引数指定時 (3倍): ${campaignPoints} pt`); // 15000 pt

カスタムポイント

計算式の変更: 上記は単純な掛け算ですが、pointRate = 0 のように初期値を0に設定して「オプション指定がない場合は機能オフ」といった使い方も可能です。
変数の利用: const DEFAULT_RATE = 1.5; のように定数を定義し、pointRate = DEFAULT_RATE と引数に設定することで、初期値の管理を一箇所に集約できます。

注意点

nullと0の扱い: 初期値が適用されるのは undefined の時だけです。もし calculatePoints(5000, 0) のように意図的に 0 を渡した場合、初期値の 1.0 ではなく 0 がそのまま使われます（結果は0ポイント）。「値があるかどうか」の判定には注意が必要です。
引数の順番: 初期値を持つ引数は、必ず「必須引数の後ろ」に配置してください。 function func(a = 1, b) と定義してしまうと、b だけに値を渡す記述が複雑になります。

応用

挨拶メッセージの生成（文字列操作）

数値計算だけでなく、文字列のオプション指定にも有効です。

// 敬称を省略可能にする例
const createGreeting = (userName, title = "様") => {
    return `${userName}${title}、こんにちは。`;
};

console.log(createGreeting("佐藤"));      // 佐藤様、こんにちは。
console.log(createGreeting("田中", "先生")); // 田中先生、こんにちは。