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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者	CodeMafia
学習時間	19.5時間
受講者数	28,547人
レビュー	(5,025件)

動画の詳細はこちら

Contents

1 今までの関数に初期値を設定する方法
2 ES6以降の関数に初期値を設定する方法

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

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

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("一郎", "鈴木"); // -> 私の名前は鈴木一郎です。