本記事では、JavaScriptで関数に初期値を設定する方法についてサンプルコードを用いて分かりやすく解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
今までの関数に初期値を設定する方法
今までの関数に初期値を設定する方法といえば、以下の方法が主流でした。
function output(val) {
if (!val) {
val = "初期値";
}
console.log(val);
}
output(); // -> 初期値
output("Hello World"); // -> Hello World
これは関数で受け取った引数をif文で条件分岐にかけ、引数がundefinedだった場合つまり何も引数が渡されていない状態にのみ初期値を設定します
ES6以降の関数に初期値を設定する方法
ES6以降では、今までのようにわざわざ条件分岐を使用しなくても簡単に引数に初期値を設定することができるようになりました。
引数が1つの場合
引数が1つの場合は、以下のように設定することができます。
function birthplace(val = "TOKYO") {
console.log(`出身地は${val}です。`);
}
birthplace(); // -> 出身地はTOKYOです。
birthplace("Chiba"); // -> 出身地はChibaです。
変数に値を代入する書き方と同じで引数に設定したい初期値を代入します。
引数が複数の場合
引数が複数ある場合は、以下のように設定することができます。
function bookInfo(name, shop = "Amazon", price) {
console.log(`本の名前:${name} お店:${shop} 価格:${price}円`);
}
bookInfo(); // -> 本の名前:undefined お店:Amazon 価格:undefined円
bookInfo("桃太郎", "Yahoo", 1000); // -> 本の名前:桃太郎 お店:Yahoo 価格:1000円
引数に初期値を設定していないものに対して、引数を渡さない場合は値がundefinedになります。
引数同士を利用する場合
引数は左から順に評価されていくため、1つ目の引数と2つ目の引数を組み合わせて新たに3つ目の引数を作成することも可能です。
function callName(firstName = "太郎", lastName = "田中", fullName = `${lastName}${firstName}`) {
console.log(`私の名前は${fullName}です。`);
}
callName(); // -> 私の名前は田中太郎です。
callName("一郎", "鈴木"); // -> 私の名前は鈴木一郎です。