Last-Modified: 2020/10/10

JavaScriptのデフォルト引数の設定方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptのデフォルト引数の設定方法について、実践的な書き方と限定された書き方に分け、簡単に解説していきます。

実践的な書き方

JavaScriptでデフォルト引数を設定する場合は分岐処理が必要です。

引数の中身がundefinedであれば、その引数にデフォルトの設定を行います。

function Hello(name) {
    if (name === undefined) {
        name = "名無し";
    }
    console.log(name+"さん、こんにちは。");
}
Hello("田中"); // 田中さん、こんにちは。
Hello(); // 名無しさん、こんにちは。

上記のコードのような分岐処理によって、デフォルト引数を設定することができます。

限定された書き方

IE非対応でも問題がなければ、簡単にデフォルト引数を設定できます。

引数の横に代入演算子(=)と値を書くことでデフォルト引数の設定を行います。

function Hello(name = "名無し") {
    console.log(name+"さん、こんにちは。");
}
Hello("田中"); // 田中さん、こんにちは。
Hello(); // 名無しさん、こんにちは。

上記のコードのname=”名無し”のように、引数の設定と同時にデフォルト引数の設定を行うことができます。

名前付き引数の書き方

IE非対応になりますが、名前付き引数(デフォルト引数含む)を設定できます。

名前付き引数は引数全体を連想配列にし、代入演算子(=)と値で各要素のデフォルト引数を設定可能です。

function Hello( {name = "名無し", title = "さん"} ) {
    console.log(name+title+"、こんにちは。");
}
Hello({title:"様",name:"田中"}); // 田中様、こんにちは。
Hello({}); // 名無しさん、こんにちは。

上記のコードのように、名前付き引数にすることによって、引数の順番が不問となり、さらに引数を指定しないことも可能になります。

• facebook
• Tweet
• Read Later