JavaScriptを使っていると関数を作ることがありますが、引数を渡さない場合はデフォルトの動きをさせたいものです。
そんなときのために、JavaScriptでは引数としてデフォルト値を設定する機能があります。
この記事では、JavaScriptで関数の引数にデフォルト値を設定する方法について、初心者の方でも理解しやすいように説明します。
また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！
- 現役のフルスタックWebエンジニアとして活躍中
- プログラミングスクールで教材を執筆した経験アリ
- 副業でプログラミングスクール講師をしている教育のプロ
この記事を通して、関数の引数の基本から、デフォルト値の設定方法までを学び、JavaScriptの関数をより効果的に使えるようになりましょう！
JavaScriptの関数とは
JavaScriptにおける関数とは、一連の処理をまとめて名前を付けたものです。
プログラミングにおいて、関数は非常に重要な役割を果たします。
関数を使うことで、同じコードを何度も書かずに済み、プログラム全体が読みやすく、管理しやすくなります。
関数の基本的な構造
JavaScriptの関数は、以下のような形式で書かれます。
function 関数名(引数1, 引数2, ...) {
// 処理
return 戻り値;
}関数名：
この関数を呼び出す際に使用する名前です。
引数：
関数に渡す値。
引数はオプションで、なくても構いません。
処理：
関数が呼び出されたときに実行されるコード。
戻り値：
関数の処理結果を返す値であり、return文を使って指定します。
戻り値が不要な場合は、return文を省略できます。
関数の例
簡単な関数の例を見てみましょう。
次の関数は、二つの数を受け取り、それらを足した結果を返します。
function add(a, b) {
return a + b;
}この関数addは、引数としてaとbを受け取り、これらを足し算して結果を返します。
この関数を使うときは、以下のように書きます。
let result = add(3, 4);
console.log(result); // 出力：7この例では、add関数に3と4を引数として渡しています。
関数はこれらを足し、7を結果として返します。
関数の役割
関数を使うと、以下のようなメリットがあります。
再利用性：同じコードを何度も書く必要がなく
可読性：コードを小さな部分に分けることで、全体が理解しやすくなる
抽象化：複雑な処理を簡単な関数の呼び出しに置き換えられる
このようなメリットから、処理を関数にできる場面では積極的に関数化を検討してみましょう。
JavaScript関数の引数とは
JavaScriptの関数において、引数（パラメータ）は関数に情報を渡すために使用されます。
引数を使うことで、同じ関数を異なる値で何度も再利用できるようになり、コードの柔軟性と再利用性が高まります。
引数の基本
引数は、関数を定義するときに、関数名の後の括弧内に記述されます。
関数が実行されるとき、これらの引数には値が渡され、関数の内部で使用されます。
例えば、次の関数greetは、名前を引数として受け取り、挨拶のメッセージを作成します。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}この関数を呼び出すときは、引数に具体的な値（この場合は名前）を渡します。
greet("太郎"); // 出力：こんにちは、太郎さん！引数の役割
引数の主な役割は以下の通りです。
柔軟性：同じ関数を異なるデータで複数回使用できる
- 情報の隔離：関数の外部から必要なデータだけを関数内に渡すことができる
- コードの整理：コードをモジュール（部品）化し、再利用しやすくする
これらのポイントは少し難しいかと思いますので、概要だけ理解できれば大丈夫です！
引数の種類
JavaScriptの関数では、次のような引数を使用することができます：
- 必須引数：関数が正しく動作するために必要な引数
- オプション引数：必須ではなく、提供されなくても関数は動作する
- デフォルト引数：呼び出し時に引数が提供されない場合に使用される、予め設定された値
これらの引数はこの後の説明で出てきますので、しっかり覚えておきましょう！
引数にデフォルト値を指定する方法
JavaScriptでは、関数の引数にデフォルト値を設定することができます。
これにより、引数が提供されなかった場合に、関数はデフォルト値を自動的に使用するようになります。
この機能は特に、オプションの引数を持つ関数を書く際に便利です。
デフォルト値の基本的な使い方
関数の引数にデフォルト値を設定するには、引数の宣言時に等号(=)を使って値を指定します。
例えば、以下の関数では、greetingという引数にデフォルト値として"こんにちは"を設定しています。
function greet(name, greeting = "こんにちは") {
console.log(greeting + "、" + name + "さん！");
}この関数を引数２つで呼び出すと、指定した挨拶（文字列）が使用されます。
greet("太郎", "おはよう"); // 出力：おはよう、太郎さん！引数を１つしか提供しない場合、greetingにはデフォルト値の"こんにちは"が使用されます。
greet("太郎"); // 出力：こんにちは、太郎さん！複数の引数にデフォルト値を設定する
関数に複数の引数がある場合、それぞれに異なるデフォルト値を設定することも可能です。
例えば、以下の関数では、2つの引数に異なるデフォルト値を設定しています。
function createMessage(greeting = "こんにちは", name = "友達") {
return greeting + "、" + name + "さん！";
}この関数は、引数を一切渡さずに呼び出すこともできます。
その場合、両方の引数にデフォルト値が使用されます。
console.log(createMessage()); // 出力：こんにちは、友達さん！引数を部分的に提供することもできます。
console.log(createMessage("おはよう")); // 出力：おはよう、友達さん！デフォルト値のメリット
デフォルト値を使うことで、関数はより柔軟になります。
引数を省略しても関数が正しく動作し、コードの可読性も向上します。
また、関数の呼び出し側が引数の値を明示的に決めなくても済むため、エラーの可能性が減少します。
引数がnullの場合のデフォルト値の挙動
JavaScriptで関数の引数にデフォルト値を設定する際、undefinedとnullは異なる挙動を示します。
特に重要なのは、nullを引数として渡したときの挙動です。
デフォルト値は、引数がundefinedのときにのみ適用され、nullの場合には適用されません。
nullとデフォルト値
nullは、JavaScriptにおいて「値がないことを意図的に示す」ために使用される特別な値です。
nullを引数として渡した場合、その引数は「値が意図的に設定されていない」とみなされ、デフォルト値は適用されません。
例えば、次の関数greetではgreeting引数にデフォルト値"こんにちは"を設定しています。
function greet(name, greeting = "こんにちは") {
console.log(greeting + "、" + name + "さん！");
}この関数にnullを引数として渡すと、greetingのデフォルト値は無視され、nullがそのまま使用されます。
greet("太郎", null); // 出力："null、太郎さん！"undefinedとデフォルト値
対照的に、undefinedは「値がまだ割り当てられていない」状態を表します。
引数にundefinedを渡すか、あるいは引数を全く渡さない場合、デフォルト値が適用されます。
greet("太郎", undefined); // 出力：こんにちは、太郎さん！
greet("太郎"); // 出力：こんにちは、太郎さん！これらの例では、greeting引数にundefinedが渡された（または引数が省略された）ため、デフォルト値の"こんにちは"が使用されています。
引数に複数のデフォルト値を指定する方法
JavaScriptの関数では、複数の引数にそれぞれ異なるデフォルト値を設定することが可能です。
この機能を利用することで、関数をより柔軟かつ強力に使いこなすことができます。
複数引数のデフォルト値の設定
複数の引数にデフォルト値を設定する際には、それぞれの引数に対して等号(=)を使って値を割り当てます。
以下の例では、二つの引数greetingとnameにそれぞれデフォルト値を設定しています。
function createMessage(greeting = "こんにちは", name = "友達") {
return greeting + "、" + name + "さん！";
}複数引数のデフォルト値の使用例
関数を呼び出す際に、一部または全ての引数を省略することができます。
引数を省略した場合、その引数にはデフォルト値が使用されます。
console.log(createMessage()); // 出力：こんにちは、友達さん！
console.log(createMessage("おはよう")); // 出力：おはよう、友達さん！
console.log(createMessage(undefined, "太郎")); // 出力：こんにちは、太郎さん！デフォルト値を持つ引数と持たない引数の混在
デフォルト値を持つ引数と持たない引数を同じ関数内で混在させることもできます。
ただし、デフォルト値を持つ引数は通常、デフォルト値を持たない引数の後に配置することが推奨されます。
function sayHello(name, greeting = "こんにちは") {
console.log(greeting + "、" + name + "さん！");
}この関数では、最初の引数nameはデフォルト値を持たず、第二の引数greetingはデフォルト値を持っています。
引数の数が違う場合のデフォルト値の挙動
JavaScriptの関数で引数の数が呼び出し時と定義時で異なる場合、デフォルト値は関数の挙動に大きく影響を与えます。
ここでは、引数の数が違う場合のデフォルト値の挙動について説明します。
引数が省略された場合のデフォルト値
関数が複数の引数を持ち、一部または全部の引数が呼び出し時に省略された場合、省略された引数にはデフォルト値が適用されます。
例えば、次の関数では、２つの引数にデフォルト値が設定されています。
function createGreeting(greeting = "こんにちは", name = "友達") {
return greeting + "、" + name + "さん！";
}この関数を引数なしで呼び出すと、両方の引数にデフォルト値が使用されます。
console.log(createGreeting()); // 出力：こんにちは、友達さん！引数が部分的に提供された場合
関数の引数が部分的にのみ提供された場合、提供された引数はその値が使用され、提供されなかった引数にはデフォルト値が適用されます。
console.log(createGreeting("おはよう")); // 出力：おはよう、友達さん！
console.log(createGreeting(undefined, "太郎")); // 出力：こんにちは、太郎さん！引数が余分に提供された場合
JavaScriptの関数では、定義された引数の数よりも多くの引数を提供することもできますが、余分な引数は無視されます。
これはエラーにはならず、関数は通常どおり実行されます。
console.log(createGreeting("おはよう", "太郎", "余分な引数")); // 出力：おはよう、太郎さん！この例では、”余分な引数”は無視され、createGreeting関数は最初の２つの引数のみを使用します。
JavaScript を学習するなら本がおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため、たった一冊だけでも OK なので本を使ってサクッと学習しておくのがおすすめです！
JavaScript はフロントエンドのすべてに通じますので、全体像をちゃんと学んでおくと給与アップにもつながりますよ。
ご自身のレベル別に JavaScript 本をおすすめしている記事がありますので、ぜひこちらも読んでみてください。
