JavaScript のデフォルトの関数パラメーター
この記事では、名前付きパラメーターをデフォルト値で初期化できるようにする JavaScript のデフォルト関数パラメーターについて説明します（実際のパラメーターが渡されない場合、または undefined が渡される場合）。名前付きパラメーターと実際のパラメーターの違いとその使用法について学習します。
実際のパラメーターは、呼び出し元によって関数に渡される実際の値です。名前付きパラメーターは、実際のパラメーターの名前を使用します。これらの名前は、関数定義の仮パラメーターに関連付けられています。
実際のパラメーターは、関数本体内にラベル付けされています。名前付きパラメーターは、正しくラベル付けされている限り、順序は重要ではありません。
JavaScript のデフォルトの関数パラメーター
次のコードでは、sum() 関数の呼び出し中に値が渡されない（または undefined が渡される）場合、num2 の値は 2 になります。
function sum(num1, num2 = 2) {
return num1 + num2;
}
console.log(sum(10, 3)); // expected output: 13
console.log(sum(3)); // expected output: 5
console.log(sum(3, undefined)); // expected output: 5
ここで、JavaScript のデフォルトの関数パラメーターを使用しない場合はどうなりますか。以下の例を参照してください。
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum(10, 3)); // expected output: 13
console.log(sum(3)); // expected output: NaN
console.log(sum(3, undefined)); // expected output: NaN
次の手法を使用して、NaN（Not a Number）を回避できます。typeof は、num2 の値またはタイプが undefined であるかどうかをチェックし、num2 の値は 1 になります。typeof を使用すると、null や false を含むすべてを渡すことができます。
function sum(num1, num2) {
num2 = (typeof num2 !== 'undefined') ? num2 : 1
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 6
ES2015 を使用すると、関数本体でデフォルトのパラメーターを指定する必要はありません。これで、関数定義内でデフォルト値を割り当てることができます。次のサンプルコードを確認してください。
function sum(num1, num2 = 1) {
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 6
console.log(sum(5, undefined)); // expected output: 6
デフォルト値として別の関数を呼び出すこともできます。次の例を見てください。
function multiply(num1 = 2, num2 = 3) {
return num1 * num2;
}
function sum(num1, num2 = multiply()) {
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 11
console.log(sum(5, undefined)); // expected output: 11
文字列型のデータを使って練習しましょう。
function greetings(
name, greeting, message = greeting + ' ' + name + ', How are you?') {
return message;
}
console.log(greetings('Mehvish', 'Hello'));
// expected output: "Hello Mehvish, How are you?"
console.log(greetings('Mehvish', 'Hello', 'What\'s up'));
// expected output: "What's up"
数値、文字列、および関数を使用して、デフォルトの関数パラメーターを調査しました。破壊的代入を使用してデフォルト値を設定する方法を理解しましょう。しかしその前に、破壊的な割り当てが正確に何であるかを見てください。
const person = {
firstname: 'Mehvish',
lastname: 'Ashiq',
age: 30,
email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} = person
console.log(firstname);
console.log(lastname);
console.log(email);
出力：
"Mehvish"
"Ashiq"
"delfstack@example.com"
objectname.propertyname ではなく、console.log でオブジェクトのプロパティを直接使用していることに気付いたかもしれません。const {firstname,lastname,age,email} = person の行にコメントする場合は、すべての console.log ステートメントに person.firstname、person.lastname、person.email を使用する必要があります。
では、次のコード行は何をしているのでしょうか？これは、オブジェクトをアンパックすることを意味する破壊的な割り当てです。現在、person オブジェクトには最小限のプロパティがあります。
オブジェクトには何百ものプロパティがあり、毎回 objectname.propertyname を使用していると考えてください。散らかって見えます。ここでは、オブジェクトをアンパックすると便利です。
これにより、objectname. の部分を取り除き、propertyname だけを使うことができます。
const {firstname, lastname, age, email} = person;
この破壊的な割り当てを JavaScript のデフォルトの関数パラメーターに使用してみましょう。
function displayPerson(lastname, firstname, email = 'mehvish.ashiq@gmail.com') {
if (typeof email !== 'undefined') {
console.log('not using default value of email');
console.log(firstname, lastname, email);
} else {
console.log('using default value of email');
console.log(firstname, lastname, email);
}
}
const person = {
firstname: 'Mehvish',
lastname: 'Ashiq',
age: 30,
email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} =
person // destructure assignment (unpack the object)
displayPerson(age, firstname, email);
displayPerson(
age,
firstname); // default value of email will be used in this function call
出力：
"not using default value of email"
"Mehvish", 30, "delfstack@example.com"
"not using default value of email"
"Mehvish", 30, "mehvish.ashiq@gmail.com"
この例では、発信者がそれを渡さない場合、デフォルト値の email が使用されます。
