引数を使って関数へ値を渡す

広告

関数では呼び出す側から関数に対して値を渡すことができます。書式は次の通りです。 

function 関数名(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
}

関数名(引数1, 引数2, ...);

関数を呼び出す時に関数名の後の「(」から「)」の間に引数を記述します。引数には値や値が格納された変数、または式などを記述することができます。引数を複数記述する場合はカンマ(,)で区切り続けて記述して下さい。

例えば「sum」という関数を3つの引数付きで呼び出す場合は次のように記述することができます。 

var num = 10;

sum(20, num, num + 2);

関数は呼び出された時に値が渡されてくると、関数名の後の「(」から「)」の間に記述された引数に順に値が代入されます。(関数定義側で記述された引数は仮引数とも呼ばれます)。よって関数定義側では引数の箇所に渡されてきた値を代入するための変数を記述します。

例えば3つの引数が渡されてくる関数は次のように定義することができます。 

function sum(num1, num2, num3){
  /* ... */
}

sum(20, 15, 8);
sum(19, 5, 37);

※引数の箇所に変数を記述する時に「var」は必要ありません。

関数を呼び出す時に引数が3つ記述されています。この記述された順に関数定義側で引数の箇所に記述された変数に値が代入されていきます。つまり最初の呼び出しでは「num1 = 20」「num2 = 15」「num3 = 8」が行われ、次の呼び出しでは「num1 = 19」「num2 = 5」「num3 = 37」が行われることになります。

引数に記述した変数に代入された値は関数内で参照することができます。 

function sum(num1, num2, num3){
  var sum = num1 + num2 + num3;
}

sum(20, 15, 8);
sum(19, 5, 37);

このようにして関数を呼び出す時に渡された値は、関数内で利用することができます。

なおJavaScriptでは変数を宣言する時にデータ型を記述する必要がないように、関数定義における引数にもデータ型を指定する必要はありません。その為どのようなデータ型の値でも関数に渡す事ができますが、逆にどのような値が渡されてきてもエラーとはなりません。引数が数値であることを想定して関数を記述しているのに文字列が渡されてきた時にどう処理するのかは、関数の中で自分でチェックする処理を記述する必要があります。 

function dispMsg(str){
  document.write("<p>" + str + "</p>");
}

この関数は呼び出されると引数と渡されてきた値を画面に表示します。

関数側の定義よりも多い引数を指定した場合

例えば関数を定義している側では2つしか引数を想定していないのに、関数を呼び出す時に3つ以上の値を引数として指定してもエラーとはなりません。 

function plus(num1, num2,){
  var sum = num1 + num2;
}

plus(19, 5, 37);

この時、3つ目以降に指定した引数は単に捨てられます。

関数側の定義よりも少ない引数を指定した場合

例えば関数を定義している側では2つの引数を記述しているのに、関数を呼び出す時に1つしか引数を指定していなくてもエラーとはなりません。 

function plus(num1, num2,){
  var sum = num1 + num2;
}

plus(19);

この時、値が渡されてこなかった変数「num2」には未定義値(undefined)が代入されます。

余分に引数を指定した場合は単に捨てられるだけですけど、引数が足りない場合は本来想定しているデータ型の値ではなく未定義値(undefined)が代入されることになりますの注意が必要です。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</body>
</html>

function dispMsg(str1, str2){
  document.write("<p>");
  document.write(str1 + "," + str2);
  document.write("</p>");
}

dispMsg("Hello", "Mr.Yamada");
dispMsg("Bye", "Mr.Yamada", "See you");
dispMsg("Thank you");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

呼び出し側と関数定義側で引数の個数が異なっていても、いずれの場合でもエラーとはなりません。

( Written by Tatsuo Ikura )