【JavaScript】JavaScriptのデフォルトパラメーターについて

タグ :

JavaScriptのデフォルトパラメーターは、関数が呼び出されるときに引数が渡されなかった場合に、引数に自動的に設定される値を指定する機能です。
これにより、関数の引数に対して初期値を設定し、引数が省略された場合にエラーを防ぐことができます。

1 デフォルトパラメーターの基本構文
2 特徴とポイント
3 nullや0などの値が引数として渡された場合にデフォルトパラメーターを適用したい場合

デフォルトパラメーターの基本構文



function 関数名(引数1 = デフォルト値1, 引数2 = デフォルト値2) {
    // 関数の処理
}

デフォルトパラメーターの例



function greet(name = 'ゲスト', age = 30) {
    console.log(`こんにちは、${name}さん。あなたの年齢は${age}歳です。`);
}

greet(); // 出力: こんにちは、ゲストさん。あなたの年齢は30歳です。
greet('佐藤'); // 出力: こんにちは、佐藤さん。あなたの年齢は30歳です。
greet('佐藤', 25); // 出力: こんにちは、佐藤さん。あなたの年齢は25歳です。

特徴とポイント

1.順序が重要

デフォルトパラメーターは関数の引数リストの右側に置く必要があります。例えば、デフォルト値を持つ引数が非デフォルト値を持つ引数の前にあるとエラーになります。



// エラーになる
function func(a = 1, b) {
    // 処理
}

2.デフォルト値は評価される

デフォルトパラメーターの値は、関数が呼び出されるたびに評価されます。これにより、例えば関数内で動的に計算された値をデフォルト値として設定することができます。



function multiply(x, y = x) {
    return x * y;
}

console.log(multiply(5)); // 出力: 25 (5 * 5)
console.log(multiply(5, 2)); // 出力: 10 (5 * 2)

3.undefinedに対するデフォルト値

引数がundefinedである場合にのみデフォルト値が適用されます。他の値（例えば、nullや0）が引数として渡された場合、デフォルト値は適用されません。



function log(message = 'デフォルトメッセージ') {
    console.log(message);
}

log(); // 出力: デフォルトメッセージ
log(null); // 出力: null
log(0); // 出力: 0

nullや0などの値が引数として渡された場合にデフォルトパラメーターを適用したい場合

1.|| 演算子を使う

|| 演算子を使用して、引数が「falsy」な値（null、0、false、NaN、空文字列など）の場合にデフォルト値を設定します。



function greet(name) {
    name = name || 'ゲスト';
    console.log(`こんにちは、${name}さん。`);
}

greet(); // 出力: こんにちは、ゲストさん。
greet(null); // 出力: こんにちは、ゲストさん。
greet('佐藤'); // 出力: こんにちは、佐藤さん。
greet(0); // 出力: こんにちは、ゲストさん。

注意: この方法では、0やfalseなどの「falsy」な値もデフォルト値に置き換えられてしまいます。

2.?? 演算子を使う

?? 演算子は、引数が null または undefined の場合にのみデフォルト値を設定します。
これにより、0 や false などの値がデフォルト値に置き換えられないようにできます。



function greet(name) {
    name = name ?? 'ゲスト';
    console.log(`こんにちは、${name}さん。`);
}

greet(); // 出力: こんにちは、ゲストさん。
greet(null); // 出力: こんにちは、ゲストさん。
greet('佐藤'); // 出力: こんにちは、佐藤さん。
greet(0); // 出力: こんにちは、0さん。

3.条件付きでデフォルト値を設定する

引数が特定の条件を満たす場合にデフォルト値を設定するために、条件文を使用することもできます。



function greet(name) {
    if (name === undefined || name === null) {
        name = 'ゲスト';
    }
    console.log(`こんにちは、${name}さん。`);
}

greet(); // 出力: こんにちは、ゲストさん。
greet(null); // 出力: こんにちは、ゲストさん。
greet('佐藤'); // 出力: こんにちは、佐藤さん。
greet(0); // 出力: こんにちは、0さん。