JavaScriptの関数の引数をやさしく解説！初心者でも理解できる基本と使い方

新人と先輩の会話形式で理解しよう

新人

「JavaScriptで関数にデータを渡すって、どうやるんでしょうか？」

先輩

「JavaScriptの関数では引数を使ってデータを渡すことができます。これはとても大事な概念なので、一緒に基本から学んでいきましょう！」

1. 引数とは何か？

JavaScriptの関数の引数（ひきすう）とは、関数に渡すデータのことを指します。関数を呼び出すときに必要な情報を引数として渡すことで、関数はその情報を使って処理を行います。

たとえば、「二つの数を足す関数」を作るとき、二つの数字を引数として渡せば、関数がそれらを足してくれます。

2. 引数を使った基本の関数例

次に実際に引数を使った関数の例を見てみましょう。引数を使って二つの数字を足し合わせる関数を作り、その結果を画面に表示します。


<script>
function addNumbers(num1, num2) {
    document.write("足し算の結果は: " + (num1 + num2) + "<br>");
}

addNumbers(5, 3);
addNumbers(10, 15);
</script>

ブラウザ表示

このプログラムでは、addNumbersという関数を定義しています。この関数は、二つの引数num1とnum2を受け取り、それらを足し算して結果をdocument.writeで画面に表示します。

3. 実行結果を確認しよう

プログラムを実行すると、次のような結果が表示されます。

足し算の結果は: 8
足し算の結果は: 25

このように、関数に異なる引数を渡すことで、それぞれの計算結果が表示されることが確認できます。

4. 引数を使った他の例

引数は、単に数値だけでなく文字列や他のデータ型にも使えます。次に、文字列を引数にしてメッセージを表示する関数の例を見てみましょう。


<script>
function greet(name) {
    document.write("こんにちは、" + name + "さん！<br>");
}

greet("太郎");
greet("花子");
</script>

ブラウザ表示

このプログラムでは、greetという関数が一つの引数nameを受け取り、その引数に応じたメッセージを表示します。

結果は以下のように表示されます：

こんにちは、太郎さん！
こんにちは、花子さん！

5. 引数の重要性と応用例

引数を使うことで、同じ関数を繰り返し利用し、異なるデータに対して処理を行うことが可能になります。これにより、コードを効率的に書くことができ、複雑なプログラムも簡単に組み立てられます。

例えば、複数のユーザーに対してカスタマイズされたメッセージを送ったり、さまざまな計算を自動的に行ったりすることができます。

6. 引数と戻り値（return）の関係

関数では、引数で受け取ったデータを処理し、その結果を「戻り値（return）」として返すことができます。戻り値を使うことで、処理結果を別の場所で再利用することが可能になります。

次の例では、引数を使って計算した結果をreturnで返しています。


<script>
function add(num1, num2) {
    return num1 + num2;
}

let result = add(5, 7);
document.write("結果は: " + result);
</script>

このように、戻り値を使うことで関数の結果を変数に代入し、後から利用できるようになります。

7. デフォルト引数の使い方

JavaScriptでは、関数の引数に初期値（デフォルト値）を設定することができます。引数が渡されなかった場合でも、あらかじめ決めた値を使って処理を行えます。


<script>
function greet(name = "ゲスト") {
    document.write("こんにちは、" + name + "さん！<br>");
}

greet("太郎");
greet();
</script>

この例では、引数が指定されなかった場合、自動的に「ゲスト」という値が使われます。

8. 引数の数が違う場合の挙動

JavaScriptの関数では、定義した引数の数と実際に渡す引数の数が違っていてもエラーにはなりません。この挙動を理解しておくことはとても重要です。

引数が少ない場合：不足している引数はundefinedになります。
引数が多い場合：余分な引数は無視されます。


<script>
function showMessage(name) {
    document.write("こんにちは、" + name + "さん！<br>");
}

showMessage();          // undefinedが入る
showMessage("太郎", 20); // 余分な引数は無視される
</script>

このような仕様を理解しておくことで、バグの原因を減らすことができます。