【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/05/19 02:42時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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

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

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次