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

こんにちは、未来のJavaScript魔法使いの皆さん！今日は、JavaScriptのデフォルトパラメータの魔法の世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。では、バーチャルの杖（キーボード）を手に取り、コードの魔法をかけてみましょう！

デフォルトパラメータの構文

JavaScriptの古い時代（ES6以前）では、関数パラメータにデフォルト値を設定するのは、猫にボールを拾わせるのと同じく、可能ですがあまり洗練されていません。以下のような手口を使っていました：

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

しかし、ES6以降では、より良い方法があります：

function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}

greet(); // 出力: Hello, Anonymous!
greet('Alice'); // 出力: Hello, Alice!

この例では、greet()に引数を渡さない場合、デフォルト値 'Anonymous' を使用します。知らない人の名前を知らないとする丁重な門番がいるようなものです！

表現式をデフォルトパラメータ値として渡す

デフォルトパラメータは简单な値に限りません。表現式でもできます！以下の例を見てみましょう：

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // 出力: 25
console.log(calculateArea(5, 3)); // 出力: 15

ここで、幅を指定しない場合、長さの値を使用します。片方の長さしか与えないと正方形を作る怠け者みたいなものです！

さらに凝ったものもあります：

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // 出力: Hello, Bob! The lucky number is 42. (または任意のランダムな数)

この関数は、カスタムグreetingを指定しない場合、毎回ランダムな幸運な数字を生成します。フォーチュン 每个、でもより親しみやすいものです！

undefined 引数の渡し方

以下の奇妙な振る舞いに注意してください：

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // 出力: Default message
showMessage(null); // 出力: null

undefined を渡すのは何も渡さないのと同じで、デフォルト値が触发されます。しかし、null は有効な値と見なされ、デフォルトを上書きします。undefined は「私は知らない、あなたが決めて」、null は「私の選択は何もです」と言っているようなものです！

関数表現をデフォルトパラメータとして使用する

関数表現をデフォルトパラメータとして使用することもできます。以下を見てみましょう：

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // 出力: Hello Alice!
greet('Bob', () => 'Hi there'); // 出力: Hi there Bob!

これにより、デフォルトパラメータの値だけでなく、その振る舞いもカスタマイズできます。カスタマイズ可能な挨拶ロボットのようなものです！

関数のオプションパラメータ

さて、オプションパラメータについて話しましょう。JavaScriptでは、すべてのパラメータはデフォルトでオプションです。提供しないと undefined になります。しかし、デフォルトパラメータを使うことで、フォールバック値を設定できます：

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // 出力: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // 出力: { name: 'Bob', age: 25, country: 'USA' }

このようにして、必要なパラメータ（名前と年齢）とオプションのパラメータ（国）を作成できます。形式では、必須フィールドは赤いアスタリスクでマークされており、他は任意のフィールドです！

以下に、私たちが議論した方法を要約する表を示します：

メソッド	説明	例
基本的なデフォルトパラメータ	引数が渡されない場合にフォールバック値を提供	function greet(name = 'Anonymous')
表現式としてデフォルト	表現式を使ってデフォルト値を計算	function calcArea(length, width = length)
undefined の振る舞い	undefined はデフォルトを触发、null はデフォルトを上書き	showMessage(undefined) vs showMessage(null)
関数としてデフォルト	関数を使ってデフォルト値を計算	function greet(name, getGreeting = () => 'Hello')
オプションパラメータ	一部のパラメータをオプションにしてデフォルト値を設定	function createUser(name, age, country = 'Unknown')

若いパダワンたち、デフォルトパラメータはあなたのコードのセーフティネットです。あなたが落下（または引数を忘れる）したときにキャッチして、関数が常に何かを処理できるようにします。賢く使って、コードがあなたと共に進むことを祈っています！

Credits: Image by storyset