デフォルト引数

JavaScriptでの関数の受け取る引数には「=」でデフォルト値を指定する事が可能です。
デフォルト値を指定した場合、呼び出し元から引数を受け取らなかった場合に指定した値が代入されるようになります。

実際にサンプルを見てみましょう。

function myFunction(num = 1) {

console.log(num);

}

myFunction();

// 1

myFunction(100);

// 100

シンプルで引数の隣に「＝」と値を記述するだけでOKです。

myFunction() に値を入れなければ「1」が出力され、値を入れればその値が出力されるものになります。

パラメーターの順番には注意してください。

function greet(msg,person) {

console.log(`${msg}、${person}さん`);

}

greet('おはよう', '太郎');

// おはよう、太郎さん

ここまでは問題ないと思います。

デフォルト値を設定してみましょう。

function greet(msg = 'こんにちは',person) {

console.log(`${msg}、${person}さん`);

}

greet('おはよう', '太郎');

// おはよう、太郎さん

 

// 「こんにちは」を入れたいので、引数を省略すると、、、

greet('太郎');

// 太郎、undefinedさん

「太郎」が一つ目の引数と認識し、msgに「太郎」が入ります。

personには値がないとみなされ、「undefined」となってしまいます。

そのため、デフォルト値を設定する場合は末尾に設定することが多いです。

function greet(person, msg = 'こんにちは', suffix='!!') {

console.log(`${msg}、${person}さん${suffix}`);

}

greet('太郎');

// こんにちは、太郎さん!!

また、msgのみデフォルト値を使って出力したい場合は、

function greet(person, msg = 'こんにちは', suffix='!!') {

console.log(`${msg}、${person}さん${suffix}`);

}

greet('山田', undefined,'。');

// こんにちは、山田さん。

真ん中のmsgを飛ばすということを教える必要があるため、真ん中に「undefined」を設定します。

msgは「undefined」と認識され、デフォルト値が入るという流れになります。

簡単に使うことができるので覚えておきましょう。