未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【JavaScript】関数に初期値を設定する方法

本記事では、JavaScriptで関数に初期値を設定する方法についてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

今までの関数に初期値を設定する方法

今までの関数に初期値を設定する方法といえば、以下の方法が主流でした。

JavaScript
function output(val) {
  if (!val) {
    val = "初期値";
  }
  console.log(val);
}

output(); // -> 初期値
output("Hello World"); // -> Hello World

これは関数で受け取った引数をif文で条件分岐にかけ、引数がundefinedだった場合つまり何も引数が渡されていない状態にのみ初期値を設定します

ES6以降の関数に初期値を設定する方法

ES6以降では、今までのようにわざわざ条件分岐を使用しなくても簡単に引数に初期値を設定することができるようになりました。

引数が1つの場合

引数が1つの場合は、以下のように設定することができます。

JavaScript
function birthplace(val = "TOKYO") {
  console.log(`出身地は${val}です。`);
}

birthplace(); // -> 出身地はTOKYOです。
birthplace("Chiba"); // -> 出身地はChibaです。

変数に値を代入する書き方と同じで引数に設定したい初期値を代入します。

引数が複数の場合

引数が複数ある場合は、以下のように設定することができます。

JavaScript
function bookInfo(name, shop = "Amazon", price) {
  console.log(`本の名前:${name} お店:${shop} 価格:${price}円`);
}

bookInfo(); // -> 本の名前:undefined お店:Amazon 価格:undefined円
bookInfo("桃太郎", "Yahoo", 1000); // -> 本の名前:桃太郎 お店:Yahoo 価格:1000円

引数に初期値を設定していないものに対して、引数を渡さない場合は値がundefinedになります。

引数同士を利用する場合

引数は左から順に評価されていくため、1つ目の引数と2つ目の引数を組み合わせて新たに3つ目の引数を作成することも可能です。

HTML
function callName(firstName = "太郎", lastName = "田中", fullName = `${lastName}${firstName}`) {
  console.log(`私の名前は${fullName}です。`);
}

callName(); // -> 私の名前は田中太郎です。
callName("一郎", "鈴木"); // -> 私の名前は鈴木一郎です。