JavaScriptの条件分岐の中で変数を宣言するタイミングのコツ

1. 条件分岐内で変数を宣言する理由

1. 条件分岐内で変数を宣言する理由

条件分岐の中で変数を宣言すると、その変数はif文のスコープ（有効範囲）の中だけで使えます。スコープとは、変数が生きている範囲のことです。スコープを意識すると、不要な変数の誤使用を防ぐことができます。

if (user) {
  let age = user.age;
  console.log("ユーザーの年齢は", age);
}

ユーザーの年齢は 25

この場合、ageはif文の中でのみ有効です。外側からはアクセスできません。

2. 外側で宣言してから条件分岐で代入する方法

2. 外側で宣言してから条件分岐で代入する方法

変数を外側で宣言しておくと、if文の外でも値を利用できます。複数の条件で値を使い回す場合に便利です。

let status;

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

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

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

この場合、statusはif文の外でも参照できます。条件によって値が変わる変数にはこの方法が適しています。

3. letとconstの使い分け

3. letとconstの使い分け

変数を宣言するときは、値が変わる可能性がある場合はlet、値が変わらない場合はconstを使うと良いです。これにより、意図しない値の上書きを防ぎ、バグを減らせます。

if (user) {
  const name = user.name; // 変更しない場合はconst
  let points = user.points; // 変更する可能性がある場合はlet
}

（出力結果はありません）

この書き方でスコープを明確にすると、コードが読みやすくなり安全性も高まります。

4. ネストの中で変数を使うときの注意点

4. ネストの中で変数を使うときの注意点

if文のネストが深くなる場合、変数の宣言位置に注意しないと意図しない値になることがあります。可能であれば、早期リターンやガード節を使い、スコープをシンプルに保ちましょう。

function processUser(user) {
  if (!user) return;

  let message;
  if (user.active) {
    message = "アクティブなユーザーです";
  } else {
    message = "非アクティブなユーザーです";
  }

  console.log(message);
}

アクティブなユーザーです

このように外側で変数を宣言し、条件ごとに代入することで、スコープの問題を避けつつ可読性も保てます。

5. 宣言タイミングのコツまとめ

5. 宣言タイミングのコツまとめ

• 条件内だけで使う変数はif文内で宣言する
• 条件の外でも使う変数は外側で宣言する
• 値が変わる可能性がある場合はlet、変わらない場合はconstを使う
• ネストが深くなる場合は早期リターンやガード節を使うとスコープがシンプルになる

これらを意識することで、JavaScriptの条件分岐内での変数管理が簡単になり、バグを減らし読みやすいコードが書けます。