JavaScript関数 デフォルトパラメータ解説

JavaScriptの関数におけるデフォルトパラメータの指定

JavaScriptでは、関数の引数にデフォルト値を設定することができます。これにより、引数が指定されなかった場合に自動的にデフォルト値が使用されます。

方法

1. 引数名とデフォルト値を等号で繋ぐ
   

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

   この例では、name引数のデフォルト値は"World"です。

2. 関数呼び出し時に引数を省略
   

   greet(); // 出力: Hello, World!
   greet("Alice"); // 出力: Hello, Alice!
   

注意点

• デフォルト値は、関数の定義時に評価されます。そのため、デフォルト値の計算に副作用がある場合は注意が必要です。
• デフォルト値は、引数が undefined の場合にのみ適用されます。

例

function calculateArea(radius = 1) {
    return Math.PI * radius * radius;
}

console.log(calculateArea()); // 出力: 3.141592653589793
console.log(calculateArea(5)); // 出力: 78.53981633974483

JavaScript関数のデフォルトパラメータの解説とコード例

デフォルトパラメータとは？

JavaScriptの関数において、引数にデフォルト値を指定できる機能です。引数が渡されなかった場合、またはundefinedが渡された場合に、このデフォルト値が使用されます。これにより、関数の呼び出し方を柔軟にし、コードの可読性を高めることができます。

コード例とその解説

// 例1: 簡単な挨拶関数
function greet(name = "World") {
  console.log("Hello, " + name + "!");
}

greet(); // 出力: Hello, World!
greet("Alice"); // 出力: Hello, Alice!

• greet("Alice")のように引数を渡すと、渡された値がnameに代入されます。
• greet()と引数なしで呼び出すと、nameはデフォルト値の"World"になります。
• name引数のデフォルト値が"World"に設定されています。

// 例2: 計算を行う関数
function calculateArea(radius = 1) {
  return Math.PI * radius * radius;
}

console.log(calculateArea());  // 出力: 3.141592653589793 (半径1の円の面積)
console.log(calculateArea(5));  // 出力: 78.53981633974483 (半径5の円の面積)

• calculateArea(5)のように引数を渡すと、半径が5になり、それに対応する円の面積が計算されます。
• calculateArea()と引数なしで呼び出すと、半径はデフォルト値の1になります。
• radius引数のデフォルト値が1に設定されています。

デフォルトパラメータのメリット

• 可読性
  コードの意図がより明確になります。
• 柔軟性
  呼び出し側で必要な引数だけを渡すことができます。
• コードの簡潔化
  引数のチェックロジックを減らすことができます。

• undefinedのチェック
  デフォルト値は、引数がundefinedの場合にのみ適用されます。nullや他の値が渡された場合は、デフォルト値は使用されません。
• デフォルト値は一度しか評価されない
  関数が初めて呼び出されたときに、デフォルト値が評価されます。

デフォルトパラメータは、JavaScriptの関数を書く上で非常に便利な機能です。適切に活用することで、より効率的で読みやすいコードを作成することができます。

条件分岐による処理

function greet(name) {
  if (name === undefined) {
    name = "World";
  }
  console.log("Hello, " + name + "!");
}

• デメリット
  
  • コードが冗長になりがち。
  • undefined以外の値が渡された場合の処理が複雑になる可能性がある。
• メリット
  
  • デフォルトパラメータの構文を知らなくても記述できる。
  • 複雑な条件分岐も実装可能。

|| 演算子による代入

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

• デメリット
  
• メリット
  

null合体演算子 (??) による代入 (ES2020以降)

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

• デメリット
  
• メリット
  
  • nullとundefinedのみを判定できるため、より安全。
  • 0や空文字列はfalseと評価されない。

引数オブジェクトの利用

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

greet({}); // 出力: Hello, World!
greet({ name: "Alice" }); // 出力: Hello, Alice!

• デメリット
  
  • コードがやや複雑になる。
  • 呼び出し側でオブジェクトを作成する必要がある。
• メリット
  
  • 複数のオプション引数を柔軟に扱える。
  • デストラクチャリング代入と組み合わせることで、より複雑な処理も可能。

どの方法を選ぶべきか？

• 環境
  古い環境ではnull合体演算子を利用できない。
• 柔軟性
  引数オブジェクトが最も柔軟。
• 安全性
  null合体演算子が最も安全。
• 簡潔さ
  || 演算子やnull合体演算子が最も簡潔。

一般的には、デフォルトパラメータが最も推奨されます。 しかし、状況に応じて他の方法も有効です。

JavaScript関数のデフォルトパラメータには、いくつかの代替方法が存在します。それぞれのメリット・デメリットを理解し、適切な方法を選択することで、より良いコードを書くことができます。

• TypeScript
  TypeScriptでは、デフォルトパラメータに加えて、オプションパラメータやrestパラメータなど、より強力な機能が提供されています。