前回の記事で、変数を宣言する際のletとconstの使い分けを学びましたね。変数がデータを格納する「箱」だとすれば、関数は特定の処理を行う「道具」です。
しかし、ただの道具では、毎回同じ決まった作業しかできません。関数に「引数（ひきすう）」という材料を渡し、「戻り値（もどりち）」という結果を受け取ることで、関数は様々な状況に対応できる「万能な道具」へと進化します。
今回は、この引数と戻り値の仕組みをマスターし、より柔軟で再利用性の高いJavaScriptのコードを書く方法を学びましょう。
1. 引数（ひきすう）：関数に渡す「材料」
引数は、関数が実行される際に、外部から受け取るデータ（材料）のことです。関数を定義する際の括弧 () の中に、カンマ区切りで変数名のように記述します。
定義と呼び出し
以下の例では、greetという関数がnameという引数を受け取り、その名前を使って挨拶メッセージを生成しています。
JavaScript
// 1. 関数定義: nameという引数を受け取る
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
// 2. 関数呼び出し: 呼び出す際に引数（"太郎"や"花子"）を渡す
greet("太郎"); // 結果: こんにちは、太郎さん！
greet("花子"); // 結果: こんにちは、花子さん！
引数を使うメリットは、一つの関数で複数の異なる結果を生み出せる点にあります。挨拶のメッセージを変えたい場合、関数の中身を変える必要はなく、呼び出し時に渡す引数だけを変えれば良いのです。
引数のデフォルト値
もし引数が何も渡されなかった場合、その引数は自動的にundefinedになります。これを避けるため、引数にデフォルト値を設定することができます。
JavaScript
function greet(name = "ゲスト") { // nameのデフォルト値を設定
console.log("こんにちは、" + name + "さん！");
}
greet("山田"); // 結果: こんにちは、山田さん！
greet(); // 結果: こんにちは、ゲストさん！
2. 戻り値（もどりち）：関数が出す「結果」
戻り値は、関数がその処理を終えた後に、呼び出し元に返す「結果」のことです。これには**return**キーワードを使います。
returnが実行されると、関数はその時点で処理を終了し、returnの後に書かれた値を呼び出し元に返します。
計算結果を返す関数の例
以下の例では、add関数が2つの引数を受け取り、その合計を計算し、returnで結果を呼び出し元に返しています。
JavaScript
// 1. 関数定義: 合計値を戻り値として返す
function add(num1, num2) {
let sum = num1 + num2;
return sum; // 処理結果を呼び出し元に返す
// return文の後に書いたコードは実行されない
}
// 2. 関数呼び出し: 戻り値をresultという変数で受け取る
let result = add(10, 5); // add(10, 5)は15に置き換わる
console.log(result); // 結果: 15
戻り値の重要性
戻り値を使うことで、関数を組み合わせて使うことができるようになります。
JavaScript
// 複数の関数を組み合わせる
let finalResult = add( add(2, 3), 10 ); // add(2, 3)の戻り値(5)を次のaddの引数に使う
console.log(finalResult); // 結果: 15
戻り値がない関数（returnがない、または空のreturn）は、undefinedを返します。値を返さない関数は、Webサイトに直接何かを表示したり（console.logやDOM操作など）、外部のシステムにデータを送信したりする副作用を持つことが多いです。
まとめ：引数と戻り値でコードの再利用性を高める
引数と戻り値は、関数を単なるコードの塊から、独立した機能を持つモジュールへと進化させます。
- 引数: 関数に柔軟性をもたらし、異なるデータで同じ処理を実行可能にする。
- 戻り値: 関数の実行結果を外部に渡し、他の関数や変数と連携できるようにする。
この2つの概念を意識することで、あなたの書くJavaScriptのコードは、より整理され、どこでも使い回せる「高品質な部品」へと変わります。まずは、前回作った関数に引数を追加したり、return文を追加して、その結果を別の変数で受け取ってみることから始めてみましょう。
