【初心者向け】JavaScriptのデフォルトパラメータの使い方を徹底解説

デフォルトパラメータを使うと、関数の操作がぐっと楽になります。あらかじめデフォルト値を設定しておけば、引数が指定されなかった場合に関数がどの値を使うべきかを事前に伝えられます。これにより、エラーの発生を防ぎ、コードの可読性も向上します。

JavaScriptでは、ES2015（ES6）からデフォルトパラメータが導入されました。これにより、あらかじめ定義された値で関数を初期化できるようになっています。

このガイドでは、デフォルトパラメータとは何か、その使い方、そしてデフォルトパラメータとして指定できる式の種類について解説します。実際のコード例もいくつか紹介するので、記事を読み終える頃にはすぐに使い始められるはずです。

パラメータと引数の違いとは？

本題に入る前に、初心者からよく寄せられる質問にお答えしましょう。「パラメータ」と「引数（アーギュメント）」は何が違うのか？　JavaScriptでデフォルトパラメータを扱う前に、この違いを正しく理解しておきましょう。

パラメータとは、JavaScriptの関数に渡される名前付き変数のことです。パラメータ自体に直接値が代入されることはなく、関数に渡す値のプレースホルダー（受け皿）として機能します。次の例を見てください。

function sayHello(name) {
	console.log("Hello, " + name);
}

この例では「name」がパラメータです。まだ具体的な値は代入されていませんね。

一方、引数とは、関数を呼び出すときに実際に渡される値のことです。

sayHello("Brett");

このコードを実行すると「Hello, Brett」と表示されます。ここでの「Brett」が引数であり、関数に渡した値にあたります。

なお、関数を呼び出す際にすべてのパラメータに値を指定しないと、意図しない結果になることがあります。

sayHello()

このコードは Hello, undefined を返します。関数に値を渡していないためです。

JavaScriptのデフォルトパラメータの基本

この問題は、デフォルトパラメータを指定することで解決できます。デフォルトパラメータを使えば、値が指定されなかった場合に自動的に代入される値を設定できます。

デフォルト値の設定には、代入演算子（=）を使用します。

function sayHello(name="World") {
	console.log("Hello, " + name);
}

sayHello();

このコードは Hello, World を返します。引数を指定していないにもかかわらず、きちんと挨拶が表示されましたね。これは、関数側でデフォルトパラメータを設定しているためです。この場合、引数が指定されなかったときには常に、「name」パラメータの値が「World」になります。

この方法なら、値が指定されているかどうかを手動でチェックする必要がなく、はるかにシンプルです。

デフォルトパラメータには、任意のプリミティブ型の値やオブジェクトを設定できます。有効なデフォルトパラメータの例をいくつか挙げます。

• 文字列：「Latte」
• 数値：2.40
• 真偽値：true
• 配列：["Steven", false]
• オブジェクト：{name: "Steven", loyaltyCustomer: false}

複数のデフォルトパラメータを指定する方法

1つの関数に指定できるデフォルトパラメータの数に制限はありません。次のコードを見てみましょう。

function createOrder(coffee="Espresso", price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder();

実行結果：

Order: Espresso
Price: $1.75

この例では、「coffee」と「price」という2つのデフォルトパラメータを指定しています。さらに、通常のパラメータとデフォルトパラメータを混在させることも可能です。ただし、その場合は通常のパラメータをデフォルトパラメータより前に配置する必要があります。次の例を見てください。

function createOrder(coffee, price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder("Cappuccino");

実行結果：

Order: Cappuccino
Price: $1.75

ここでは1つの引数「Cappuccino」だけを指定しました。これは注文したコーヒーの名前です。「coffee」パラメータにはデフォルト値が設定されていないため、必ず引数を渡す必要があります。渡さなければ「undefined」が返されてしまいます。

一方、「price」のデフォルト値は「1.75」と宣言しています。デフォルトパラメータを設定しているため、価格を指定しなかった場合には自動的に「1.75」が適用されます。

重要なポイントとして、通常のパラメータは必ずデフォルトパラメータより先に指定してください。これは、通常のパラメータの値が、関数呼び出し時の引数の並び順に従って割り当てられるためです。

関数をデフォルトパラメータとして使う

デフォルトパラメータには、関数を設定することもできます。これは、渡したい値が別の関数を使って計算されるようなケースで特に便利です。

次のコードでは、ビデオゲームの新規プレイヤー向けに、擬似ランダムなユーザー名を生成する関数を作成します。

function getRandomUsername() {
	var number = Math.floor(Math.random() * 100);
	var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie'];
	var username = username_list[Math.floor(Math.random() * username_list.length)];
	var final_username = username + number;

	return final_username;
}

function createUser(username = getRandomUsername(), email) {
	console.log('Your username is: ' + username);
	console.log('Your email is: ' + email);
}

createUser(undefined, 'test@test.com');

実行結果：

Your username is: Crash87
Your email is: test@test.com

それでは、コードの内容を詳しく見ていきましょう。

まず、getRandomUsername()という関数を宣言しています。この関数は擬似ランダムなユーザー名を生成します。仕組みとしては、0〜99のランダムな数値を生成し、4つのユーザー名のリストからランダムに1つを選択します。そして、選ばれたユーザー名の末尾にランダムな数値を連結したものを返します。

createUser関数では、「username」パラメータのデフォルト値としてgetRandomUsername()関数を設定しています。つまり、第1引数に undefined を渡す（＝ユーザー名を指定しない）と、デフォルトパラメータが評価され、ランダムなユーザー名が自動的に生成されるのです。

最後に、生成されたユーザー名とメールアドレスがコンソールに出力されます。

まとめ

デフォルトパラメータを使うと、関数呼び出し時に引数が指定されなかった場合に代入される値を事前に設定できます。デフォルトパラメータを活用すれば、関数が読みやすくなり、値が渡されないことによって発生しうるトラブルも減らせます。

これであなたも、プロのようにJavaScriptのデフォルトパラメータを使いこなせるようになりました。ぜひ自分のコードでも試してみてください！