関数は「何か処理をまとめて名前をつけたもの」です。引数を使うと、関数に値を渡して、処理を柔軟に変えることができます。
1. 基本の引数
仕組み
- 関数を作るとき、
function 関数名(引数1, 引数2, ...)と書きます。 - 関数を呼ぶとき、
関数名(値1, 値2, ...)と書くと、値が引数に渡ります。
例題
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('Alice'); // 出力: Hello, Alice!
greet('Bob'); // 出力: Hello, Bob!
💡 ポイント: 引数nameに渡した値が、関数の中で使われます。
2. 引数の数が合わない場合
- 渡す値が少なければ、足りない引数は
undefinedになります。 - 渡す値が多ければ、余分な値は無視されます。
例題
function showProfile(name, age) {
console.log('Name: ' + name);
console.log('Age: ' + age);
}
showProfile('Alice', 20); // Name: Alice, Age: 20
showProfile('Bob'); // Name: Bob, Age: undefined
showProfile('Charlie', 25, 'Tokyo'); // Name: Charlie, Age: 25
💡 ポイント: JavaScriptではエラーにならず、柔軟に対応できます。
3. 引数にデフォルト値を設定する
- デフォルト値を設定すると、引数が渡されなかった場合にその値を使えます。
- 書き方は
引数名 = デフォルト値です。
例題
function calculateTotal(price, count = 1) {
console.log('Total: ' + (price * count));
}
calculateTotal(100, 5); // Total: 500
calculateTotal(200); // Total: 200（countはデフォルト1を使用）
💡 ポイント: デフォルト値を使うと「値が無い場合の安全策」を簡単に書けます。
4. 可変長引数（Rest Parameter）
- 引数がいくつになるかわからない場合、
...引数名と書くと配列としてまとめて受け取れます。
例題
function sumAll(...numbers) {
let sum = 0;
for (let num of numbers) {
sum += num;
}
return sum;
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(4, 5, 6, 7, 8)); // 30
💡 ポイント: ...numbers は渡されたすべての値を配列として受け取るイメージです。
通常の引数と組み合わせる場合
function example(a, b, ...others) {
console.log('a:', a);
console.log('b:', b);
console.log('others:', others);
}
example(1, 2, 3, 4, 5);
// a: 1
// b: 2
// others: [3, 4, 5]
💡 ポイント: Rest Parameterは最後に書く必要があります。
まとめ
- 引数は「関数に値を渡すための箱」です。
- 渡す値が少なくても多くても大丈夫（
undefinedや無視される）。 - デフォルト値を使えば値が無くても安全。
- Rest Parameterを使えば、任意の数の引数をまとめて扱える。
練習課題
- 関数
greetPerson(name, age=18)を作って、名前と年齢を表示してみよう。 - 関数
multiplyAll(...nums)を作って、渡された数をすべて掛け算して結果を返してみよう。
解答例と動きのステップ解説
1️⃣ greetPerson(name, age=18) の解答例
function greetPerson(name, age = 18) {
console.log('Hello, ' + name + '!');
console.log('You are ' + age + ' years old.');
}
// 関数の呼び出し例
greetPerson('Alice', 25);
/*
出力:
Hello, Alice!
You are 25 years old.
*/
greetPerson('Bob');
/*
出力:
Hello, Bob!
You are 18 years old.
*/
ステップ解説
- 関数
greetPersonを定義。引数はnameとage。 ageにはデフォルト値18を設定。console.logで名前と年齢を表示。- 関数呼び出し時：
Alice, 25→ageは渡された25を使用Bob→ageは渡されなかったのでデフォルト18を使用
2️⃣ multiplyAll(...nums) の解答例
function multiplyAll(...nums) {
let result = 1;
for (let num of nums) {
result *= num;
}
return result;
}
// 関数の呼び出し例
console.log(multiplyAll(2, 3, 4)); // 出力: 24
console.log(multiplyAll(5, 6)); // 出力: 30
console.log(multiplyAll(7)); // 出力: 7
console.log(multiplyAll()); // 出力: 1
ステップ解説
- 関数
multiplyAllを定義。引数は...nums（Rest Parameter）。 numsには渡された数値すべてが配列として入る。forループで配列の値を1つずつ掛け算。- 結果を
returnで返す。 - 呼び出し例：
(2, 3, 4)→ 2 × 3 × 4 = 24(5, 6)→ 5 × 6 = 30(7)→ 7()→ 引数なし → 初期値1のまま
💡 ポイント
- デフォルト値は「値が渡されなかった時の安全策」。
- Rest Parameterは「いくつ渡されてもまとめて処理できる」。