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

関数を呼び出す時、呼び出し側から関数へ値を渡すときに使うのが引数です。関数は渡されてきた値を受け取り引数のところに記述した変数に格納したあと、関数のブロック内で利用することができます。ここでは JavaScript で引数を使って関数へ値を渡す方法について解説します。

(Last modified: )

引数の基本的な使い方

関数の定義のところでも解説しましたが、もう一度関数の引数についてご説明します。関数の定義では関数名のあとの ( と ) の間に引数(仮引数) を記述します。複数の引数を記述する場合はカンマ(,)で区切って記述します。 

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

  return 戻り値;
}

関数側の仮引数には変数を記述します。関数を呼び出す側から渡されてきた値は、引数のところに記述した変数に格納されます。

関数を呼び出す側は次のように記述します。呼び出す関数名を記述したあとに ( と ) の間に関数に渡す引数(実引数)を記述します。複数の引数を記述する場合はカンマ(,)で区切って記述します。 

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

関数を呼び出す側の実引数には値や式を記述します。関数を呼び出す時に記述した値は関数へ渡されます。

次のサンプルを見てください。 

function dispMessage(msg){
  console.log(msg);
}

dispMessage('Hello');
>> Hello

dispMessage(100);
>> 100

関数を呼び出す時に引数として 'Hello' を記述しています。関数が呼び出されると渡されてきた値が変数 msg に格納されます。関数の引数に記述した変数は、関数のブロック内で参照することができます。今回は引数に格納された値をコンソールに出力しています。

なお JavaScript で関数の定義で記述する引数には変数の宣言の場合と同じようにデータ型を指定することはありません。その為、どのようなデータ型の値であっても受け取ることができます。先ほどのサンプルでは最初に関数を呼び出した時は文字列の 'Hello' 、そして次に関数を呼び出した時は数値の 100 を引数に指定して関数を呼び出しています。

関数の呼び出し側と受け取り側で引数の数が異なる場合

JavaScript の関数では、関数を呼び出す時に記述した値の数と、値を受けとる関数の引数の数が違っていてもエラーにはなりません。例えば関数が 2 つの引数を受け取るように定義しているのに、関数を呼び出す時に値を 1 つしか指定しなかった場合、関数側の 2 つの目の引数を参照すると undefined となります。

次のサンプルを見てください。 

function dispProfile(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

dispProfile('Yamada', 24);
>> name : Yamada
>> old : 24

dispProfile('Suzuki');
>> name : Suzuki
>> old : undefined

関数は name と old の 2 つの引数を受け取ります。最初の関数の呼び出しでは値を 2 つ指定して呼び出していますが、次の関数の呼び出しでは値を 1 つだけ指定して呼び出しています。この場合でもエラーとはならず、値が渡されてこなかった引数を参照すると undefined となります。

先ほどとは逆に関数は 2 つの引数を受け取るように定義しているのに、関数を呼び出す時に値を 3 つ指定した場合、 3 つ目の値は単に使用されないだけとなります。

次のサンプルを見てください。 

function dispProfile(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

dispProfile('Yamada', 24);
>> name : Yamada
>> old : 24

dispProfile('Suzuki', 38, 'Kyoto');
>> name : Suzuki
>> old : 38

関数は name と old の 2 つの引数を受け取ります。最初の関数の呼び出しでは値を 2 つ指定して呼び出していますが、次の関数の呼び出しでは値を 3 つ指定して呼び出しています。この場合でもエラーとはならず、 3 つ目の引数は今回の場合は特に使用されません。

※ 関数に渡されてきた値は arguments という特別なオブジェクトに格納されます。関数でいくつの引数を受け取るように設定していたとしても、 arguments オブジェクトを参照することで呼び出し側から渡されたすべての引数の値を参照することができます。 arguments については別のページで解説します。

引数のデフォルト値を設定する

関数を呼び出すときに記述した値の数が関数の引数の数よりも少なかった場合、値が格納されなかった引数を参照すると undefined となっていました。このような場合に、関数の引数に対してデフォルト値を設定しておくことができます。

書式は次の通りです。 

function 関数名(引数1=デフォルト値1, 引数2=デフォルト値2, ...){
  ...
}

引数にデフォルト値を設定しておくと、関数が呼び出された時に値が渡されてこなかった引数には代わりにデフォルト値が代入されます。

次のサンプルを見てください。 

function dispOrderPrice(price, count=10){
  console.log('Total = ' + (price * count));
}

dispOrderPrice(80, 14);
>> Total = 1120

dispOrderPrice(120);
>> Total = 1200

関数の 2 つの目の引数にデフォルト値が設定されています。関数を呼び出すときに、値を 2 つ指定した場合はその値がそのまま使用されますが、値を 1 つだけ指定した場合には 2 つ目の引数にはデフォルト値である 10 が格納されます。

なお次のように 1 番目の引数にデフォルト値を設定し、 2 番目の引数にデフォルト値を設定しなくてエラーとはなりませんが、関数を呼び出す時に値を 1 つだけ指定すると、関数の 1 番目の引数に値が代入されて 2 番目の引数は undefined となります。 

function dispOrderPrice(count=10, price){
  console.log('Total = ' + (price * count));
}

関数の呼び出し側から渡されてきた値は、デフォルト値が設定されているかどうかに関わらず、関数に記述された順番で引数へ値が代入されていきます。

可変長引数を記述する

JavaScript では関数で引数を記述するときに、引数の前に '...' を付けると、呼び出し側から渡されてきたすべての値を要素とした配列が要素に格納されます。例えば呼び出し側で値を 2 つ指定して関数を呼び出した時は 2 つの要素を持つ配列が引数に格納され、 3 つ指定した場合は 3 つの要素を持つ配列が引数に格納されます。 '...'を付けた引数を Rest Parameter と呼びます。

書式は次の通りです。 

function 関数名(...引数){
  ...
}

関数を呼び出すときに任意の数の値を引数として渡すことができます。

次のサンプルを見てください。 

function calcSum(...num){
  let sum = 0;
  for (let i = 0 ; i < num.length ; i++){
    sum += num[i];
  }

  return sum;
}

calcSum(1, 2, 3);
>> 6

calcSum(1, 2, 3, 4, 5);
>> 15

関数では呼び出し側から渡されてきた値を順番に加算していき結果を呼び出し元に返しています。引数には配列として渡されてきた値が格納されているので、値の数は配列の length プロパティを参照することで確認できます。( length プロパティについては「配列の要素の数を取得する」を参照されてください)。

通常の引数と組み合わせて使用することもできます。書式は次の通りです。 

function 関数名(引数1, 引数2, ...引数3){
  ...
}

この場合、関数の呼び出し側から渡されてきた最初の値が引数1へ格納され、 2 番目の値が引数2へ格納され、残りの値がすべて引数3に格納されます。 '...' が付けられた変数は必ず最後に記述してください。

-- --

JavaScript で引数を使って関数へ値を渡す方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。