それでは「実際にどんな場面で使うのか」をイメージしやすいように、日常的な処理を例にしてみましょう。
実用的なサンプルコード集
1. arguments を使って「入力の数で処理を変える」
function calc() {
if (arguments.length === 1) {
console.log("1つだけなので、そのまま返す:", arguments[0]);
} else if (arguments.length === 2) {
console.log("2つなので足し算:", arguments[0] + arguments[1]);
} else {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
console.log("3つ以上なので合計:", total);
}
}
calc(5); // => そのまま返す: 5
calc(2, 3); // => 足し算: 5
calc(1, 2, 3); // => 合計: 6
👉 「渡された数に応じて動作を変える」典型例。
2. デフォルト引数で「省略時の初期値を設定」
function greet(name = "ゲスト", time = "昼") {
console.log(`こんにちは、${name}さん！良い${time}を！`);
}
greet("太郎", "朝"); // => こんにちは、太郎さん！良い朝を！
greet("花子"); // => こんにちは、花子さん！良い昼を！
greet(); // => こんにちは、ゲストさん！良い昼を！
👉 「引数が来なくても安全に動く」ようにできる。
3. 可変長引数（rest）で「ログ関数を作る」
function logAll(...msgs) {
msgs.forEach((msg, i) => {
console.log(`メッセージ${i + 1}:`, msg);
});
}
logAll("Hello", "World", "JavaScript");
// => メッセージ1: Hello
// => メッセージ2: World
// => メッセージ3: JavaScript
👉 「何個でも受け取れる」のでログやデバッグに便利。
4. caller のイメージ（参考程度）
function foo() {
console.log("呼び出し元:", foo.caller && foo.caller.name);
}
function bar() {
foo();
}
bar(); // => 呼び出し元: bar
👉 実際の開発ではほぼ使わないけど、「呼び出し元を調べられる」ことを知っておくと古いコードを読むときに役立つ。
まとめ
arguments→ 実際に渡された引数を全部見る（古いコードでよく登場）。- デフォルト引数 → 「省略時の初期値」を設定できる。
- rest パラメータ → 「残り全部を配列で受け取る」。
- caller → 呼び出し元を参照できるが非推奨。
ここまでで「関数まわりの便利な仕組み」を整理しました。
次のステップとしては、「自分で小さなユーティリティ関数を作ってみる」のがおすすめです。