ホーム » JavaScript チュートリアル » JavaScript デフォルトパラメータ

JavaScript デフォルトパラメータ

概要: このチュートリアルでは、ES6 での JavaScript デフォルトパラメータの使用方法を学習します。

TL;DR

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say('Hello') // 'Hello'Code language: JavaScript (javascript)

say() 関数の message パラメータのデフォルト値は 'Hi' です。

JavaScript では、関数に値が渡されない場合、または `undefined` が渡された場合に、名前付きパラメータをデフォルト値で初期化することができます。

引数 vs. パラメータ

引数とパラメータという用語は、場合によっては同じ意味で使用されることがあります。しかし、定義上、パラメータは関数宣言で指定するものであり、引数は関数に渡すものです。

次の add() 関数を見てみましょう。

function add(x, y) {
   return x + y;
}

add(100,200);Code language: JavaScript (javascript)

この例では、x と y は add() 関数のパラメータであり、add() 関数に渡された値 100 と 200 は引数です。

関数の JavaScript デフォルトパラメータの設定

JavaScript では、パラメータのデフォルト値は undefined です。つまり、引数を関数に渡さない場合、パラメータは undefined というデフォルト値を持ちます。

次の例をご覧ください。

function say(message) {
    console.log(message);
}

say(); // undefinedCode language: JavaScript (javascript)

say() 関数は message パラメータを受け取ります。say() 関数に引数を渡さなかったため、message パラメータの値は undefined です。

message パラメータにデフォルト値 10 を与えたいとします。

三項演算子を使用してパラメータ値をテストし、それが undefined の場合にデフォルト値を割り当てるのが一般的な方法です。

function say(message) {
    message = typeof message !== 'undefined' ? message : 'Hi';
    console.log(message);
}
say(); // 'Hi'Code language: JavaScript (javascript)

この例では、say() 関数に値を渡していません。したがって、message 引数のデフォルト値は undefined です。関数内で、message 変数に Hi という文字列を再代入しました。

ES6 は、次のように関数パラメータのデフォルト値を設定するより簡単な方法を提供しています。

function fn(param1=default1, param2=default2,..) {
}Code language: JavaScript (javascript)

上記の構文では、代入演算子(=)とデフォルト値をパラメータ名の後に使用して、そのパラメータのデフォルト値を設定します。例えば

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'Code language: JavaScript (javascript)

動作の仕組み。

  • 最初の関数呼び出しでは、say() 関数に引数を渡さなかったため、message パラメータはデフォルト値 'Hi' を取得しました。
  • 2 番目の関数呼び出しでは、undefined を say() 関数に渡したため、message パラメータもデフォルト値 'Hi' を取得しました。
  • 3 番目の関数呼び出しでは、'Hello' という文字列を say() 関数に渡したため、message パラメータは文字列 'Hello' をデフォルト値として取得しました。

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

関数パラメータのデフォルト値を設定するための利用可能なオプションをいくつか学ぶために、さらにいくつかの例を見てみましょう。

1) `undefined` 引数の渡し方

次の createDiv() 関数は、特定の高さ、幅、およびボーダースタイルを持つ新しい <div> 要素をドキュメント内に作成します。

function createDiv(height = '100px', width = '100px', border = 'solid 1px red') {
    let div = document.createElement('div');
    div.style.height = height;
    div.style.width = width;
    div.style.border = border;
    document.body.appendChild(div);
    return div;
}Code language: JavaScript (javascript)

以下では、関数に引数を渡していないため、createDiv() 関数はパラメータのデフォルト値を使用します。

createDiv();

高さおよび幅パラメータのデフォルト値と特定のボーダースタイルを使用したいとします。この場合、次のように最初の 2 つのパラメータに undefined 値を渡す必要があります。

createDiv(undefined,undefined,'solid 5px blue');Code language: JavaScript (javascript)

2) デフォルトパラメータの評価

JavaScript エンジンは、関数を呼び出したときにデフォルトの引数を評価します。次の例を見てください。

function put(toy, toyBox = []) {
    toyBox.push(toy);
    return toyBox;
}

console.log(put('Toy Car'));
// -> ['Toy Car']
console.log(put('Teddy Bear'));
// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear']Code language: JavaScript (javascript)

パラメータは、関数の戻り値であるデフォルト値を取ることができます。

次の例を考えてみましょう。

function date(d = today()) {
    console.log(d);
}
function today() {
    return (new Date()).toLocaleDateString("en-US");
}
date();Code language: JavaScript (javascript)

date() 関数は、デフォルト値が today() 関数の戻り値である 1 つのパラメータを取ります。today() 関数は、指定された文字列形式で今日の日付を返します。

date() 関数を宣言した時点では、today() 関数は、date() 関数を呼び出すまで評価されていません。

この機能を使用して、引数を必須にすることができます。呼び出し元が引数を渡さない場合、次のようにエラーをスローします。

function requiredArg() {
   throw new Error('The argument is required');
}
function add(x = requiredArg(), y = requiredArg()){
   return x + y;
}

add(10); // error
add(10,20); // OKCode language: JavaScript (javascript)

3) デフォルト値における他のパラメータの使用

次の例に示すように、他のデフォルトパラメータを参照するデフォルト値をパラメータに割り当てることができます。

function add(x = 1, y = x, z = x + y) {
    return x + y + z;
}

console.log(add()); // 4Code language: JavaScript (javascript)

add() 関数では

  • y のデフォルト値は x パラメータに設定されています。
  • z のデフォルト値は x と y の合計です。
  • add() 関数は、x、y、および z の合計を返します。

パラメータリストは、独自のスコープを持つようです。まだ初期化されていないパラメータを参照すると、エラーが発生します。例えば

function subtract( x = y, y = 1 ) {
    return x - y;
}
subtract(10);Code language: JavaScript (javascript)

エラーメッセージ

Uncaught ReferenceError: Cannot access 'y' before initializationCode language: JavaScript (javascript)

関数の使用

関数の戻り値を、パラメータのデフォルト値として使用できます。例えば

let taxRate = () => 0.1;
let getPrice = function( price, tax = price * taxRate() ) {
    return price + tax;
}

let fullPrice = getPrice(100);
console.log(fullPrice); // 110Code language: JavaScript (javascript)

getPrice() 関数では、taxRate() 関数を呼び出して税率を取得し、この税率を使用して価格から税額を計算します。

arguments オブジェクト

関数内の arguments オブジェクトの値は、関数に渡す実際の引数の数です。例えば

function add(x, y = 1, z = 2) {
    console.log( arguments.length );
    return x + y + z;
}

add(10); // 1
add(10, 20); // 2
add(10, 20, 30); // 3Code language: JavaScript (javascript)

これで、JavaScript のデフォルト関数パラメータとその効果的な使用方法を理解できたはずです。

このチュートリアルは役に立ちましたか？
JavaScript Recursive Function
前へ
JavaScript 再帰関数
次へ
JavaScript オブジェクトメソッド
Javascript Object Methods