※個人メモ用としても記載しております。
JavaScriptでは、AND演算子（&&）とオプショナルチェイニング演算子（?.）は、それぞれ異なる目的で使用されます。
この記事では、これらの演算子の違いや使い方を詳しく解説し、シンプルに使い分けを説明します。
AND演算子 (&&)
AND演算子は、複数の条件がすべて真（true）の場合にのみ真を返します。条件のどれかが偽（false）の場合、その時点で評価を停止し、偽（false）を返します。
主な用途：
- 複数の条件を組み合わせて評価したいとき
- ショートサーキット評価を利用して
特定の条件が満たされた場合のみ次の処理を行いたいとき
例として
const a = 10;
const b = 20;
if (a > 5 && b < 30) {
console.log("Both conditions are true.");
}
この場合、a > 5 と b < 30 の両方が true であれば
console.log が実行されます。
ショートサーキット評価の例
const user = null;
console.log(user && user.name); // 出力: null
この例では、user が null であるため
user.name は評価されず、null が返されます。
※ ただし、ここで注意すべきなのはJavaScriptにはfalsyと呼ばれる値が存在し、これらは真偽値の評価時に false として扱われます。主な falsy 値には以下のものがあります
- false
- 0（数値のゼロ）
- ""（空文字列）
- null
- undefined
- NaN（Not a Number）
これらの値は、true でも false でもないように見えるかもしれませんが、条件式の中では false として評価されます。
オプショナルチェイニング演算子 (?.)
オプショナルチェイニング演算子は、オブジェクトのプロパティやメソッドにアクセスする際に、null や undefined が原因でエラーが発生するのを防ぐために使用されます。
存在しないプロパティにアクセスしてもエラーを出さず、undefined を返すという安全性が特徴です。
主な用途：
- オブジェクトやプロパティが存在しない可能性がある場合でも、安全にアクセスしたいとき
- ネストされたオブジェクト構造において、特定のプロパティが存在しない場合のエラーを回避したいとき
使用例として
const user = null;
console.log(user?.name); // 出力: undefined
この例では、user が null でもエラーは発生せず、undefined が返されます。
もう一つの例:
const user = {
profile: {
name: "Alice"
}
};
console.log(user.profile?.name); // 出力: "Alice"
console.log(user.address?.city); // 出力: undefined （`address`が存在しないため）
AND演算子 (&&) とオプショナルチェイニング演算子 (?.) の違い
比較表
使い分けのポイント
- 複数条件の評価が必要なとき → AND演算子（&&）
- オブジェクトのプロパティに安全にアクセスしたいとき
→ オプショナルチェイニング演算子（?.）
例としての使い分け
const user = {
profile: {
name: "Alice"
}
};
// AND演算子で名前が存在するかをチェック
if (user && user.profile && user.profile.name) {
console.log(user.profile.name); // "Alice"
}
// オプショナルチェイニングで安全に名前にアクセス
console.log(user?.profile?.name); // "Alice"
この例では、両方の演算子が同じ目的を達成していますが、オプショナルチェイニングの方が簡潔で読みやすいです。
まとめ
オプショナルチェイニング演算子は、ネストされたオブジェクトにアクセスする際のコードをよりシンプルで安全にします。
一方、AND演算子は、複数の条件を一度にチェックする際に使います。
どちらも用途によって適切に使い分けることで、エラーの少ないコードを記述できます。