JavaScriptの学習を始めたばかりの方や、関数と聞いても種類も多く混乱している方に向け関数の定義方法、引数、戻り値、アロー関数などを紹介していきます。
JavaScriptの関数とは？
関数（function）は、プログラミングにおける重要な概念であり基本でもあります。特定の処理をひとまとめにして、必要なときに呼び出して使用できる「命令のパッケージ」と考えることができます。
関数の3つの重要な要素
- 引数(入力)：関数に渡すデータ
- 処理：関数内で実行される具体的な操作
- 戻り値（出力）：関数が返す結果
// シンプルな関数の定義
function 関数名(引数){
return 戻り値
}
//実際の数値に置き換えた場合のシンプルな関数の定義
function onePlus(num){
num = num+1 //引数numに1を足す。numが2の場合、numは3になる
return num //引数のnumが2の場合、numは1が足された3が戻り値
}
// 関数の呼び出し方
関数名(引数)関数の定義方法
従来の関数宣言
基本系といってもいい従来の形です。今も昔もよく見かける関数定義方法です。シンプルで分かりやすいため、初学者の学習には最適ですが、大規模なアプリケーションでは予期せぬバグの原因となることがあります。
function greet(name) {
return こんにちは、${name}さん！;
}関数式
変数に関数を代入する形式です。定義後でないと使用できないためコードの実行順序が明確になり、予期せぬバグが発生しづらくなります。また、関数を変数として扱えるため、他の関数に引数として渡すことも可能です。
const greet = function(name) {
return こんにちは、${name}さん！;
};アロー関数（ES6以降）
ES6で導入された最も現代的な関数の書き方になります。従来の関数に比べて簡潔に書くことが可能です。単一の式の場合はreturnを省略することも可能です。
const greet = (name) => こんにちは、${name}さん！;関数の使い方と実践例
シンプルな計算機の例
function calculator(num1, num2, operation) {
switch (operation) {
case "add": //足し算
return num1 + num2;
case "subtract": //引き算
return num1 - num2;
case "multiply": //掛け算
return num1 * num2;
case "divide": //余りを扱う割り算
return num2 !== 0 ? num1 / num2 : "0で割ることはできません";
default:
return "無効な操作です";
}
}
// 使用例
console.log(calculator(10, 5, "add")); // 15
console.log(calculator(10, 5, "subtract")); // 5
関数の応用テクニック
デフォルトパラメータ
引数を渡さないで関数を呼び出した場合デフォルトパラメータの値が適用される。
const greet = (name = 'ゲスト') => `こんにちは、${name}さん！ `;
greet(); // 結果：'こんにちは、ゲストさん！ 'コールバック関数
コールバック関数とは、別の関数に引数として渡される関数のことです。渡された関数は、特定のタイミングで呼び出されて処理が実行されます。
function processArray(arr, callback) {
return arr.map(callback);
}
const numbers = [1, 2, 3, 4, 5];
const doubled = processArray(numbers, num => num * 2);
doubled // [2, 4, 6, 8, 10]num => num * 2 は アロー関数 で、各 num を 2 倍にする処理です。
processArray関数ではarr（配列）とcallback（コールバック関数）の2つの引数を受け取り、arr.map(callback) により、配列の各要素に対して callback 関数を適用し、新しい配列を返しています。
処理のカスタマイズが可能でcallback を変えるだけで、異なる処理ができます（例：num * 3 にすれば3倍）。
