4.1 関数のパラメータ
JavaScriptの関数パラメータは、値を関数に渡して処理することを可能にするんだ。これで関数はもっと柔軟で適応力があるものになるよ。このトピックでは、JavaScriptにおける関数パラメータの基本的な使い方を見ていくよ、 デフォルトパラメータやレストパラメータは含まない。
パラメータは関数名の後の丸括弧内に指定するよ。関数を呼び出す時に、これらのパラメータの値が関数内の対応する変数に渡されるんだ。
例:
関数 greet() には2つのパラメータ: name と age が定義されてるよ。関数を呼び出す時に、
値 Alice と 30 がこれらのパラメータに渡されるんだ。
function greet(name, age) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
未定義パラメータの処理
関数を呼び出す時にパラメータが渡されない場合、その値は undefined になるんだ。これをサポートしない操作をするとエラーになるかも。
例:
関数 greet() は、パラメータ name が渡されたかどうかをチェックしてるよ。もし渡されなかったら、文字列 Guest が使われる。
function greet(name) {
if (name === undefined) {
return 'Hello, Guest!';
}
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Bob')); // "Hello, Bob!"
4.2 デフォルトパラメータ
デフォルトパラメータ は、関数が呼び出される時に引数が渡されず、または undefined として渡された場合に使用される値を指定することを可能にするんだ。オプションのパラメータを持つ関数の作成に特に便利だよ。
構文:
function name (arg1 = value1, arg2 = value2) {
// function body
}
例 1: デフォルトパラメータを持つシンプルな関数
この例では、関数 greet() はデフォルト値 Guest を持つパラメータ name を持ってるよ。引数が渡されない場合、デフォルト値が使用されるんだ。
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // 出力: Hello, Alice!
console.log(greet()); // 出力: Hello, Guest!
例 2: 式を用いたデフォルトパラメータ
この例では、パラメータ tax のデフォルト値は、別の引数が渡されなかった場合に price の20%として計算される。
function calculatePrice(price, tax = price * 0.2) {
return price + tax;
}
console.log(calculatePrice(100)); // 出力: 120
console.log(calculatePrice(100, 15)); // 出力: 115
例 3: 他のパラメータに依存するデフォルトパラメータ
この例では、デフォルトパラメータを使用して、事前定義された役割やステータスを持つユーザーを作成するんだ。
function createUser(name, role = 'user', isActive = true) {
return { name, role, isActive };
}
console.log(createUser('Alice')); // 出力: { name: 'Alice', role: 'user', isActive: true }
console.log(createUser('Bob', 'admin')); // 出力: { name: 'Bob', role: 'admin', isActive: true }
console.log(createUser('Charlie', 'moderator', false)); // 出力: { name: 'Charlie', role: 'moderator', isActive: false }
4.3 レストパラメータ
レストパラメータ は、関数が任意の数の引数を受け取り、それらを配列にまとめることを可能にするんだ。これにより、任意の数の引数で動作する関数を作成することができるよ。
構文:
function name (arg1, arg2, ...argArray) {
// function body
}
例 1: 渡されたすべての引数を合計する
この例では、関数 sumAll() はレストパラメータを使用して、渡されたすべての引数を合計するよ。
function sumAll(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(sumAll(1, 2, 3)); // 出力: 6
console.log(sumAll(4, 5, 6, 7, 8)); // 出力: 30
例 2: 固定パラメータとレストパラメータを持つ関数
この例では、関数 showItems() は固定パラメータ firstItem と、配列 otherItems にまとめられた不特定多数の残りの引数を受け取るよ。
function showItems(firstItem, ...otherItems) {
console.log(`最初のアイテム: ${firstItem}`);
console.log(`他のアイテム: ${otherItems.join(', ')}`);
}
showItems('apple', 'banana', 'cherry', 'date');
// 出力:
// 最初のアイテム: apple
// 他のアイテム: banana, cherry, date
例 3: 動的引数を持つ関数
この例では、関数 createMessage() は最初の引数 messageType を受け取り、
残りの引数をすべて配列 messages に集めてメッセージを作成するんだ。
function createMessage(messageType, ...messages) {
return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
}
console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
// 出力: [INFO]: This is an informational message
console.log(createMessage('error', 'An', 'error', 'occurred'));
// 出力: [ERROR]: An error occurred
GO TO FULL VERSION