JavaScriptの条件分岐でデフォルト値を設定する方法

1. if文を使ってデフォルト値を設定する方法

1. if文を使ってデフォルト値を設定する方法

if文で値が未定義やnullの場合にデフォルト値を設定する基本的な方法です。

let userName;

if (!userName) {
  userName = "ゲスト";
}

console.log("ユーザー名:", userName);

ユーザー名: ゲスト

ここではuserNameが空やundefinedの場合に「ゲスト」というデフォルト値を設定しています。

2. 論理演算子を使った短縮記法

2. 論理演算子を使った短縮記法

論理演算子||を使うと、if文を使わずにデフォルト値を設定できます。

let userName;
userName = userName || "ゲスト";

console.log("ユーザー名:", userName);

ユーザー名: ゲスト

ここでの意味は、「userNameがfalse（undefined、null、空文字など）の場合は'ゲスト'を代入する」ということです。

3. 関数の引数でデフォルト値を設定する方法

3. 関数の引数でデフォルト値を設定する方法

関数に値が渡されなかった場合にデフォルト値を設定することもできます。関数を使うと条件分岐がスッキリします。

function greet(name = "ゲスト") {
  console.log("こんにちは、" + name + "さん！");
}

greet();       // 引数なし
greet("太郎"); // 引数あり

こんにちは、ゲストさん！
こんにちは、太郎さん！

引数に値が渡されなければ、自動でデフォルト値「ゲスト」が使われます。

4. 条件分岐と組み合わせたデフォルト値の設定

4. 条件分岐と組み合わせたデフォルト値の設定

複数の条件がある場合でも、デフォルト値を先に設定しておくとコードが読みやすくなります。

let status;
let user = { active: false };

if (user.active) {
  status = "アクティブ";
} else {
  status = "非アクティブ";
}

// デフォルト値を設定
status = status || "不明";

console.log("ユーザーの状態:", status);

ユーザーの状態: 非アクティブ

この方法では、どの条件にも当てはまらなかった場合に「不明」というデフォルト値が設定されます。

5. デフォルト値設定のポイント

5. デフォルト値設定のポイント

• if文で値が存在しない場合に明示的に設定する
• 論理演算子||で簡単に設定できる
• 関数の引数にデフォルト値を設定すると条件分岐が減る
• 複雑な条件でも先にデフォルト値を設定しておくと可読性が上がる

これらを意識すると、JavaScriptの条件分岐で効率的にデフォルト値を扱えるようになります。初心者でも簡単に理解でき、コードの保守性も向上します。