JavaScriptのデフォルトパラメータ：初心者向けガイド

デフォルトのパラメータを使用すると、関数の操作が非常に簡単になります。デフォルトのパラメータを使用すると、何も指定していない場合にどのパラメータを使用する必要があるかを関数に伝えることができます。これにより、エラーを回避し、コードを読みやすくすることができます。

JavaScriptはES2015でデフォルトパラメータを導入しました。これらを使用すると、事前定義された値で関数を初期化できます。

このガイドでは、デフォルトパラメータとは何か、それらの使用方法、およびデフォルトパラメータとして指定できる式の種類について説明します。開始するために必要なすべてのコードを入手できるように、いくつかの例を見ていきます。

パラメータと引数：戦い

始める前に、初心者からの古くからの質問に答えましょう。パラメータと引数の違いは何ですか？ JavaScriptでデフォルトのパラメーターを使用する前に、違いを知っておく必要があります。

パラメータは、JavaScript関数に渡す名前付き変数です。パラメータに直接値が割り当てられることはありません。これは、関数に渡す値のプレースホルダーです。パラメータの例を次に示します。

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

この例では、「name」がパラメーターです。値は割り当てられていません。

一方、引数は関数に渡される値です：

sayHello("Brett");

コードは「Hello、Brett」を返します。 「Brett」は引数の例であり、これは関数を介して渡した値でした。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

すべてのパラメーターを指定せずに関数を呼び出すと、エラーが発生する可能性があります：

sayHello()

コードは次のようになります：Hello, undefined 。これは、関数に値を渡していないためです。

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

デフォルトのパラメータを指定することで、この問題を解決できます。デフォルトのパラメーターを使用すると、何も指定されていない場合にパラメーターに割り当てられる値を指定できます。

デフォルト値の代入では、代入演算子を使用します：

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

sayHello();

コードは次のようになります：Hello, World 。この例では引数を指定していないことがわかります。代わりに、デフォルトの関数パラメータを設定しました。この場合、引数が指定されていないときはいつでも、関数の「name」パラメーターの値は「World」になります。

これは、値が指定されているかどうかを手動で確認するよりもはるかに簡単です。

デフォルトのパラメータには、任意のプリミティブ値またはオブジェクトをその値として割り当てることができます。有効なデフォルトパラメータの例を次に示します。

• 文字列：「ラテ」
• 番号：2.40
• ブール値：true
• 配列：[“ Steven”、false]
• オブジェクト：{名前：“ Steven”、loyaltyCustomer：false}

複数のデフォルトパラメータの指定

関数で指定できるデフォルトのパラメータの数に制限はありません。次のコードを検討してください：

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

createOrder();

コードは次のようになります：

Order: Espresso
Price: $1.75

この例では、コーヒーと価格の2つのデフォルトパラメータを指定しています。指定したパラメーターをデフォルトパラメーターと通常のパラメーターの間で混同することもできます。これを行うときは、デフォルトパラメータの前に通常のパラメータを配置する必要があります。この例を考えてみましょう：

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

createOrder("Cappuccino");

コードは次のようになります：

Order: Cappuccino
Price: $1.75

カプチーノという1つの引数を指定しました。これは私たちが注文したコーヒーの名前です。このパラメータにはデフォルト値を指定していないため、引数値を指定する必要があります。それ以外の場合は、「未定義」が返されます。

「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('test@test.com');

コードは次のようになります：

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

コードを分解してみましょう。

getRandomUsername()という関数を宣言しました これは、疑似ランダムユーザー名を生成します。これは、乱数を生成し、4つのユーザー名のリストから1つのユーザー名をランダムに選択することで機能します。次に、ユーザー名の最後に乱数が追加されます。この関数は、新しく生成されたユーザー名を返します

createUserで 関数では、「username」パラメータのデフォルト値をgetRandomUsername()と等しくなるように設定しました 関数。これは、新しいユーザーのユーザー名を指定しない場合は常に、ランダムなユーザー名が生成されることを意味します。

次に、コードはユーザーのユーザー名とメールアドレスをコンソールに出力します。

結論

デフォルトのパラメーターを使用すると、関数呼び出しで引数として指定されていない場合にパラメーターに割り当てられる値を設定できます。デフォルトのパラメーターは、関数を読みやすくし、値が関数に渡されないときに発生する可能性のある問題を減らすのに役立ちます。

これで、エキスパートのようなJavaScriptのデフォルトパラメータを使用する準備が整いました。