関数を定義する際に、括弧()の中に入る変数のことを引数と呼びます。
function 変数名(引数)のような表現を見たことがあるのではないでしょうか。
今回は、引数を使って関数にデータを渡す方法や、引数の仕組みについて解説していきます。
引数
引数とは、関数に引き渡す値のことです。「ひきすう」と呼びます。
関数を作る際に、オプションで引数を指定することができます。
引数は、厳密には以下の2種類あります。
- 仮引数 (parameter)：関数を定義する際に指定し、関数呼び出し時に渡された値が入る変数
- 実引数 (argument)：関数を呼び出す際に指定し、関数呼び出し時に渡される実際の値
どちらも共通して引数と呼ばれることが一般的ですが、役割が異なります。
仮引数aと実引数1を例にして、違いを見てみましょう。
function example(a) { // 仮引数
console.log(a);
}
example(1); // 実引数
// 1
流れはこのようになっています。
- 関数宣言時に仮引数aを指定する
- 仮引数aはその関数内で使用できる
- 仮引数aを使ってコンソール出力する処理を書く
- 関数呼び出し時に実引数1を渡す
- 実引数1は仮引数aにコピーする
- 関数は渡された実引数を使う
- 結果1がコンソール表示される
ここではなんとなくイメージできていれば問題ありません。
以下で実際の使い方を解説していきます。
引数の使い方
関数を定義する際に、関数名の後ろの括弧()に、仮引数を指定することができます。
複数の引数を指定する場合、カンマ,で区切って記述します。
function 関数名(仮引数1, 仮引数2, ...) {
実行する処理;
}
仮引数には変数を使用します。
関数が呼び出されると、渡されてきた実引数が、引数の箇所に記述した変数に格納されます。
関数を呼び出す際には、呼び出したい関数名の後ろの括弧()に、実引数を指定します。
仮引数と同じように、複数の引数を指定する場合、カンマ,で区切ります。
関数名(実引数, 実引数2, ...);
実引数には実際の値や式を記述します。
関数を呼び出すと、記述した値が関数へ渡されます。
以下のコードを見てください。
function showMessage(text, user) { // 仮引数：text, user
console.log(text + ', ' + user);
}
showMessage('Hi', 'JavaScript'); // 実引数1
showMessage('Nice to see you', 'JS'); // 実引数2
// "Hi, JavaScript"
// "Nice to see you, JS"
関数が呼び出されると、実引数1と2が仮引数textとuserにコピーされ、その後関数はその値を使用します。
呼び出し時の引数が少ない場合
関数を呼び出す時に引数が渡されなかった場合、値が格納されなかった引数を参照するとundefinedとなります。
function showMessage(text) {
console.log(text);
}
showMessage('Hi'); // 引数あり
showMessage(); // 引数なし
// "Hi"
// undefined
また、仮引数よりも実引数が少ない場合、余った仮引数は値が格納されないため、undefinedとなります。
function showMessage(text, user) {
console.log(text + ', ' + user);
}
showMessage('Hi');
// "Hi, undefined"
この場合、textには'Hi'が格納されますが、userへは何も格納されません。
デフォルト値
関数宣言時に、あらかじめ仮引数にデフォルト値を設定することができます。
関数宣言の中で、仮引数=デフォルト値と記述します。
function 関数名(仮引数1=デフォルト値, 仮引数2=デフォルト値2, ...){
...
}
これにより、値が格納されなかった引数は、代わりにデフォルト値が代入されるようになります。
では、先ほどundefinedとなった引数にデフォルト値を設定してみましょう。
function showMessage(text='デフォルト値') {
console.log(text);
}
showMessage('Hi');
showMessage();
// "Hi"
// "デフォルト値"
関数の呼び出し時に引数を渡した方は"Hi"が出力され、引数を渡さなかった方は"デフォルト値"が出力されます。
呼び出し時の引数が多い場合
関数呼び出し時の実引数が仮引数よりも多い場合、単純に余った実引数は無視されます。
function calcSum(x, y) {
console.log(x + y);
}
calcSum(1, 5); // 1 + 5
calcSum(1, 5, 10); // 1 + 5 (10は無視される)
// 6
// 6
仮引数が2つに対して実引数を3つ指定すると、3つ目以降の実引数は無視されます。
まとめ
今回は、関数に使われる引数について解説しました。
引数は初心者が取り掛かりにくいトピックでもありますが、一つひとつ意味を理解することで、関数でできることの範囲を広げることができます。
まずは、どういった流れで関数と手続きが行われているのか知ること、引数の書き方を覚えることを意識しましょう。
合わせて読みたい関数入門シリーズ
第1回：関数と宣言
第2回：関数と引数（当記事）
第3回：関数と戻り値
第4回：関数式
第5回：関数オブジェクト
第6回：argumentsオブジェクト
第7回：アロー関数
第8回：コールバック関数
第9回：関数とメソッド
コメント