Javascript プログラミング

デフォルト引数【Javascript 入門 #3】

 

みやちゃ

 

皆さんこんにちは、みやちゃです!

物理とプログラミングについて解説しています!

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています!

今回はjavascriptの第三弾です!

デフォルト引数について解説していきます。

今回は
  • デフォルト引数
この記事を読むと

javascriptのデフォルト引数について理解する事ができます!

目次

関数

関数についてはこちらの記事(関数の作成 javascript入門#2)で詳しく解説しているので、ぜひご覧ください。

関数には引数を与える事ができます。

例えば以下のコードをご覧ください。

function calcifer(color){

  if (color == "red"){
    result = "キングスベリーの扉!";
  } else if (color == "blue"){
    result = "港町ー!";
  } else if (color == "green"){
    result = "城のドア";
  } else if (color == "black"){
    result = "ハウルのみぞ知る";
  } else {
    result = "error";
  }
  return result;
};

console.log(calcifer("blue"));

上記のプログラムはcalciferという変数に色の引数を与えてあげる事で、カルシファーがドアの場所を答えてくれる(出力してくれる)という内容です。

上記のように、関数には引数を与えてあげる事ができ、その引数により、処理をどうするかを変える事ができます。

ではこの引数がなかったらどうなるでしょうか?

このプログラム上では、4つの色以外の文字列は全てerrorと返すようになっています。

ここでデフォルト引数を使います。

デフォルト引数

デフォルト引数とは、関数に引数が与えられなかった時、つまり引数なしで関数を呼び出された時に、デフォルト値を引数として出力するというものです。

上記のコードにデフォルト引数を定義してみましょう。

const defaultColor = "blue"

function calcifer(color=defaultColor){

  if (color == "red"){
    result = "キングスベリーの扉!";
  } else if (color == "blue"){
    result = "港町ー!";
  } else if (color == "green"){
    result = "城のドア";
  } else if (color == "black"){
    result = "ハウルのみぞ知る";
  } else {
    result = "error";
  }
  return result;
};

console.log(calcifer());

1行目で、デフォルト引数を定義しています。

19行目のconsole.logのところのcalciferの引数に何も与えなくしてみましょう。

実行結果は以下のようになります。

js-sample miyacha $ node calcifer.js 
# 実行結果
港町ー!

何も引数が与えれらないと、デフォルト引数であるblueが引数として与えられ、「港町ー!」と出力されました。

まとめ

いかがでしたでしょうか?

今回は、デフォルト引数について解説しました。

 

みやちゃ

 

ここまでご覧いただきありがとうございます!

© 2024 とあるエンジニアの備忘録ブログ Powered by AFFINGER5