JavaScript 関数のデフォルトパラメータ値: サンプルコード付き解説

2024-04-02

JavaScript 関数のデフォルトパラメータ値の設定方法

デフォルトパラメータ値を設定するには、関数定義時に引数の後に = 演算子とデフォルト値を記述します。

function greet(name = "John Doe") {
  console.log(`Hello, ${name}!`);
}

greet(); // "Hello, John Doe!" と出力
greet("Alice"); // "Hello, Alice!" と出力

この例では、greet 関数は 1 つの引数 name を受け取ります。name 引数が渡されない場合、デフォルト値 "John Doe" が割り当てられます。

デフォルトパラメータ値を設定するメリットは以下の通りです。

コードをより簡潔にすることができる
引数を省略できるようにする
コードの読みやすさを向上させる

デフォルトパラメータ値を設定する際には、以下の点に注意する必要があります。

デフォルトパラメータ値は、必ず式の後に記述する必要がある
デフォルトパラメータ値は、関数呼び出し時に省略できる
デフォルトパラメータ値は、後から渡された引数によって上書きされる

デフォルトパラメータ値は、さまざまな場面で役立ちます。

ユーザー名やパスワードなどのデフォルト値を設定する
オプション引数を設定する
複雑な関数を簡潔にする

以下は、デフォルトパラメータ値の例です。

// ユーザー名とパスワードのデフォルト値を設定
function login(username = "guest", password = "password") {
  // ...
}

// オプション引数を設定
function add(x, y, z = 0) {
  // ...
}

// 複雑な関数を簡潔にする
function calculateArea(shape, width, height = width) {
  // ...
}

デフォルトパラメータ値は、JavaScript 関数で引数にデフォルト値を設定する方法です。デフォルトパラメータ値を設定することで、コードをより簡潔で読みやすくすることができます。

// ユーザー名とパスワードのデフォルト値を設定
function login(username = "guest", password = "password") {
  console.log(`ログイン: ユーザー名=${username} パスワード=${password}`);
}

// オプション引数を設定
function add(x, y, z = 0) {
  console.log(`合計: ${x} + ${y} + ${z} = ${x + y + z}`);
}

// 複雑な関数を簡潔にする
function calculateArea(shape, width, height = width) {
  let area;
  switch (shape) {
    case "square":
      area = width * width;
      break;
    case "rectangle":
      area = width * height;
      break;
    case "circle":
      area = Math.PI * (width / 2) ** 2;
      break;
  }
  console.log(`面積: ${shape}(${width}, ${height}) = ${area}`);
}

// デフォルトパラメータ値の使用例
login(); // ログイン: ユーザー名=guest パスワード=password
login("Alice", "secret"); // ログイン: ユーザー名=Alice パスワード=secret
add(1, 2); // 合計: 1 + 2 + 0 = 3
add(1, 2, 3); // 合計: 1 + 2 + 3 = 6
calculateArea("square", 5); // 面積: square(5, 5) = 25
calculateArea("rectangle", 4, 3); // 面積: rectangle(4, 3) = 12
calculateArea("circle", 10); // 面積: circle(10, 10) = 78.53981633974483

login 関数は、ユーザー名とパスワードのデフォルト値を設定しています。
add 関数は、オプション引数 z を設定しています。
calculateArea 関数は、複雑な計算を簡潔にするためにデフォルトパラメータ値を使用しています。

このサンプルコードを参考に、デフォルトパラメータ値を自分のコードで活用してみてください。

デフォルトパラメータ値を設定する他の方法

オプションオブジェクトを使用すると、複数のオプション引数をまとめて設定することができます。

function greet(options) {
  const name = options.name || "John Doe";
  const age = options.age || 20;

  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet({ name: "Alice", age: 25 }); // Hello, Alice! You are 25 years old.
greet(); // Hello, John Doe! You are 20 years old.

この例では、greet 関数は 1 つの引数 options を受け取ります。options オブジェクトには、name と age というプロパティがあり、それぞれデフォルト値が設定されています。

テンプレートリテラルを使用すると、デフォルト値をより動的に設定することができます。

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

const user = {
  name: "Alice"
};

greet(); // Hello, Alice!

この例では、greet 関数のデフォルトパラメータ値はテンプレートリテラルを使用しています。テンプレートリテラル内の ${user.name} は、user オブジェクトの name プロパティの値に置き換えられます。

引数チェックを行う

デフォルトパラメータ値を使用する場合でも、引数チェックを行うことをおすすめします。

function greet(name = "John Doe") {
  if (typeof name !== "string") {
    throw new TypeError("Invalid name");
  }

  console.log(`Hello, ${name}!`);
}

greet("Alice"); // Hello, Alice!
greet(123); // TypeError: Invalid name